Webstandards banner

Tabular Data and Tables

Tables are particularly difficult to understand when read by a screen reader when not coded properly. By default, screen readers will read each row, left to right. By the time the listener hears the data on row 3, they may no longer remember which column is which.

For that reason we use tags to identify column and row headers. The scope attribute identifies which data cells are associated to this heading. When coded properly, the screen reader will read the heading, then the associated data, the next heading, followed by the associated data, etc.

Captions are added for additional explanation.

Example 1

Listing of Newspaper Employees
NameDepartment Title Supervisor
Mary JonesWorld News Editor Yes
Tom SmithLocal News Copywriter No

HTML Code for Example 1:

<table class="tableBorder  width100pct"  summary="Listing of Newspaper Employees" >
  <caption>Listing of Newspaper Employees
    <br/>
  </caption>
  <tbody>
    <tr>
      <th> Name</th>
      <th>Department </th>
      <th>Title </th>
      <th>Supervisor </th>
    </tr>
    <tr>
      <td> Mary Jones</td>
      <td>World News </td>
      <td>Editor </td>
      <td>Yes </td>
    </tr>
    <tr>
      <td> Tom Smith</td>
      <td>Local News </td>
      <td>Copywriter </td>
      <td>No </td>
    </tr>
  </tbody>
</table>

Example 2

Simple Data Table
 Column 1 Header Column 2 Header
 Row 1 Header Column 1 Row 1 dataColumn 2 Row 1 data
 Row 2 Header Column 2 Row 1 dataColumn 2 Row 1 data

HTML Code for Example 2

<table summary="Simple Data Table"  class="width100pct tableBorder">
 <caption>
  Simple Data Table
 </caption>
 <tbody>
  <tr>
   <th> </th>
   <th> Column 1 Header </th>
   <th> Column 2 Header </th>
  </tr>
  <tr>
   <th> Row 1 Header </th>
   <td> Column 1 Row 1 data </td>
   <td>Column 2 Row 1 data </td>
  </tr>
  <tr>
   <th> Row 2 Header </th>
   <td> Column 2 Row 1 data</td>
   <td>Column 2 Row 1 data </td>
  </tr>
 </tbody>
</table>

Best Practices

  • Always use <th> elements for header items.
  • Always use scope attributes in <th> tags unless id and headers attributes are required.
  • Always use <caption> elements.
  • Use summary attributes for complicated tables.
  • Use <table> elements for tabular data. Use <div> and <span> elements to affect layout.
  • Avoid cells that span multiple rows or multiple columns. 

Contact Information

Web Services Team
Information Systems Department
County of Sonoma
Address
Webmaster
2615 Paulin Drive
Santa Rosa, CA 95403
38.466385, -122.722706

Regulatory Compliance Resources

 

Some content on this page is saved in alternate format. To view these files, download the following software.

Windows Media Player   Windows Media® Player for Windows, Flip4MAC for MAC OSX
Compressed ZIP Archive   WinZip® for downloading compressed files
Return to top of page
Return to top of page