표 만들기
표 요소는 구조상 행(row)과 열(column)로 이루어져 있고, 행과 열이 만나는 지점인 셀(cell)이 하나의 항목을 나타내는 역할을 합니다.
표(테이블)의 구조를 나타낸 이미지입니다.
목록과 마찬가지로, 표는 표를 나타내는 태그 안에 항목들을 채워 넣음으로써 완성할 수 있습니다. 다음은 표를 만들기 위해 사용하는 태그들입니다.
- <table> : 하나의 표를 나타내는 태그
- <tr> : 표 안에서 하나의 행을 나타내는 태그
- <th> : 행 안에서 제목에 해당하는 셀을 나타내는 태그
- <td> : 행 안에서 항목에 해당하는 셀을 나태는 태그
다음은 위 태그들을 사용해 기본적인 스타일의 표를 만든 예입니다.
<body>
<table border="1">
<tr>
<th>한국 선수</th>
<th>일본 선수</th>
<th>미국 선수</th>
</tr>
<tr>
<td>김철수</td>
<td>오오다</td>
<td>제임스</td>
</tr>
</table>
</body>
위 예제에서는 <table> 태그에 border 속성을 추가했습니다. 이 속성은 테두리의 두께를 입력하는 속성인데, border를 따로 지정하지 않을 경우 표는 테두리 없이 표시됩니다.
표에 제목(자막) 추가하기
위 예제의 표에는 따로 제목이 표기되지 않았습니다. 제목을 나타내는 <h> 태그를 사용해 표 요소의 위에 제목을 써 주어도 되겠지만, 코드 관리를 고려해 <caption> 태그나 <figure> 태그를 사용하는 방법도 추천할 만한 방법입니다.
제목(자막)을 추가하는 <caption>
<caption> 태그는 <table> 태그의 안 쪽에서 제목 또는 표에 대한 설명을 나타내는 역할을 할 수 있습니다. 이 태그의 콘텐츠는 표의 길이를 기준으로 가운데 정렬이 됩니다. <caption> 태그의 안에 다른 태그를 포함해 제목이나 설명글을 꾸밀 수도 있습니다. 다음 예는 앞서 살펴 본 예제에 <caption>을 추가한 예입니다.
<body>
<table border="1">
<caption>
<strong>국가대표 선수 명단</strong>
<br>
남자 마라톤
</caption>
<tr>
<th>한국 선수</th>
<th>일본 선수</th>
<th>미국 선수</th>
</tr>
<tr>
<td>김철수</td>
<td>오오다</td>
<td>제임스</td>
</tr>
</table>
</body>
독립적인 콘텐츠를 나타내는 <figure>
04-2절에서 학습한 <figure> 태그는 독립적인 콘텐츠를 나타낼 때 사용하는 태그이며, 그 안에서 자막을 담당하는 <figcaption> 태그와 함께 사용할 수 있었습니다. 표를 나타낼 때도 두 태그를 함께 사용할 수 있는데, <caption>을 사용할 때와 달리 가운데 정렬이 되지 않습니다.
<body>
<figure>
<figcaption>
<strong>국가대표 선수 명단</strong>
</figcaption>
<table border="1">
<tr>
<th>한국 선수</th>
<th>일본 선수</th>
<th>미국 선수</th>
</tr>
<tr>
<td>김철수</td>
<td>오오다</td>
<td>제임스</td>
</tr>
</table>
</figure>
</body>
<figure> 태그를 이용해 표시한 콘텐츠의 왼편에 여백이 생긴다는 점은 표를 나타낼 때도 마찬가지입니다.
표의 구조를 나타내는 태그들
표 안에서 실제 콘텐츠를 표시하는 개별 영역을 '셀'이라고 합니다. 사용자는 셀에 표시된 콘텐츠의 성격이나 표의 구조에 따라 여러 개의 셀을 묶어서 관리할 수도 있는데, 이를 위해서는 다음과 같은 태그들을 사용할 수 있습니다.
- <thead> : 표의 제목을 나타내는 영역
- <tbody> : 표의 본문을 나타내는 영역
- <tfoot> : 표의 요약 부분을 나타내는 영역
화면에 나타나는 결과만 놓고 봤을 때, 위 태그들을 사용했을 때와 하지 않았을 때의 차이는 존재하지 않습니다. 그러나 위 태그들을 사용하면 코드 상에서 표의 구조가 시각적으로 명확하게 드러나 코드 작성자의 코드 유지 및 보수가 편리해질수 있고, 더불어 웹 접근성을 향상시키는 데에도 도움이 됩니다.
'웹 접근성'이란 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹 사이트를 이용할 수 있음을 의미하는 용어인데, HTML 코드의 구조가 명확할수록 시각 장애를 가진 사람이 음성 낭독기 등으로 웹 사이트를 이용할 때의 사용성이 향상됩니다.
Copy<body>
<table border="1">
<thead>
<tr>
<th>한국 선수</th>
<th>일본 선수</th>
<th>미국 선수</th>
</tr>
</thead>
<tbody>
<tr>
<td>김철수</td>
<td>오오다</td>
<td>제임스</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>세계 랭킹 5위</td>
<td>세계 랭킹 8위</td>
<td>세계 랭킹 2위</td>
</tr>
</tfoot>
</table>
</body>