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

2017/5/24 디자인이야기

SHARE

예전 글(html/css로 만드는 table 디자인 샘플)에 추가로 html ⁄ css만으로 디자인한 table 샘플 세가지를 더 소개할게요^^

이번 편에서도 그냥 마구마구 ctl+c해서 ctl+v 하세요^^

테이블 샘플 코드

심플, 깔끔한 디자인

타이틀만을 살짝 강조해준 깔끔하고 심플한 테이블 디자인입니다.

See the Pen simple table by nanati (@nanati) on CodePen.

모노톤의 심플 디자인

모노톤의 심플한 테이블 디자인입니다. 이미지 패턴을 이용해서 타이틀 부분을 강조했습니다.

See the Pen monotone table by nanati (@nanati) on CodePen.

bg_monoton
타이틀 백그라운드는 위 이미지를 이용했습니다. 실제 사용하실 때는 왼쪽 위 모서리에서부터 3×3로 잘라서 사용하세요.

POP컬러의 디자인

POP적인 컬러를 이용한 테이블 디자인입니다. 잘못 사용하면 촌스러워 질지도… 써먹을 데가 있을런지는 모르겠네요 :->

See the Pen pop table by nanati (@nanati) on CodePen.

댓글

  1. wjchoi 댓글:
    2017년 8월 12일 10:10 오후

    잘 쓰겠습니다~

    응답
  2. 김승원 댓글:
    2016년 12월 27일 5:39 오후

    최고에용 !! 연습하기 너무 좋은것 같아요 많이올려주세용!

    응답
  3. 학생 댓글:
    2016년 11월 17일 1:37 오후

    프론트 엔드 개발자 꿈꾸는 학생인데 프로젝트 진행하면서 디자인 쪽으로 정말 도움 많이 받고 있어요 감사합니다 /ㅅ/

    응답
  4. 송영빈 댓글:
    2016년 11월 15일 10:53 오후

    감사합니다 잘쓸게요~~~

    응답