[웹표준 #4]테이블 태그의 활용법

웹 표준으로 넘어가면서 테이블 태그는 구닥다리이고 더 이상 사용하지 않는 것이 좋다는 이야기를 많이합니다. 

실제로 테이블로 굳이 사용하지 않아도 되는 것까지 테이블 태그를 쓰는 경우가 많았기 때문이라고 생각합니다. 

하지만 테이블 구조를 가지고 있는 경우에는 <div> 태그를 쓰는 것보다 <table> 태그를 그대로 사용하는 것이 훨씬 바람직합니다. 

즉, 달력, 차트, 스케줄, 통계와 같은 형식은 테이블을 쓰는 것이 좋겠지요. 

그러나 테이블 태그를 사용할 때는 좀 더 명확하게 하는 것이 필요합니다. 

오늘은 <table> 태그에 대해서 한번 정리해 보려고 합니다. 

<table> 태그의 올바른 사용

예제로 요즘 한참 인기몰이중인 프로야구의 팀 순위를 가지고 테이블을 만들어 보도록 하죠. 

프로야구 팀 순위

순위	팀	승-패-무	승률
1	SK	27-21-1	0.563
2	LG	26-23-1	0.531
2	넥센	26-23-1	0.531
4	롯데	25-23-2	0.521

소스를 보시죠. (너무 길어지니 4위까지만 표기했습니다. 다른 팀 팬들에게는 지송 ㅠㅠ)

<p>프로야구 팀 순위</p> <table border="1"> <tr> <td><b>순위</b></td> <td><b>팀</b></td> <td><b>승-패-무</b></td> <td><b>승률</b></td> </tr> <tr> <td>1</td> <td>SK</td> <td>27-21-1</td> <td>0.563</td> </tr> <tr> <td>2</td> <td>LG</td> <td>26-23-1</td> <td>0.531</td> </tr> <tr> <td>2</td> <td>넥센</td> <td>26-23-1</td> <td>0.531</td> </tr> <tr> <td>4</td> <td>롯데</td> <td>25-23-2</td> <td>0.521</td> </tr> </table>

일반적으로 사용하는 형태라고 보시면 됩니다. 

그렇다면 이 소스를 기반으로 웹 표준에 맞추어 변경해 보겠습니다. 

caption 활용

위의 예제에서는 <p> 태그를 통해서 제목을 표기했습니다. 

<table> 태그에는 제목을 표기할 수 있는 <caption> 태그를 사용할 수 있습니다. 

<caption>을 사용하면 대부분의 웹 브라우저는 테이블의 맨 위에 가운데 정렬해서 표시해 줍니다. 

또한, 해당 테이블의 제목으로 사람 뿐만 아니라 시스템도 쉽게 인식할 수 있겠죠. 

<table border="1"> <caption>프로야구 팀 순위</caption> <tr> <td><b>순위</b></td> <td><b>팀</b></td> <td><b>승-패-무</b></td> <td><b>승률</b></td> </tr> <tr> <td>1</td> <td>SK</td> <td>27-21-1</td> <td>0.563</td> </tr>

caption만 변경했는데 위에서 보여준 것과 조금 더 다르게 보이죠.. 

프로야구 팀 순위

순위	팀	승-패-무	승률
1	SK	27-21-1	0.563
2	LG	26-23-1	0.531
2	넥센	26-23-1	0.531
4	롯데	25-23-2	0.521

테이블 헤더 활용

테이블의 헤더를 표시하기 위해서 위의 예제처럼 <td><b>순위</b></td> 와 같이 사용할 수도 있지만

기본적으로 제공하는 <th> 즉, 테이블 헤더를 사용하는 것이 좋습니다. 

보여주는 방식은 웹 표준에서 계속 설명한 것처럼 css로 변경해 줄 수도 있겠죠. 

<table border="1"> <caption>프로야구 팀 순위</caption> <tr> <th>순위</th> <th>팀</th> <th>승-패-무</th> <th>승률</th> </tr> <tr> <td>1</td> <td>SK</td> <td>27-21-1</td> <td>0.563</td> </tr> </table>

프로야구 팀 순위

순위	팀	승-패-무	승률
1	SK	27-21-1	0.563
2	LG	26-23-1	0.531
2	넥센	26-23-1	0.531
4	롯데	25-23-2	0.521

<thead>, <tfoot>, <tbody> 활용

W3C의 HTML 스펙의 이 태그들에 대한 설명을 먼저 보시죠. 

Table rows may be grouped into a table head, table foot, and one or more table body sections, using the THEAD, TFOOT and TBODY elements, respectively. This division enables user agents to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data.

The table head and table foot should contain information about the table's columns. The table body should contain rows of table data.

When present, each THEAD, TFOOT, and TBODY contains a row group. Each row group must contain at least one row, defined by the TR element.

내용을 간단히 요약하면 <tr>로 감싼 테이블의 각 행들을 thead, tbody, tfoot로 감쌀 수 있다는 것입니다. 

내용이 긴 테이블을 인쇄할 때는 thead와 tfoot는 각 페이지마다 인쇄되도록 할 수 있다는 것이네요. 

또한 tbody가 길 경우, 본문만 스크롤하는 기능을 지원할 수도 있다고 되어 있네요. 

그리고 중요한 사항으로는 반드시 tbody 앞에 thead와 tfoot가 와야 한다는 것입니다. 

위 예제로 한번 적용해 보죠. 

<table border="1"> <caption>프로야구 팀 순위</caption> <thead> <tr> <th>순위</th> <th>팀</th> <th>승-패-무</th> <th>승률</th> </tr> </thead> <tfoot> <tr> <td colspan="4">2012년 6월 9일 기준</td> </tr> </tfoot> <tbody> <tr> <td>1</td> <td>SK</td> <td>27-21-1</td> <td>0.563</td> </tr> <tr> <td>2</td> <td>LG</td> <td>26-23-1</td> <td>0.531</td> </tr> <tr> <td>2</td> <td>넥센</td> <td>26-23-1</td> <td>0.531</td> </tr> <tr> <td>4</td> <td>롯데</td> <td>25-23-2</td> <td>0.521</td> </tr> </tbody> </table>

프로야구 팀 순위

순위	팀	승-패-무	승률
2012년 6월 9일 기준
1	SK	27-21-1	0.563
2	LG	26-23-1	0.531
2	넥센	26-23-1	0.531
4	롯데	25-23-2	0.521

CSS 적용

테이블 태그의 기본적으로 보여지는 테두리가 제일 보기 불편합니다. 

해당 부분부터 CSS로 변경해 보도록 하죠. 

table { border-top: 1px solid #999; border-left: 1px solid #999; } th, td { border-right: 1px solid #999; border-bottom: 1px solid #999; }

아래 가장 왼쪽 그림처럼 간격이 좀 보기 그렇죠..

이런 경우에 collapse 속성을 활용합니다.

table { border-top: 1px solid #999; border-left: 1px solid #999; border-collapse: collapse; } th, td { border-right: 1px solid #999; border-bottom: 1px solid #999; }

이어서 여백을 조금 줘보도록 하죠.. 

table { border-top: 1px solid #999; border-left: 1px solid #999; border-collapse: collapse; } th, td { padding: 10px; border-right: 1px solid #999; border-bottom: 1px solid #999; }

마지막으로 <caption>과 <th> 부분에 대한 수정을 조금 해보죠. 

table { border-top: 1px solid #999; border-left: 1px solid #999; border-collapse: collapse; } caption { color: #993333; padding-bottom: 6px; } th, td { padding: 10px; border-right: 1px solid #999; border-bottom: 1px solid #999; } th { background: #ccc; }

각 단계별로 실제 적용한 화면을 보면 다음과 같습니다.