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. 강영임 댓글:

    언제나 네이버에 뭔가를 질문하면 나나티님의 홈피에서 답을 주시네요.
    웹디자인을 하긴하지만 뒤돌아서면 까먹는 저에게 항상 도움이 됩니다.
    몇번을 왔다갔다 하면서 도움을 얻었지만 이제야 감사의 글을 남깁니다.
    정말로 감사드려요. 일본에 계신걸로 나오는데…
    항상 건강하시고 행복하세요. ^^

    • nanati 댓글:

      강영임님, 방문에 힘주시는 댓글까지 감사합니다^^
      요즘 제가 먹고 살기 바빠(?!) 블로그는 거의 방치수준인데,
      그래도 방문해주시고, 참고가 된다고 해주시니 기쁘네요~
      더 많은 자료 공유할 수 있도록 노력해보겠습니다!
      감사합니다~ 또 오세요^^

  2. 호랑이 댓글:

    불편을 드려 죄송합니다.
    일부러 수정 안하고 전부 긁은 것입니다. 나나티님 원본 그대로 보이려고요.

    조치 하였습니다.
    좋은 하루 되세요~

    • nanati 댓글:

      일부분 발췌하여 글을 쓰시면 문제는 없지만
      모든 내용을 전부 복사하시는 것은
      제가 고생해서 쓴 내용들을 가볍게 여기시는 것 같아 슬퍼집니다.
      피드백 바로 주셔서 감사합니다^^

  3. stranger 댓글:

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

    • nanati 댓글:

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

      • stranger 댓글:

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

        • nanati 댓글:

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

  4. 감사합니다감사합니다감사

  5. 뉴뉴뉴 댓글:

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

  6. 냑쥐 댓글:

    잘보고 갑니다 !

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

  8. kimcs 댓글:

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

    • nanati 댓글:

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

  9. 잘보고갑니 댓글:

    잘보고 갑니다.