General good table example

Tables are widely used to display tabular data, be it complex or simple. HTML provides for accessibility, so cleanly laid out and marked up tables are already fully accessible all by themselves.

The following example provides a very basic table: both the first row and first column are made up of header cells (<th>), while the respective data columns are made up of data cells (<td>). A <caption> adds a useful description to the table.

Generally good table

Show HTML code

Show CSS code

+ ✔ (pass) , + ✔ (pass) , + ✔ (pass) , + ✔ (pass) , + ✔ (pass) , + ✔ (pass)

<p>
  For more information about my hobbies, please take a look at the following table.
</p>
<table>
  <caption>My Hobbies</caption>
  <thead>
    <tr>
      <th>
        Name
      </th>
      <th>
        Description
      </th>
      <th>
        Additional Resources
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        Playing Soccer
      </th>
      <td>
        Soccer is a team sport played between two teams of eleven players with a spherical ball.
      </td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Association_football">Wikipedia</a>
      </td>
    </tr>
    <tr>
      <th>
        Dancing
      </th>
      <td>
        Dance is a performing art form consisting of purposefully selected sequences of human movement.
      </td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Dance">Wikipedia</a>
      </td>
    </tr>
    <tr>
      <th>
        Gardening
      </th>
      <td>
        Gardening is the practice of growing and cultivating plants as part of horticulture.
      </td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Gardening">Wikipedia</a>
      </td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid;
  padding: 4px 8px;
}

th {
  text-align: left;
}

Category	Result	Comments	Date
Keyboard only	✔ (pass) pass	-	2018-4-17
NVDA 2023.1 + FF 115	✔ (pass) pass	-	2023-8-3
NVDA 2021.2 + Chrome	✔ (pass) pass	-	2021-2-10
NVDA 2023.1 + Edge	✔ (pass) pass	-	2023-7-13
JAWS 2018.3 + FF ESR 52.7.3	✔ (pass) pass	-	2018-4-17
JAWS 2021.2 + Chrome	✔ (pass) pass	-	2021-2-10
JAWS 2023.1 + Edge	✔ (pass) pass	-	2023-7-13

Navigate the example using table navigation and notice how the screen reader announces the current data cell's corresponding header cells:

• If you navigate horizontally (using Ctrl + Alt + Left/Right), in addition to the current cell's content, the screen reader also announces the current column's header cell.
• If you navigate vertically (using Ctrl + Alt + Up/Down), the screen reader announces the current row's header cell.

This provides all information needed to browse a table efficiently using a screen reader: you always know the current data cell's context, similar to a visual user. Easy and effective.

Thead, tbody, tfoot?

It is recommended to use <thead> for the table's header, <tbody> for its data, and <tfoot> for its footer (if applicable, for example when having a final row summing up the presented data). If you do not provide those, the browser will add at least a <tbody> itself.