Point: 절대 레이아웃용으로 사용하지 않는다. <table> 태그는 표를 위한 태그이다.
| Name | Mobile Number |
|---|---|
| Mint | 010-000-0000 |
| 010-111-1111 |
<table class="sampleTable">
<caption>Names and Mobile Number</caption>
<colgroup>
<col style="width:200px">
<col style="width:auto">
</colgroup>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Mobile Number</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Mint</td>
<td>010-000-0000</td>
</tr>
<tr>
<td>010-111-1111</td>
</tr>
</tbody>
</table>1. <caption></caption>
<caption>Names and Mobile Number</caption>표의 설명이나 제목이 들어가는 부분으로, 주로 웹접근성을 위해 설명 문구를 적지만, 화면상엔 비 노출한다. 여기서 비노출이란, 'display:none', 또는 'font-size:0'을 의미하지 않는다(css는 다음 글에서). 위치는 <table>의 첫 번째 자식, 즉 최상단에 위치해야 한다.
간혹 <caption>과 summary를 같이 사용한 케이스를 보는데, 이는 옳은 방법이 아니다. 우선 summary는 HTML5 웹표준에서 빠진 속성이며, 그를 무시하더라도 설명을 이중 기입한 것이 되기 때문이다.
2. <colgroup>, <col>
<colgroup>
<col style="width:200px">
<col style="width:auto">
</colgroup>주로 <th>, <td>의 넓이 지정을 위해 사용하며, <caption> 다음에 위치한다. 웹접근성을 고려하지 않을 땐 <caption> 대신 최상위에 위치한다.
<colgroup>
<col width="200px">
<col width="auto">
</colgroup>위와 같이 col에 직접 width를 지정할 수도 있으나, HTML5에서는 빠진 속성으로 지양해야 한다. 하지만 워낙 많이 사용되고 있어서, 설명을 붙인다. <colgroup> 내에 <col width="auto"> 하나만 있다면, 테이블 모든 요소의 넓이를 별도의 넓이 지정 없이 각 요소 내용에 맞춰 넓이를 조정하겠다는 것이고, 위와 같은 경우는, 해당 요소의 넓이를 <table> 영역에서 200px를 뺀 만큼으로 지정하겠다는 의미이다.
3. <thead>, <tfoot>, <tbody>
<thead>
<!-- 표의 제목 셀 그룹 -->
</thead>
<tfoot>
<!-- 표의 footer(합계와 같은 결과 요소) 셀 그룹 -->
</tfoot>
<tbody>
<!-- 표의 본문 셀 그룹 -->
</tbody>
행 그룹을 지정하는 태그로, 순서는 위와 같이 <thead>, <tfoot>, <tbody> 순으로 삽입해야 한다. 꼭 모두가 들어가야 하는 것은 아니고, <tbody>를 베이스로, 별도로 header로 지정하고 싶다면 <thead>에, footer로 지정하고 싶다면 <tfoot>에 행을 빼 위치에 맞게 추가삽입하면 된다.
4. <tr>, <th scope="scope-value">, <td>
<tr>
<th scope="row">name</td>
<td>Mint</td>
</tr><th>, <td>는 항상 <tr>로 감싸져야하며, <tr>은 행, <th>은 제목 셀, <td>는 내용 셀을 의미한다.
5. scope
<th scope="col">Name</th><th>가 어느 <td>의 항목(제목) 셀인지 알려주는 속성으로 <th scope="col">은 세로방향의 항목일 때, <th scope="row">은 가로방향의 항목일 때 사용한다. 단순히 세로/가로 방향으로 표현 안 되는 경우, id, headers 속성을 이용하면 되는데, 필자의 경험상, HTML 화면에서 복잡한 표를 그리는 일이 거의 없었기 때문에, 설명을 더하진 않겠다.
6. colspan / rowspan
<td rowspan="5">Mint</td><tr>
<td rowspan="2">Mint</td>
<td>010-000-0000</td>
</tr>
<tr>
<!-- <td>Mint</td> -->
<td>010-000-0000</td>
</tr>셀병합을 위한 속성으로, rowspan은 세로로 나란히 있는 셀들의 병합을, colspan은 가로로 나란히 있는 셀들의 병합을 의미한다. 주의해야 할 점은, 셀 병합할 때, 병합되는 요소의 영역은 비워줘야 한다. 위의 예로 보면, 첫 번째 <td>에서 rowspan="2"로 세로로 나란한 셀을 병합하였다. 이에 바로 아래 행(<tr>)에 위치한 첫번째 <td>를 삭제하여 자리를 비워줬다.
댓글