테이블이란?

테이블은 표 형태를 의미하는 거죠. 열과 행의 헤더들을 통해 데이터의 관계를 찾아 원하는 정보를 빠르게 찾을 수 있습니다.
테이블은 서로 중첩되어 사용할 수 있습니다.

<table>
  <caption>
    table example
  </caption>
  <colgroup>
    <col>
    <col>
    <col span="2" style="background-color: yellow">
  </colgroup>
  <thead>
    <tr>
      <th>column header1</th>
      <th>column header2</th>
      <th>column header3</th>
      <th>column header4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hi, I'm your first cell.</td>
      <td>I'm your second cell.</td>
      <td>I'm your third cell.</td>
      <td>I'm your fourth cell.</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>first cell.</td>
      <td>Cell 2</td>
      <td colspan="2">Cell 3</td>
    </tr>
  </tfoot>
</table>

웹접근성을 포함한 테이블

scope attribute

th 태그에 붙는 속성입니다.
이 헤더가 행의 대표인지, 열의 대표인지를 표시해줍니다.

<table>
  <thead>
    <tr>
      <th scope="col">Purchase</th>
      <th scope="col">Location</th>
      <th scope="col">Date</th>
      <th scope="col">Evaluation</th>
      <th scope="col">Cost (€)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Haircut</th>
      <td>Hairdresser</td>
      <td>12/09</td>
      <td>Great idea</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

id & headers

scope보다 더 상세하고 명확하게 표현할 때 사용합니다. 명확하고 확실하지만 마크업이 많이 들어갑니다..
th에 고유값을 부여하고 td에서 어떤 순서대로 th가 참조되었는지를 적어줍니다.

<table>
  <thead>
  <tr>
    <th id="purchase">Purchase</th>
    <th id="location">Location</th>
    <th id="date">Date</th>
    <th id="evaluation">Evaluation</th>
    <th id="cost">Cost (€)</th>
  </tr>
</thead>
  <tbody>
    <tr>
      <th id="haircut">Haircut</th>
      <td headers="location haircut">Hairdresser</td>
      <td headers="date haircut">12/09</td>
      <td headers="evaluation haircut">Great idea</td>
      <td headers="cost haircut">30</td>
    </tr>
  </tbody>
</table>