jiraynor’s 하루 2시간 프로그래밍 - HTML 15. 테이블 (Tables) 영상 보러가기

HTML 테이블

HTML 테이블 정의

HTML의 테이블은 행과 열 내부의 테이블 셀로 구성됩니다.

예제 1
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

테이블 셀

각 테이블 셀은 <td> 태그와 </td> 태그로 정의됩니다.

td는 테이블 데이터를 나타냅니다.

<td> 와 </td> 사이의 모든 내용은 테이블 셀의 내용입니다.

예제 2
<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

Note: 테이블 데이터 요소는 테이블의 데이터 컨테이너입니다. 텍스트, 이미지, 목록, 기타 테이블 등 모든 종류의 HTML 요소를 포함할 수 있습니다.

테이블 행

각 테이블 행은 <tr> 로 시작하여 </tr> 태그로 끝납니다.

tr 은 테이블 행을 나타냅니다.

예제 3
<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

표에 원하는 수의 행을 포함할 수 있습니다. 각 행의 셀 수가 동일한지 확인하십시오.

Note: 행에 셀이 다른 행보다 적거나 많을 수 있습니다. 그것에 대해서는 다음 장에서 배울 것이다.

테이블 머리글

셀을 헤더로 할 수 있습니다. 이 경우 <td> 태그 대신 <th> 태그를 사용합니다.

예제 4
<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

디폴트로는 <th> 요소의 텍스트는 굵은 글씨로 가운데에 표시됩니다만, CSS 를 사용해 변경할 수 있습니다.