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

SHARE

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.

댓글

  1. stranger 댓글:

    감사합니다! 혹시 글등록 하는 페이지 소스도 있습니까^^??

    • nanati 댓글:

      방문, 댓글 감사합니다 ^^
      글 등록하는 페이지소스라는 말씀이 무슨 말씀이신지 모르겠어서
      답변드리기가 어렵네요~

      • stranger 댓글:

        게시판 소스는 말그대로 글 목록 (번호,작성자,제목 등) 간단하게 나온거구요~
        글 등록하는 페이지는 사용자가 글내용, 글제목 등 작성하는 폼이 있는 화면을 말하는겁니다^^;;
        제말이 전달이 됬는지 모르겠네요~ 답변주셔서 감사해요

        • nanati 댓글:

          사이트에서 이용하시려는건가요?
          CMS를 이용중이시라면 게시판 플러그인을 설치하시면 되실 거구요 ^^
          웹사이트에서 이용하시려면 그누보드 같은 이미 만들어진 게시판 솔루션을 이용하시면 되겠습니다.
          게시판에 대한 자세한 내용은 https://sir.kr/main/g5/ 이 사이트에서 문의하세요^^

  2. 감사합니다감사합니다감사

  3. 뉴뉴뉴 댓글:

    감사합니다 참고해서 사용해볼까해요 ㅠㅠ 감사해요!!

  4. 냑쥐 댓글:

    잘보고 갑니다 !

  5. 너무 유용하게 잘봤습니다. 정보 많이 올려주세용…

  6. kimcs 댓글:

    도움이 많이 됬습니다. 감사합니다.

    • nanati 댓글:

      도움이 되셨다니 저도 기분이 좋습니다.
      기록해놓고 저 자신도 테이블 짤 때 마다 복붙합니다 호호홍~

  7. 잘보고갑니 댓글:

    잘보고 갑니다.