<table>

HTML <table> 요소는 행과 열로 이루어진 표를 나타냅니다.

시도해보기

콘텐츠 카테고리	플로우 콘텐츠.
가능한 콘텐츠	순서대로, 선택적인 `<caption>` 요소 0개 이상의 `<colgroup>` 요소 선택적인 `<thead>` 요소 다음 중 하나 0개 이상의 `<tbody>` 요소 0개 이상의 `<tr>` 요소 선택적인 `<tfoot>` 요소
태그 생략	불가능, 시작과 끝에 태그를 추가하는것은 필수입니다.
가능한 부모 요소	플로우 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할	모두
DOM 인터페이스	`HTMLTableElement`

예제

간단한 표

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

추가 예제

<p>Simple table with header</p>
<table>
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<p>Table with thead, tfoot, and tbody</p>
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
</table>

<p>Table with colgroup</p>
<table>
  <colgroup span="4" class="columns"></colgroup>
  <tr>
    <th>Countries</th>
    <th>Capitals</th>
    <th>Population</th>
    <th>Language</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington D.C.</td>
    <td>309 million</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Sweden</td>
    <td>Stockholm</td>
    <td>9 million</td>
    <td>Swedish</td>
  </tr>
</table>

<p>Table with colgroup and col</p>
<table>
  <colgroup>
    <col class="column1">
    <col class="columns2plus3" span="2">
  </colgroup>
  <tr>
    <th>Lime</th>
    <th>Lemon</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>

<p>Simple table with caption</p>
<table>
  <caption>Awesome caption</caption>
  <tr>
    <td>Awesome data</td>
  </tr>
</table>

table
{
border-collapse: collapse;
border-spacing: 0px;
}
table, th, td
{
padding: 5px;
border: 1px solid black;
}

접근성 고려사항

설명문

표의 목적에 대한 명확하고 상세한 설명을 포함하는 <caption> 요소를 제공하여 사용자가 표 콘텐츠를 확인할지, 넘어갈지 결정할 때 도움을 줄 수 있습니다.

특히 스크린 리더 등 보조 기술 사용자와 낮은 시력의 사용자, 그리고 인지능력의 저하를 겪고 있는 사용자에게 도움이 됩니다.

행과 열 범위 지정

간단한 표의 경우 범위를 자동으로 유추할 수 있기 때문에, 헤더 요소의 scope 특성은 불필요합니다. 그러나 일부 보조 기술이 잘못된 범위를 유추하는 경우도 있기 때문에, 범위를 지정하는 것이 사용자 경험에 도움이 될 수도 있습니다. 복잡한 표에서는 범위를 명시해서 특정 헤더와 연관된 칸에 대한 정보를 제공할 수 있습니다.

예제

<table>
  <caption>Color names and values</caption>
  <tbody>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">HEX</th>
      <th scope="col">HSLa</th>
      <th scope="col">RGBa</th>
    </tr>
    <tr>
      <th scope="row">Teal</th>
      <td><code>#51F6F6</code></td>
      <td><code>hsla(180, 90%, 64%, 1)</code></td>
      <td><code>rgba(81, 246, 246, 1)</code></td>
    </tr>
    <tr>
      <th scope="row">Goldenrod</th>
      <td><code>#F6BC57</code></td>
      <td><code>hsla(38, 90%, 65%, 1)</code></td>
      <td><code>rgba(246, 188, 87, 1)</code></td>
    </tr>
  </tbody>
</table>

<th> 요소에 scope="col"을 선언함으로써, 해당 칸이 열의 맨 위에 위치함을 설명할 수 있습니다. 마찬가지로, scope="row"를 추가하면 해당 칸이 행의 맨 앞에 위치함을 설명합니다.

복잡한 표

너무나 복잡해서 헤더 칸을 확실히 가로 또는 세로로 연결할 수 없는 표의 경우, 스크린 리더와 같은 보조 기술이 분석할 때 어려움을 겪을 수 있습니다. 보통 colspan과 {htmlattrxref("rowspan", "td")}} 특성이 존재하는 경우 이 정도로 복잡한 표라고 할 수 있습니다.

이상적으로 보자면, 테이블의 콘텐츠를 나타내는 다른 방법을 생각하는 것이 좋습니다. 이를테면 서로 관련된 더 작은 표로 나눠서 colspan, rowspan 특성의 필요를 제거하는 것입니다. 보조 기술 사용자의 테이블 콘텐츠 이해에 도움을 줄 뿐 아니라, 인지력 문제를 겪고 있어 기존 표의 레이아웃을 이해하는 것이 곤란한 사용자의 경험도 개선할 수 있습니다.

표를 나눌 수 없는 경우 id와 headers 특성을 통해 표의 각 칸을 연관된 헤더 칸과 직접 연결하세요.

명세

Specification
HTML Standard # the-table-element

브라우저 호환성

BCD tables only load in the browser

같이 보기

<table> 요소 스타일링에 특히 도움이 되는 CSS 속성
- 표의 너비를 조절하는 width.
- 표의 테두리를 설정하는 border, border-style, border-color, border-width, border-collapse, border-spacing.
- 각 칸의 콘텐츠를 꾸밀 때 사용할 수 있는 margin, padding.
- 각 칸의 텍스트와 콘텐츠를 정렬할 때 사용하는 text-align, vertical-align.