블로그에 유용한 태그 7 - CSS로 표 (table 태그) 꾸미기

2011. 4. 14. 02:52IT/Tistory Tips


이 글은 표 만들기에 관한 이전 글을 읽었다는 전제하에 작성되었습니다. 본문에 나오는 CSS 각 항목에 대한 설명은 이전 글을 참고하세요.

이전 글에서 table 태그로 표를 만드는 법, table 태그 속성 대신 CSS로 표 속성을 지정하는 방법에 대해 알아보았다. 이번엔 스타일을 적용해서 표 내용을 더 보기 쉽게 꾸며보자.

한눈에 알아보기 쉽고 외관상으로도 예쁜 표를 꾸미려면 CSS를 어떻게 작성해야 좋을까? 가장 간단한 방법은 배경색을 사용하는 것이다. 예를 들어 표의 홀수 행(tr class="odd")과 짝수 행을 다른 색으로 지정하면 색 차이 때문에 아래 줄 내용과 헷갈리지 않는다. 거기다가 지금 마우스 커서가 위치한 행에만 다른 색을 적용한다면 집중도를 더 높일 수 있다. 홀수 행과 짝수 행 색을 다르게 하려면 홀수 행에만 odd라는 class를 지정하고 전체 배경 색과 .odd 배경 색을 다르게 지정하면 된다. 또 마우스 커서가 위치한 행의 색을 바꾸려면 CSS 선택자(Selector)와 우선 순위에서 이야기한 가상 선택자 :hover를 사용한다. CSS 자체는 아주 간단하다. 이 두 가지를 표에 적용해보자.

<예제 1>

4.12 가계부
분류 날짜 내용 수입 지출 합계
일일 합계 235,670원 231,600원 4,070원
기타 4/12 이전 잔액 - 4/11에서 넘어옴 40,000원 40,000원
교통비 4/12 차비 - 지하철 + 버스 3,000원 37,000원
식비 4/12 산채 비빔밥 - 맛있는 식당 8,000원 29,000원
기타 4/12 복권 당첨 - 앗싸 로또! 45,670원 74,670원
유흥비 4/12 당구장 - 장전동 ○○ 당구장 16,000원 58,670원
지식/ 교양 4/12 소설책 구매 - 셜록 홈즈 Best 12,000원 46,670원
식비 4/12 콩 다방 커피 - 카페 모카 5,000원 41,670원
기타 4/12 출금 - 우리 은행 150,000원 191,670원
식비 4/12 스테이크 - ☆☆ 스테이크 99,000원 92,670원
유흥비 4/12 와인 바 - Robert Mondavi, Merlot 80,000원 12,670원
차비 4/12 택시비 - 와인바에서 우리 집까지 8,600원 4,070원

