Tables are a structured set of data that help people understand the relationships between different types of information.

Use the table element to describe tabular data. Do not use it to structure content on a page or inside a component.

Table headings

Use the <th> element for table headers (with appropriate scope attributes).

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Favorite color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>John</th>
      <td>32</td>
      <td>Blue</td>
    </tr>
    <tr>
      <th>Jane</th>
      <td>27</td>
      <td>Red</td>
    </tr>
  </tbody>
</table>

Scope

Depending on how complex your table is, you may also consider using scope="col" for column headers, and scope="row" for row headers. Many assistive technology use the scope attribute to help them understand and describe the structure of a table.

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
      <th scope="col">Favorite color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">John</th>
      <td>32</td>
      <td>Blue</td>
    </tr>
    <tr>
      <th scope="row">Jane</th>
      <td>27</td>
      <td>Red</td>
    </tr>
  </tbody>
</table>

Table caption

Use the <caption> element to provide a title for the table. The table's caption should describe what kind of information the table contains.

<table>
  <caption>A list of cat breeds</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Favorite color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>John</th>
      <td>32</td>
      <td>Blue</td>
    </tr>
    <tr>
      <th>Jane</th>
      <td>27</td>
      <td>Red</td>
    </tr>
  </tbody>
</table>