How to Use the table Element

The HTML table element represents data with meaningful row-and-column relationships, such as prices, schedules, and comparisons.

The answer first

Minimal example

<table>
  <caption>Opening hours this week</caption>
  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Hours</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Monday</th><td>9:00–18:00</td></tr>
    <tr><th scope="row">Tuesday</th><td>9:00–18:00</td></tr>
  </tbody>
</table>

caption explains what the table is about. The column headings use scope="col", while the row headings use scope="row".

Elements that make up a table

Common table-related elements

Element	Role	Use it for
caption	The table's purpose or title	The beginning of the table
thead	A group of heading rows	The table's heading section
tbody	The main body of the table	A group of data rows
tr	One row	A heading or data row
th	A heading cell	A column or row heading
td	A data cell	One piece of data

Describe heading relationships

Making text bold with CSS does not make it a heading cell for assistive technology. Use th, and in a simple table use scope to say whether the heading describes a column or a row.

For a table with several levels of headings or more complex relationships, first review the structure. If necessary, use explicit relationships with id and headers.

Make a table usable on small screens

Shrinking a table with many columns until the text is tiny makes it harder to read. Keep the relationships intact and let the table's container scroll horizontally when needed.

• Do not force every column into a narrow phone screen by making the text extremely small.
• Do not turn individual cells into unrelated cards if that hides their row and column relationships.
• Explain the table's purpose and units before the table, including when horizontal scrolling is needed.

Common mistakes

• Using table to lay out the page.
• Using td for a heading and relying only on CSS to make it bold.
• Listing numbers without explaining the table's purpose or units.
• Relying on the browser's visual presentation to communicate important data.

A little more detail

A table expresses relationships among rows, columns, and cells as HTML structure. CSS can change borders and colors, but the meaning belongs in elements such as caption, th, and td.

Check it in Atlas

For the HTML Standard's table model, complex header relationships, and the boundary where the HTML parser handles incomplete table markup, see the table element page in Yugien Atlas.