Tip #8: Markup tables appropriately

Include markup that clearly communicates the relationship between table headers and the cells within their scope.

Example Simple Table

Screen shot of a table with three columns and eight rows. The first row is a header row, with column headers Week, Topic, and Reading Assignment

Example Simple Table in HTML

  <table> 
    <thead> 
      <tr> 
        <th scope=“col”>Week</th> 
        <th scope=“col”>Topic</th> 
        <th scope=“col”>Reading Assignment</th>
      </tr>
    </thead>
    <tbody>
       <tr>
         <th scope=“row”>1</th>
         <td>Course Introduction</td> 
         <td>Chapter 1</td> 
       </tr> 
        <!-- etc. -->
    </tbody> 
  </table>

Example Complex Table

Screen shot of a table with Enrollment Trends data. There are groups of columns labeled 2007-08 and 2008-09, and six columns within each of these. Each of the nested columns has a column header with an abbreviated discipline, CS, Eng, Eco, Phy, Psy, and Spa. Row headers are Total, % Male, and % Female. Four cells are higlighted: Three header cells (2007-08, Eco, and % Female) and one data cell with the number 27

Accessible complex table in HTML (just the highlights)

  <th id=“ay0708” colspan=“6”>2007-08</th> 
  <th id=“eco1”>
    <abbr title=“Ecological Sciences”>Eco</abbr>
  </th>
  <th id=“female”>% Female</th>
  <td headers=“ay0708 eco1 female”> 27</td>

Accessible PDF tables in Acrobat

Table Cell Properties dialog in Adobe Acrobat Pro, which includes a Header Cell radio button, Scope combo box, ID Field, and Headers selector field.