예전 글(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.
타이틀 백그라운드는 위 이미지를 이용했습니다. 실제 사용하실 때는 왼쪽 위 모서리에서부터 3×3로 잘라서 사용하세요.