표(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><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>

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을 이용해야합니다. 이렇게 구획을 나눠놓으면 스타일을 하기가 더 쉽습니다.

<table>
    <thead>
      <tr>
        <th scope="col">품목</th>
        <th scope="col">지출</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">대파</th>
        <td>3,000</td>
      </tr>
      <tr>
        <th scope="row">달걀</th>
        <td>4,000</td>
      </tr>
      <tr>
        <th scope="row">고양이간식</th>
        <td>12,000</td>
      </tr>
      <tr>
        <th scope="row">종이봉투</th>
        <td>300</td>
      </tr>
    </tbody>
    <tfood>
      <tr>
        <th scope="row">Totals</th>
        <td>33,300</td>
      </tr>
    </tfood>
  </table>

4. <Caption> : 표 설명요소

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

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