[HTML] table 만들기, thead, tfoot, tbody, scope, col, row, colspan, rowsp…

다양한 테이블 요소들을 적용해서 표를 만들어 보도록 하겠습니다.

사용되는 요소와 속성에는 caption, colgroup, rowgroup, summary, class, col, row, span, thead, tr, th, td, rowspan, colspan, scope, tfoot, tbody 등이 있습니다.

우선 결과물부터 보면 다음과 같습니다.

 

 

모양은 그다지 이쁘지 않지만 각 테이블 요소와 속성들이 어떻게 적용되어 사용될 수 있는지 살펴볼 수 있을 거에요.

위 결과물에 대한 소스는 아래와 같습니다.

 

<table class="testTable" summary="테이블 만들기 예제">

 

<caption>Caption</caption>

 

<colgroup>

<col width="30"/>

<col />

<col span="3" width="50" />

</colgroup>

 

<thead>

<tr>

<th rowspan="2" colspan="2" scope="col">01</th>

<th colspan="3" scope="colgroup">02</th>

</tr>

 

<tr>

<th scope="col">06</th>

<th scope="col">07</th>

<th scope="col">08</th>

</tr>

</thead>

 

<tfoot>

<tr>

<th colspan="2" scope="row">09</th>

<td>10</td>

<td>11</td>

<td>12</td>

</tr>

</tfoot>

 

<tbody>

<tr>

<th rowspan="3" scope="rowgroup">25</th>

<th scope="row">13</th>

<td>14</td>

<td>15</td>

<td>16</td>

</tr>

 

<tr>

<th scope="row">17</th>

<td>18</td>

<td>19</td>

<td>20</td>

</tr>

 

<tr>

<th scope="row">21</th>

<td>22</td>

<td>23</td>

<td>24</td>

</tr>

</tbody>

</table>

 

결과물로는 표시되지 않지만 웹 접근성을 위해 summary, scope 지정은 해주는 게 좋다고 하네요.