Skip to main content
Proper Use of Tables

​Proper Use of Tables

  • Data tables must have column headers and row headers created using <th> </th> elements.
  • Column and row headers must have "scope" attributes with the appropriate value -- scope="col" or scope="row".

This requirement applies only to "data tables" -- HTML tables that contain rows and columns of text and/or numeric information. 

This requirement does NOT apply to tables used only for layout, such as a grid of graphical buttons. Layout tables should NIT have <th> </th> tags, but should have the attribute role="presentation" in the table element.

 Strictly speaking it is best to avoid use of tables for layout! Screen Readers may not render the flow of content as intended. Layout tables also create usability issues on the smaller screens of mobile devices.

Procedure for Editing Table HTML

NOTE: Currently, adding "scope" attributes can only be done by editing HTML directly -- not by using the Sharepoint GUI.

If your site has a page with a table, contact Web Support for assistance.

When you create a table in Sharepoint, you can set options to include header rows, under the "Table Tools > Design" tab:
Checkboxes to add table headers are under  Sharepoint's Table Tools - Design tab

Data tables created this way still need to have scope attributes added manually, as described below.

The following information is provided as a reference for those with solid html skills:

Accessing the "Edit HTML" Window

  • In Edit mode, under the "Editing Tools > Format Text" tab, click the "HTML" button, and select "Edit HTML Source":
    Use HTML menu to open html edit window
  • An overlay pops up displaying the HTML of the content area:
    html edit overlay

Adding Scope Attributes to Column Headers

The table below has three column headers. Adding the scope attribute with the value col helps screen readers associate each header with cells in corresponding columns.table header scope attributes with value 'col'

The attribute and value pair scope=col are inserted inside each of the top row's header elements:

<table class="bordered" width="540" cellspacing="0" cellpadding="6">
<tbody><tr>
<th scope="col" width="35%">School</th>
<th scope="col" width="40%">Principal</th>
<th scope="col" width="25%">Phone</th>
</tr>

Adding Scope Attributes to Row Headers

Each row in the table below has a header for a School name. Adding the scope attribute with the value row helps screen readers associate each row header with cells in that row.
table header scope attributes with value 'row'

The attribute and value pair scope=row are inserted inside the <th> row header element:

<tr>
<th scope="row"><a href="/school/ahs/">Albemarle</a></th>
<td>Mr. Jay Thomas</td>
<td>434-975-9300</td>
</tr>
<tr>
<th scope="row"><a href="/school/mohs/">Monticello</a></th>
<td>Dr. Jesse Turner</td>
<td>434-244-3100</td>
</tr>
<tr>
<th scope="row"><a href="/school/muhs/">Murray</a></th>
<td>Ms. Ashby Kindler</td>
<td>434-296-3090</td>
</tr>
<tr>
<th scope="row"><a href="/school/wahs/">Western Albemarle</a></th>
<td>Mr. Darah Bonham</td>
<td>434-823-8700</td></tr></tbody>
</table>

Why this matters

While sighted users can simply look at a table and see which row and column a cell belongs to, a screen reader can only read cells one by one, left to right, top to bottom.

Table headers allow screen readers to help blind users process data by verbally associating each cell's content with its corresponding row and column values.

Get Acrobat PDF Reader You may need the free Acrobat Reader to access information presented in PDF format.