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

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

예전 글(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.