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.

<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.

<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>