Lesson 11: Tables

Use HTML tables only to present structured data. If you just want to lay out content neatly on screen, do not use tables. Use CSS styling to design your page layouts instead.

We will cover the elements that structure a table and how to style them.

Table elements in order#

The <table> element wraps the data table. Inside, we group data using <thead>, <tbody>, and <tfoot> tags. These sections contain rows (<tr>) made of header cells (<th>) and data cells (<td>).

When building a table, place the tags in this order:

1. <caption> (the title of the table)
2. <colgroup> (used for grouping columns)
3. <thead> (header section)
4. <tbody> (main data section)
5. <tfoot> (footer or total section)

These child tags are optional, but using them is highly recommended. Let’s look at them in detail.

Table caption#

The <caption> tag provides a title for the table. It must be the very first child inside the <table> tag. Including a caption helps screen readers announce the table’s purpose to users.

You can use CSS to change where the caption displays (like moving it to the bottom of the table).

Keep your data tables simple. If a table is very complex, explain it in a paragraph before the table so users have context.

Data sectioning#

Dividing your table into <thead>, <tbody>, and <tfoot> sections helps you style them separately using CSS.

<table>
  <caption>
    MLW Students
  </caption>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

Table content#

Table rows (<tr>) contain header cells (<th>) or data cells (<td>). By default, browsers display header cells as bold and centered.

Always set cell padding and borders using CSS styles instead of old HTML attributes.

The <th> tag defines a header cell. Use the scope attribute to specify if the cell is a header for a column (scope="col") or a row (scope="row"). This helps screen readers read the data in the correct order.

<table>
  <caption>
    Graduation Year
  </caption>
  <thead>
    <tr>
      <th scope="col">Student</th>
      <th scope="col">Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Lou Minious</th>
      <td>1956</td>
    </tr>
  </tbody>
</table>

Merging cells#

You can merge cells horizontally (across columns) using the colspan attribute, or vertically (across rows) using the rowspan attribute.

<table>
  <thead>
    <tr>
      <th colspan="2">Merged Header</th>
    </tr>
  </thead>
</table>

Keep your tables as simple as possible. Simple layouts are much easier to design, maintain, and navigate using screen readers. If a table gets too complicated, try breaking it into multiple smaller tables.

Styling tables#

Use the <colgroup> tag and <col> children to define column groups. This lets you style entire columns (like giving them a background color) without styling each cell individually.

<table>
  <caption>
    Table Caption
  </caption>
  <colgroup>
    <col />
  </colgroup>
  <thead>
    ...
  </thead>
</table>

You can create alternating row colors (zebra stripes) using CSS.

Avoid changing how table tags behave using CSS, because that can stop screen readers from understanding that they are tables.

Presenting data#

Table elements have specific meanings that are used by screen readers to navigate data layouts. Never use tables for page layouts. Only use tables when presenting raw data.

Next, we will cover HTML forms.

Adapted from Learn HTML © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).