[CSS] 깔끔하고 세련된 테이블표(Table) 디자인 모음

Doyeon0430 | 2023년 07월 02일

이번시간에는 HTML과 CSS를 사용해서 만들어 본 테이블(Table) 디자인을 소개하겠습니다.

총 4가지 구성으로 준비해봤으며 기본 테이블에 몇가지 코드를 추가해 다양한 디자인을 적용해봤습니다.

일반적인 테이블 구조는 지루하고 밋밋할 수 있기에 css에 다양한 기능을 추가해 예쁘게 꾸며봤습니다.

Table 디자인 - 기본 테이블표
Table 디자인 - 그림자테두리 테이블표
Table 디자인 - 사이드경계선 제거 테이블표
Table 디자인 - 짝수 줄무늬 테이블표

1. Table 디자인 - 기본 테이블표

첫 번째는 가장 기본적인 테이블 구조입니다.

table에 너비는 500px로 가운데 정렬을 했고 컬럼의 비율은 15퍼 / 55퍼 / 30퍼로 설정했습니다.

hover를 통해 배경색과 폰트 강조를 넣어줬습니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/wvQdNNv"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

2. Table 디자인 - 그림자테두리 테이블표

두 번째는 테이블에 그림자 효과를 추가했습니다.

border-collapse을 사용해 경계선을 병합했습니다.

box-shadow로 외곽부분에 그림자를 설정한 코드입니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/dyQWamK"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

3. Table 디자인 - 사이드경계선 제거 테이블표

세 번째는 테이블 사이드에 선을 제거했습니다

border-left와 border-right를 사용해 양쪽 경계선을 삭제했습니다.

이럴경우 테이블에 단조로운 분위기를 줄 수 있습니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/eYQWxPv"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

4. Table 디자인 - 짝수 줄무늬 테이블표

네 번째는 짝수에 줄무늬 효과를 넣어 테이블을 만들었습니다.

tr:nth-child(even)을 사용하여 짝수 번호에 배경색을 넣어봤습니다.

가장 많이 사용하는 코드인만큼 홈페이지에 컬러스타일에 맞춰 색을 지정할 수 있습니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/ZEmKwme"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

댓글이 없습니다.

간편 댓글 작성