html/css로 만드는 table 디자인 샘플

html/css로 만드는 table 디자인 샘플

html ⁄ css만으로 디자인한 table 샘플 몇가지를 소개할게요^^

웹에서 테이블은 정보의 가독성을 목적으로 한 것이기 때문에 심플한 디자인이 될 수 밖에 없죠.
거기다 장식할만한 파트도 선이나 배경색, 또는 글자색으로 정해져 있기 때문에 여러 사이트에서 사용하는 테이블 디자인이 매우 비슷한 디자인(색상이 다를 뿐?)으로 되어 있음을 알 수 있습니다.
어쩔 수 없는 것 같아요 ^^;;

그래서, 이번 글에서는 테이블 기본 코드를 몇가지 작성하여, 상황에 따라 조금씩 변형하여 사용할 수 있도록 했습니다. 그 중에서도 아주 심플한, 많이 사용되는 테이블을 소개하려고 합니다.
그냥 마구마구 ctl+c해서 ctl+v 하세요^^

테이블 샘플 코드

외곽선만 사용

심플한 실선만을 사용한 디자인입니다. 요로코롬 심플한 디자인이 변형하기도 쉽지요 ^^

See the Pen jEPJzv by nanati (@nanati) on CodePen.

항목에만 배경색 입히기 + 입체형

항목명에 배경색을 넣고, 회색과 흰색 2가지의 선으로 셀에 살짝콩 입체감을 주었습니다.
색은 심플하지만 납짝한 평면보다는 조금 고급스러운 느낌이 들죠 ^^
심플하지만 많이 쓰이는 스타일입니다.

See the Pen wBaOpy by nanati (@nanati) on CodePen.

테이블 왼쪽 선을 굵게

단조로운 색 배합에 살짝 포인트를 주기 위해서, 테이블 왼쪽 선을 두껍게 처리해봅니다.
같은 색으로 항목명의 색을 맞추면 항목명이 강조되어, 더욱 가독성을 높여줍니다.

See the Pen yyNwpG by nanati (@nanati) on CodePen.

줄노트 디자인

저엉~말 심플한 줄노트 같은 디자인 타입입니다.
요런식의 테이블 디자인을 사용하는 곳도 꽤 있습니다 ^^

See the Pen raVRpg by nanati (@nanati) on CodePen.

줄노트 디자인 + 항목명에 배경색 넣기

위 줄노트 디자인에 항목명의 배경색을 입체적으로 넣은 타입입니다. 요것도 꽤 자주 쓰이는 표 형식이지요.

See the Pen zxGbpg by nanati (@nanati) on CodePen.

짝수 행에만 배경색 넣기

선은 가장 윗선과 아랫선만 넣고, 나머지는 짝수행에 배경색을 넣는 것으로 완성되는 타입입니다.
스타일리쉬한 디자인에, 가독성 또한 좋은 디자인입니다.

See the Pen YPXgep by nanati (@nanati) on CodePen.

2way 헤더 기본형

1행에 테이블의 헤더를 넣고, 각 행의 왼쪽에 항목명을, 오른쪽에 내용을 넣는 기본형 테이블 디자인입니다.

See the Pen gbpEvx by nanati (@nanati) on CodePen.

2way 헤더 + 라인으로 포인트주기 01

테이블 헤더와, 테이블 전체적으로 옅은 색으로 디자인 한 경우, 헤더부분 밑쪽으로 라인으로 포인트를 주면 헤더와 내용의 경계선이 명확해집니다.

See the Pen ByNbYJ by nanati (@nanati) on CodePen.

2way 헤더 + 라인으로 포인트주기 02

위의 디자인에서 헤더의 배경색을 없앤 스타일입니다. 요것도 꽤 많이 쓰이는 디자인이죠 ^^

See the Pen NPqJyM by nanati (@nanati) on CodePen.

2way 헤더 + 짝수행에 배경색 넣기

헤더의 배경색을 가장 진하게 처리하고, 짝수행의 배경색을 그것보다 꽤 옅은 색으로 입히면 되는 심플한 타입입니다. 가독성도 좋아서 많이 쓰입니다.

See the Pen jEPJZv by nanati (@nanati) on CodePen.

1way 헤더

1행에 타이틀이 오는 경우의 테이블 디자인입니다. 타이틀 부분만 진한 배경색으로 강조하였습니다.

See the Pen YPXgap by nanati (@nanati) on CodePen.