표 HTML
<table class="ex1">
<caption>4.12 가계부</caption>
<thead>
<tr>
<th scope="col">분류</th><th scope="col">날짜</th><th scope="col">내용</th>
<th scope="col">수입</th><th scope="col">지출</th><th scope="col">합계</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">일일 합계</th><td colspan="3">235,670원</td><td>231,600원</td><td>4,070원</td>
</tr>
</tfoot>
<tbody>
<tr class="odd">
<th scope="row">기타</th><td class="date1">4/12</td><td class="desc">이전 잔액 - 4/11에서 넘어옴</td>
<td>40,000원</td><td></td><td>40,000원</td>
</tr>
<tr>
<th scope="row">교통비</th><td class="date1">4/12</td><td class="desc">차비 - 지하철 + 버스</td>
<td></td><td>3,000원</td><td>37,000원</td>
</tr>
<tr class="odd">
<th scope="row">식비</th><td class="date1">4/12</td><td class="desc">산채 비빔밥 - 맛있는 식당</td>
<td></td><td>8,000원</td><td>29,000원</td>
</tr>
<tr>
<th scope="row">기타</th><td class="date1">4/12</td><td class="desc">복권 당첨 - 앗싸 로또!</td>
<td>45,670원</td><td></td><td>74,670원</td>
</tr>
<tr class="odd">
<th scope="row">유흥비</th><td class="date1">4/12</td><td class="desc">당구장 - 장전동 ○○ 당구장</td>
<td></td><td>16,000원</td><td>58,670원</td>
</tr>
<tr>
<th scope="row">지식/ 교양</th><td class="date1">4/12</td><td class="desc">소설책 구매 - 셜록 홈즈 Best</td>
<td></td><td>12,000원</td><td>46,670원</td>
</tr>
<tr class="odd">
<th scope="row">식비</th><td class="date1">4/12</td><td class="desc">콩 다방 커피 - 카페 모카</td>
<td></td><td>5,000원</td><td>41,670원</td>
</tr>
<tr>
<th scope="row">기타</th><td class="date1">4/12</td><td class="desc">출금 - 우리 은행</td>
<td>150,000원</td><td></td><td>191,670원</td>
</tr>
<tr class="odd">
<th scope="row">식비</th><td class="date1">4/12</td><td class="desc">스테이크 - ☆☆ 스테이크</td>
<td></td><td>99,000원</td><td>92,670원</td>
</tr>
<tr>
<th scope="row">유흥비</th><td class="date1">4/12</td><td class="desc">와인 바 - Robert Mondavi, Merlot</td>
<td></td><td>80,000원</td><td>12,670원</td>
</tr>
<tr class="odd">
<th scope="row">차비</th><td class="date1">4/12</td><td class="desc">택시비 - 와인바에서 우리 집까지</td>
<td></td><td>8,600원</td><td>4,070원</td>
</tr>
</tbody>
</table>
예제 1 CSS
table.ex1 {width:98%; margin:0 auto; text-align:right; border-collapse:collapse}
.ex1 th, .ex1 td {padding:5px 10px}
.ex1 caption {font-weight:700; font-size:20px; padding:5px; color:#1BA6B2; text-align:left; margin-bottom:5px}
.ex1 thead th {background:#ABC668; color:#fff; text-align:center; border-right:1px solid #fff}
.ex1 tbody th {text-align:left; width:12%}
.ex1 tbody td.date1 {text-align:center; width:8%}
.ex1 tbody td.desc {text-align:left; width:35%}
.ex1 tbody tr.odd {background:#f9f9f9}
.ex1 tbody tr.odd th {background:#f2f2f2}
.ex1 tbody tr:hover {background:#F3F5BB}
.ex1 tbody tr:hover th {background:#F2F684; color:#1BA6B2}
.ex1 tfoot tr {border-top:6px solid #E9F7F6; color:#1BA6B2}
.ex1 tfoot th {text-align:left; padding-left:10px}

예제 1은 table 태그의 모든 구성 요소를 갖춘 표다. 먼저 caption 요소로 '4.12 가계부'라고 표 전체 제목을 나타낸다. thead는 각 열의 속성을 표시한다. thead에 td scope="col"이라는 부분이 있는데 scope는 제목이 각 열의 제목인지 각 행의 제목인지를 표시한다. 위 표에서는 각 열 전체의 속성을 나타내므로 scope="col"이라고 지정했다. 표에 시각적으로 표시되는 부분은 아니고 시각장애인이 사용하는 Screen Reader에서 처리되는 부분이다. 사용하지 않아도 상관없다. tfoot은 표 맨 아래 '일일 합계' 부분을 표시한다.

tbody는 표의 본문이다. 실제 금액 사용 내역을 표시한다. 각 행(tr)에 제목(th)을 지정해서 사용 내역이 어떤 범주에 속하는지 표시했다. 또 각 행을 색으로 구분하기 위해 홀수 행은 odd라는 class를 지정했다.

이제 CSS 부분을 살펴보자. 먼저 table.ex1는 표 전체 너비, 표 정렬 상태(가운데), 표 내부의 글자 정렬 상태(오른쪽)를 지정한다. .ex1 th, .ex1 td는 표 내부 각 칸의 내부 여백(padding)을 지정한다. 상하 여백이 5px, 좌우 여백이 10px이다. table 태그의 cellpadding 속성과 같다. .ex1 caption은 표 전체 제목(4.12 가계부) 부분의 스타일이다. 순서대로 글자 크기, 두께, 내부 여백, 글자 색, 글자 정렬 상태, 외부 하단 여백을 나타낸다. .ex1 thead th는 thead 각 항목의 스타일이다. 배경색, 글자 색, 글자 정렬 상태(가운데), 오른쪽 테두리다. 테두리가 없는 표에선 thead 전체를 연두색으로 지정하면 각 칸이 구분되지 않으므로 오른쪽에 흰색 테두리(border-right)를 지정해서 각 칸을 구분되도록 했다.

다음은 표 본문이다. .ex1 tbody th에서는 tbody의 th(분류 부분 세로줄)에 글자 정렬(왼쪽), 칸 너비 스타일을 지정한다. .ex1 tbody td.date1은 날짜 부분 세로줄 스타일로 글자 정렬(가운데)과 칸 너비다. .ex1 tbody td.desc는 내용 부분 세로줄로 글자 정렬(왼쪽)과 칸 너비다.

.ex1 tbody tr.odd와 .ex1 tbody tr.odd th는 홀수 행(1, 3, 5, ... 번째 줄) 배경 색과 홀수 행 분류 열 배경 색이다. 전체를 옅은 회색으로 지정하고 왼쪽의 분류 열만 조금 진한 회색으로 지정했다. 홀수 행과 짝수 행의 색이 다르므로 각 행을 한눈에 구분할 수 있다.

.ex1 tbody tr:hover와 .ex1 tbody tr:hover th는 각 행에 마우스 커서를 올렸을 때 배경 색과 각 행에 마우스 커서를 올렸을 때 분류 열의 배경 색을 지정한 부분이다. tr:hover를 사용해서 각 행(tr)에 마우스 커서를 올렸을 때 배경 색이 바뀌도록 했다. 분류 열은 조금 더 진한 색으로 바뀐다.

이제 마지막 tfoot 부분이다. .ex1 tfoot tr은 '일일 합계' 행 전체 스타일로, 위 테두리와 글자 색이다. 행 위에 6px로 두껍게 테두리를 표시해서 표 본문과 표 꼬리 부분이 시각적으로 구분된다. .ex1 tfoot th는 '일일 합계' 칸 스타일로 글자 정렬(왼쪽)과 왼쪽 여백을 따로 지정한 부분이다.

표 모양을 구성하는 HTML은 조금 복잡해 보이지만, 실제 스타일을 적용하는 CSS는 생각보다 간단하다.

이번엔 같은 표를 블록 형식으로 표시해보자. 블로그에 유용한 태그 5 - table 태그에 스타일 적용하기에서 border-collapse 속성은 collapse로 더 많이 사용한다는 이야기를 했는데 separate로 지정했을 때 각 칸에 색을 지정하고 테두리를 없애면 블록 형식의 표를 구성할 수 있다. 나머지 설정 대부분은 예제 1과 비슷하다.

<예제 2>

4.12 가계부
분류 날짜 내용 수입 지출 합계
일일 합계 235,670원 231,600원 4,070원
기타 4/12 이전 잔액 - 4/11에서 넘어옴 40,000원 40,000원
교통비 4/12 차비 - 지하철 + 버스 3,000원 37,000원
식비 4/12 산채 비빔밥 - 맛있는 식당 8,000원 29,000원
기타 4/12 복권 당첨 - 앗싸 로또! 45,670원 74,670원
유흥비 4/12 당구장 - 장전동 ○○ 당구장 16,000원 58,670원
지식/ 교양 4/12 소설책 구매 - 셜록 홈즈 Best 12,000원 46,670원
식비 4/12 콩 다방 커피 - 카페 모카 5,000원 41,670원
기타 4/12 출금 - 우리 은행 150,000원 191,670원
식비 4/12 스테이크 - ☆☆ 스테이크 99,000원 92,670원
유흥비 4/12 와인 바 - Robert Mondavi, Merlot 80,000원 12,670원
차비 4/12 택시비 - 와인바에서 우리 집까지 8,600원 4,070원

예제 2 CSS
table.ex2{width:98%;margin:0 auto;text-align:right;color:#4F6480;border-collapse:separate;border-bottom:3px solid #8cb0c8}
.ex2 td,.ex2 th {padding:9px}
.ex2 caption {font-weight:400;font-style:italic;font-size:20px;padding:5px 5px 12px;text-align:left;border-bottom:3px solid #8cb0c8}
.ex2 thead th {text-align:center;padding:8px 5px 3px}
.ex2 tbody th{color:#0096BD;text-align:left}
table.ex2 tbody tr:hover th{color:#2EB785}
.ex2 tbody td.date1{text-align:center}
.ex2 tbody td.desc{text-align:left}
.ex2 tbody td,.ex2 tbody th{background:#ADBBCA;border-bottom:2px solid #5E7796;border-top:3px solid #FFF}
.ex2 tbody tr.odd th,.ex2 tbody tr.odd td{background:#C4CFDB;border-bottom:2px solid #8CB0C8}
.ex2 tbody tr:hover td,.ex2 tbody tr:hover th{background:#BAE899;color:#39780C;border-bottom:2px solid #67BD2A}
.ex2 tbody tr.odd:hover th,.ex2 tbody tr.odd:hover td{border-bottom:2px solid #96CD6F}
.ex2 tfoot th{text-align:left}

예제 2 역시 많은 부분 예제 1과 비슷하다. 단지 배경색 및 글자 색, border-collapse 속성값, 내부/ 외부 여백 등에 차이가 있을 뿐이다. table.ex2에서 너비, 표 가운데 정렬, 글자 정렬(오른쪽), border-collapse, 표 아래 테두리 스타일을 지정했다. border-collapse:separate 속성을 지정했으므로 칸 사이에 공간이 생긴다. border-collapse: separate 속성을 지정한 표에서는 tr 요소에 배경색이나 border를 지정할 수 없으니 td나 th에 지정해야 한다. .ex2 td,.ex2 th에선 각 칸 내부 여백을 지정했다. .ex2 caption은 '4.12 가계부' 부분 스타일로 글자 두께, 기울임, 크기, 내부 여백, 글자 정렬(왼쪽), 글자 아래 테두리를 지정했다. .ex head th는 표 각 열 제목 스타일로 글자 정렬(가운데), 내부 여백을 지정했다.

.ex2 tbody th는 표 본문 가장 왼쪽 열, 즉, 각 행 제목 스타일이다. 글자 색과 글자 정렬(왼쪽)을 지정했다. table.ex2 tbody tr:hover th는 각 행에 마우스 커서를 올렸을 때 바뀔 글자 색이다. 아래의 .ex2 tbody tr:hover th와 글자 색 지정이 겹치므로 선택자 우선순위를 높이기 위해 class 앞에 table을 추가했다. .ex2 tbody td.date1과 .ex2 tbody td.desc는 각각 날짜, 내용의 글자 정렬 스타일을 지정한 부분이다.

.ex2 tbody td, .ex2 tbody th는 표 본문의 각 칸 스타일이다. 배경색, 칸 아래 테두리, 칸 위 테두리를 지정했다. 칸 위 테두리를 흰색으로 지정해서 각 행 간격이 넓어 보이도록 했다. .ex2 tbody tr.odd th,.ex2 tbody tr.odd td는 표 본문 홀수 행의 칸 스타일이다. 표 본문 전체 td, th와 다른 배경색과 칸 아래 테두리 색을 지정해서 홀수 행, 짝수 행이 쉽게 구분되도록 했다.

.ex2 tbody tr:hover td,.ex2 tbody tr:hover th는 표 본문 각 행에 마우스 커서를 올렸을 때 바뀔 배경색, 글자 색, 칸 아래 테두리 색을 지정한 부분이다. .ex2 tbody tr.odd:hover th,.ex2 tbody tr.odd:hover td는 홀수 행에 마우스 커서를 올렸을 때 바뀔 칸 아래 테두리 색이다. 마지막 .ex2 tfoot th는 표 맨 아래 '일일 합계' 부분의 글자 정렬(왼쪽) 스타일을 지정한 부분이다.

예제 2 역시 CSS 자체가 그리 복잡하진 않다. 예제 1, 2의 포인트는 class="odd"를 사용해서 홀수 짝수 행 색을 다르게 지정하는 것, tr:hover 선택자로 표에 마우스 커서를 올렸을 때 선택된 행을 다른 색으로 표시하는 것 두 가지다. 사용자가 원하는 배경색, 글자 색을 지정하고 td, th의 border 스타일을 조정하는 것만으로도 표에 시각적인 변화를 줄 수 있다.