[HTML] 표

HTML5 문서에 표를 만들 때는 <table> 태그를 사용한다. 표는 행과 열로 이루어지며 각각의 칸인 셀(cell)로 구성되는데, 표를 만들 때는 행을 먼저 만들고 원하는 만큼 열을 나눈다.

 

표를 만들 때 사용하는 태그

<table> ~ </table> : 표 전체

<tr> ~ </tr> : 행

<td> ~ </td> : 셀

<th> ~ </th> : 제목 셀

<table border="1">
      <tr>
        <th>이름</th>
        <th>점수</th>
      </tr>
      <tr>
        <td>유비</td>
        <td>90</td>
      </tr>
      <tr>
        <td>관우</td>
        <td>80</td>
      </tr>
      <tr>
        <td>장비</td>
        <td>70</td>
      </tr>
</table>

 

출력 결과

 

<table> 태그의 border 속성값을 0으로 하거나 사용하지 않으면 경계선 없이 표시할 수 있다.

 

<caption> 태그

표에 제목을 삽입할 때는 <caption> 태그를 사용한다.

<caption> 
        <p>삼국지 멤버들의 농구 점수 내기</p>
</caption>

 

출력 결과

 

colspan, rowspan

셀을 병합하여 표의 레이아웃을 변경할 때는 colspan, rowspan 속성을 사용한다. 이 두 속성은 반드시 <th> 태그와 <td> 태그 안에서만 사용해야 한다.

colspan : 셀을 가로로 병합한다.

rowspan : 셀을 세로로 병합한다.

<table border="1">
      <colgroup>
        <col style="width:100px;">
        <col style="width:300px;">
        <col style="width:100px;">
        <col style="width:300px;">
      </colgroup>
      <tr>
        <th>이름</th>
        <td></td>
        <th>연락처</th>
        <td></td>
      </tr>
      <tr>
        <th>주소</th>
        <td colspan="3"></td>
      </tr>
      <tr>
        <th>자기소개</th>
        <td colspan="3"></td>
      </tr>
 </table>

 

출력 결과

 

표 구조 정의하기

HTML5에서는 표와 관련된 시맨틱 태그로 <thead>, <tbody>, <tfoot> 태그를 제공한다. 이 태그들은 표의 머리말, 본문, 꼬리말 부분을 분류하는 역할을 한다.

<thead>
	<tr></tr>
</thead>
<tbody>
	<tr></tr>
</tbody>
<tfoot>
	<tr></tr>
</tfoot>