CSS로 table 예쁘게 꾸미기 개요
HTML만으로 만들면 못생기고 밋밋한 table을 CSS를 이용하여 좀 더 예쁘고 세련되게 꾸며보겠습니다.
아래 이미지는 샘플용으로 간단하게 만들어본 예시 이미지입니다.
이 글에서는 table을 꾸밀 수 있는 방법을 대표적으로 6가지 정도 소개해볼 테니 적절하게 섞어서 사용하시면 무수히 많은 table디자인이 나오게 될 것입니다.
CSS로 table을 꾸미는 6가지 방법
1. 테두리
border 속성은 기본적으로 상속되지 않습니다. 따라서 table, tr, th, td 중 어디에 테두리를 만들지 전략을 짜고 각 태그에 테두리를 달리 적용해보세요.
table 태그에 border-collapse: collapse 속성값을 추가해주는 것이 많은 도움이 될 수 있습니다.
이 속성은 각 셀마다 구분되는 경계선의 빈공간을 없애는 기능을 합니다. 이로 인해 공간 계산이 더욱 편리해집니다. 그리고 table 태그에 border-collapse: collapse 속성 값이 있어야 tr, th태그의 border 속성 디자인이 제대로 적용되기 때문에 tr, th태그에 border속성이 있다면 이렇게 하는 것은 선택이 아니라 필수가 됩니다. 하지만 디자인적인 이유로 인해 이 속성을 사용하지 않을 수도 있습니다. 정답은 없습니다.
table { border-collapse: collapse; }
만약 예를 들어 tr 태그의 위아래로 경계선을 넣으려면 border-top과 border-bottom 속성을 사용해주면 됩니다. 선의 굵기, 선의 종류, 선의 색상을 각각 속성값으로 순서대로 넣어주면 됩니다.
tr { border-top: 1px solid black; border-bottom: 1px solid black; }
2. 배경색
background-color 속성을 이용합니다. 원하는 color의 rgb값이나 16진수 컬러코드값을 알아낸 후 적용해주면 됩니다.
예를 들어 table의 각 행마다 교차로 색상이 바뀌게 만들어주고 싶으면 홀수 행과 짝수 행을 각각 따로 선택하는 가상선택자를 사용하면 됩니다. tr태그에 :nth-child(odd)와 :nth-child(even) 가상 선택자를 추가하여 서로 다른 color값을 넣어주면 각 행의 색을 교대로 다르게 만들어줄 수 있습니다.
* 예시코드 - tr 태그에 색상 교대로 넣기
tr:nth-child(odd) { background-color: #e6f1ff; }
tr:nth-child(even) { background-color: #f0f7ff; }
3. 마우스 커서가 셀 위에 올라가 있을 때 셀의 색상이나 커서의 모양을 바꾸기
:hover 가상 선택자를 추가해주면 됩니다. 마우스 오버 상태에서의 color가 기존의 table의 background-color와 함께 시각적으로 잘 어울리게끔 만들어줘야 합니다. 마우스 커서의 모양을 바꾸는 것은 cursor 속성을 사용해주면 됩니다.
* 예시코드 - 마우스 오버 시 색상 바꾸고, 커서 모양 손가락으로 바꾸기
tr:hover { background-color: #ffc5c2; cursor: pointer; }
4. 폰트 크기 조절 및 테두리와 텍스트간의 간격 조절
font-size속성으로 폰트크기를 조절해주고, 테두리와 텍스트 간의 간격 조절을 위해 padding속성을 td selector에 추가하여 여백의 미를 만들어줍니다. 이때 padding값으로 인해 커지는 table의 부피로 인해 레이아웃이 깨지지 않는지 주의해주는 것이 좋습니다.
td { padding: 5px; }
5. 테두리 둥글게 만들기
표의 겉 테두리를 둥글게 만들어주기 위해서 table태그를 div태그로 감쌀 것입니다. table태그에 직접 둥근 테두리를 적용시키는 것이 매우 번거롭기 때문이죠. div태그의 background-color와 border, border-radius 속성 값을 적절히 설정해주면 다음과 같은 박스가 생길 것입니다.
여기에 box-shadow 속성까지 더해주면 좀더 선명한 테두리를 만들 수 있습니다. box-shadow는 box element에 그림자를 입혀주는 속성입니다. 첫 번째 속성 값으로 inset을 넣어주면 박스의 바깥쪽이 아니라 안쪽으로 그림자가 생깁니다.
div {
border: 1px solid #ffebb5;
background-color: #ffebb5;
border-radius: 16px;
box-shadow: inset 0 0 8px #deb13a;
width: 160px; height: 160px;
}
6. 그림자 넣기
위에서 한 것처럼 box-shadow 속성을 사용합니다. inset을 사용해서 셀 안쪽에 그림자를 만들어도 되고, default 설정인 셀 바깥쪽에 그림자를 만들어도 됩니다.
마무리
테이블을 디자인할 수 있는 방법은 무수히 많습니다. 위의 6가지 방법만 잘 조합해도 무수히 많은 디자인이 나옵니다. 그런데 사실 table태그는 사용하려면 depth도 깊고 디자인을 하기 까다로운 부분들이 있어서 디자인을 위해서는 div태그를 많이들 사용합니다. div태그로 표를 만드는 작업은 귀찮다고 느낄 수도 있지만 확실히 디자인의 자유도는 table을 사용할 때보다 높아질 것입니다. 따라서 table을 디자인하는 것에 불편함이 크다면 table태그를 제거하고 div태그로 디자인하는 방법도 있습니다. 다만, 이렇게 하는 방법은 '시맨틱'하지 않다는 점은 감안해야 합니다.
최근댓글