Data tables

Tables are specifically for tabular data. Tables are complex layouts; however, utilizing the proper code will dramatically improve navigation.

The table caption acts as a title for the table. Avoid using the summary attribute, which is deprecated.

The code is based on Adrien Roselli’s responsive table code as well as Mozilla’s rowgroup role best practices.

Example table with column and row headings.

Books Read in 2019
Title Author Page count
Don Quixote Miguel de Cervantes 1023 pages
Moby Dick Herman Melville 720 pages

<style>
 #table-1 tbody td:nth-of-type(1)::before {content: "Author: ";}
 #table-1 tbody td:nth-of-type(2)::before {content: "Page count: ";}
</style>
<table id="table-1">
 <caption>Books Read in 2019</caption>
 <thead>
  <tr>
    <th scope="col" tabindex="0">Title</th>
    <th scope="col" tabindex="0">Author</th>
    <th scope="col" tabindex="0">Page count</th>
  </tr>
 </thead>
 <tbody>
  <tr>
    <th tabindex="0" scope="row">Don Quixote</th>
    <td tabindex="0">Miguel de Cervantes</td>
    <td tabindex="0">1023 pages</td>
  </tr>
  <tr>
    <th tabindex="0" scope="row">Moby Dick</th>
    <td tabindex="0">Herman Melville</td>
    <td tabindex="0">720 pages</td>
  </tr>
 </tbody>
</table>

Example table with column headings only.

New York Times Best Sellers 5 May 2019
Rank Title Author
1st Redemption David Baldacci
2nd The Mister E L James

<style>
 #table-2 tbody td:nth-of-type(1)::before {content: "Rank: ";}
 #table-2 tbody td:nth-of-type(2)::before {content: "Title: ";}
 #table-2 tbody td:nth-of-type(3)::before {content: "Author: ";}
</style>
<table id="table-2">
 <caption>New York Times Best Sellers 5 May 2019</caption>
 <thead>
  <tr>
    <th scope="col" tabindex="0">Rank</th>
    <th scope="col" tabindex="0">Title</th>
    <th scope="col" tabindex="0">Author</th>
  </tr>
 </thead>
 <tbody>
  <tr>
    <td tabindex="0">1st</td>
    <td tabindex="0">Redemption</td>
    <td tabindex="0">David Baldacci</td>
  </tr>
  <tr>
    <td tabindex="0">2nd</td>
    <td tabindex="0">The Mister</td>
    <td tabindex="0">E L James</td>
  </tr>
 </tbody>
</table>