표(Table)

이전까지 배운 목록들은 단순히 아이템을 나열하는 형태이었다면, table의 경우 조금 더 복잡한 형태의 데이터를 행렬의 모양으로 나타날 수 있습니다.

1. Table이란?

예전에는 레이아웃을 잡기 위해서 table태그를 사용했습니다만, 지금은 시멘틱태그 및 css를 통해 배치를 잡을 수 있기에 table을 가지고 레이아웃을 만드는 것은 지양합니다.

tr(table row)은 행을, 열은 td(table data)로 나타내며 th(table head)를 이용해 테이블 셀 그룹의 헤더로 정의할 수 있습니다. 또한 th의 속성인 scope를 통해 그룹의 정확한 속성(row대표, colum대표)를 나타낼 수 있습니다.

  <table>
    <tr>
      <th scope="col">나라이름</th>
      <th scope="col">수도</th>
      <th scope="col">인구</th>
    </tr>

    <tr>
      <th scope="row">한국</th>
      <td>서울</td>
      <td>5100만</td>
    </tr>

    <tr>
      <th scope="row">미국</th>
      <td>워싱턴 D.C</td>
      <td>3억</td>
    </tr>

    <tr>
      <th scope="row">태국</th>
      <td>방콕</td>
      <td>6900만</td>
    </tr>

  </table>

<tr>
  <th scope="row">한국</th>
  <td>서울</td>
  <td>5100만</td>
</tr>

<tr>
  <th scope="row">미국</th>
  <td>워싱턴 D.C</td>
  <td>3억</td>
</tr>

<tr>
  <th scope="row">태국</th>
  <td>방콕</td>
  <td>6900만</td>
</tr>

나라이름	수도	인구

2. colspan속성

만약, 행을 합쳐서 사용하고 싶다면 colspan="" 속성을 이용할 수 있습니다.

...
    <tr>
      <td colspan="2">합계</td>
      <td>4억 2000만</td>
    </tr>

<tr>
  <th scope="row">한국</th>
  <td>서울</td>
  <td>5100만</td>
</tr>

<tr>
  <th scope="row">미국</th>
  <td>워싱턴 D.C</td>
  <td>3억</td>
</tr>

<tr>
  <th scope="row">태국</th>
  <td>방콕</td>
  <td>6900만</td>
</tr>
<tr>
  <td colspan="2">합계</td>
  <td>4억 2000만</td>
</tr>

나라이름	수도	인구

3. Table의 구획나누기

thead, tbody, tfoot을 이용해 table의 구획을 나눌 수 있습니다. 단, thead의 형재요소로 tr을 이용해서는 안되며 tbody나 tfoot을 이용해야합니다. 이렇게 구획을 나눠놓으면 스타일을 하기가 더 쉽습니다.

품목	지출
대파	3,000
달걀	4,000
고양이간식	12,000
종이봉투	300
Totals	33,300

4. <Caption> : 표 설명요소

표 전체를 아우르는 내용이나 부가적인 설명을 붙이고 싶은 경우 caption 요소를 사용할 수 있습니다.

이전에 비슷한 용도로 사용되는 <figcaption> 태그를 정리한 적이 있었습니다. <figcaption>의 경우 설명을 하는 대상이 되는 요소가 특정요소로 정해진 것이 아니며 이미지, 비디오, 텍스트 등 형식에 구애 없이 가능했습니다.

caption은 테이블 요소의 자식으로 사용하는 table을 설명하기 위해 만들어졌다는 점에서 차이점이 있습니다. 또한 caption은 table요소의 첫번째 자식으로 사용해야합니다. 만약 설명을 아래에 위치하게 하고 싶다면 html이 아닌 css를 이용해야합니다.