Skip to content

Tables

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 you need to display data in rows and columns? Use the <table> element.

Table headings

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

Depending on how complex your table is, you may also consider using scope="col" for column headers, and scope="row" for row headers. Many different kinds of assistive technology still use the scope attribute to help them understand and describe the structure of a 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.

Example of a basic table

html
<table>
  <caption>Monthly savings</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$150</td>
    </tr>
  </tbody>
</table>