Skip to Content

Information Systems Department

Information Management Division - Web Standards

Tabular Data & Tables

Webstandards banner 750

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
Name Department Title Supervisor
Mary Jones World News Editor Yes
Tom Smith Local News Copywriter No

HTML Code for Example 1: 

<table class="tableBorder width100pct" summary="Listing of Newspaper Employees" dropzone="copy"><caption>Listing of Newspaper Employees</caption>
<tbody>
<tr>
<th style="cursor: default;" scope="col">Name</th>
<th style="cursor: default;" scope="col">Department</th>
<th scope="col">Title</th>
<th scope="col">Supervisor</th>
</tr>
<tr>
<td style="cursor: default;">Mary Jones</td>
<td style="cursor: default;">World News</td>
<td style="cursor: default;">Editor</td>
<td>Yes</td>
</tr>
<tr>
<td style="cursor: default;">Tom Smith</td>
<td style="cursor: default;">Local News</td>
<td style="cursor: default;">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 data Column 2 Row 1 data
 Row 2 Header  Column 2 Row 1 data Column 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 style="cursor: default;" scope="row">&nbsp;</th>
<th style="cursor: default;" scope="col">&nbsp;Column 1 Header</th>
<th style="cursor: default;" scope="col">&nbsp;Column 2 Header</th>
</tr>
<tr>
<th style="cursor: default;" scope="row">&nbsp;Row 1 Header</th>
<td style="cursor: default;">&nbsp;Column 1 Row 1 data</td>
<td style="cursor: default;">Column 2 Row 1 data</td>
</tr>
<tr>
<th style="cursor: default;" scope="row">&nbsp;Row 2 Header</th>
<td style="cursor: default;">&nbsp;Column 2 Row 1 data</td>
<td style="cursor: default;">Column 2 Row 1 data</td>
</tr>
</tbody>
</table>

Best Practices

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

CMS Entry

Create Table

  • Select Table from Menu
  • Select number of columns and rows

Selecting Tables

Header Columns and Rows

  • Highlight the column or row
  • Select Cell Properties from the drop down menu

Selecting Cell Properties

  • Fill out the Cell Properties according to your table for Columns and Rows

Select Column Headers Select Row Headers