Skip to main content

Tables

Must haves

  1. Use <table> markup for tabular data (no <div> soup).
  2. Avoid using <table> markup for page layout. Use CSS and HTML for layout.
  3. Include a <caption> element within the table.
  4. Identify column headers by using <th scope="col"> and row headers by using <th scope="row">. 
    1. Tip: use both column and row headers whenever possible. Most tables will have both column and row headers that need to be marked up correctly.

Learn more about accessible tables from the W3C

More about accessible tables from the Office of Digital Accessibility

Visual Example

Pull from https://uit.stanford.edu/service/cardinalkey 

Do and Don't

DoDon't
<table> 
   <caption>Project Updates</caption> 
   <thead> 
      <tr> 
         <td></td> 
         <th scope="col">Project Lead</th> 
         <th scope="col">Status</th> 
         <th scope="col">Estimated End Date</th> 
      </tr> 
   </thead> 
   <tr> 
      <th scope="row">Website Upgrade</th> 
      <td>Jane Doe</td> 
      <td>In Progress</td> 
      <td>3/1/25</td> 
   </tr> 
   <tr> 
      <th scope="row">Documentation Overhaul</th> 
      <td>Joe Smith</td> 
      <td>Not Started</td> 
      <td>5/1/25</td> 
   </tr> 
   <tr> 
      <th scope="row">Office Refurb</th> 
      <td>Sally Jones</td> 
      <td>Under Review</td> 
      <td>12/1/24</td> 
   </tr> 
</table>

<div class="heading">Project Updates</div> 
<div class="row"> 
   <div class="spacer"></div>
  <div class="cell">Project Lead</div> 
   <div class="cell">Status</div> 
   <div class="cell">Estimated End Date</div> 
</div> 
<div class="row"> 
   <div class="cell">Website Upgrade</div> 
   <div class="cell">Jane Doe</div> 
   <div class="cell">In Progress</div> 
      <div class="cell">3/1/25</div> 
</div> 
<div class="row"> 
   <div class="cell">Documentation Overhaul</div> 
   <div class="cell">Joe Smith</div> 
   <div class="cell">Not Started</div> 
   <div class="cell">5/1/25</div> 
</div> 
<div> 
   <div class="cell">Office Refurb</div> 
   <div class="cell">Sally Jones</div> 
   <div class="cell">Under Review</div> 
   <div>12/1/24</div> 
</div>

Here there is no semantic structure to the data and screen readers will not be able to detect and communicate the content relationships to users.

Last modified