County of Sonoma, California
Site Search

You are here:

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 ro 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 <th> 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="data-table"
summary="This table charts a list of employees at XYZ
Newspaper Company by their department, title, and if they are a supervisor.">
  <caption>Listing of Newspaper Employees</caption>
  <tr>
    <th id="name">Name</th>
    <th id="dept">Department</th>
    <th id="title">Title</th>
    <th id="super">Supervisor</th>
  </tr>
  <tr>
    <td headers="name">Mary Jones</td>
    <td headers="dept">World News</td>
    <td headers="title">Editor</td>
    <td headers="super">Yes</td>
  </tr>
  <tr>
    <td headers="name">Tom Smith</td>
    <td headers="dept">Local News</td>
    <td headers="title">Copywriter</td>
    <td headers="super">No</td>
  </tr>
</table>

This example is a simple data table. However, complex tables, with multiple levels, require the id and headers attributes. These attributes associate each data cell with the appropriate heading at the appropriate level.

The summary attribute is not required but very helpful for interpreting complex tables.

The class "data-table" was created to define the styles for this table. The CSS code used in this example has been provided below.

Example 2

Simple data table created using HTML markup.
Column 1 header Column 2 header
Row 1 header Column 1 Row 1 data Column 2 Row 1 data
Row 2 header Column 1 Row 2 data Column 2 Row 2 data

HTML Code for Example 2:

<table class="data-table">
  <caption>Simple data table created using HTML markup.</caption>
  <tr>
    <td></td>
    <th scope="col">Column 1 header</th>
    <th scope="col">Column 2 header</th>
  </tr>
  <tr>
    <th scope="row">Row 1 header</th>
    <td>Column 1 Row 1 data</td>
    <td>Column 2 Row 1 data</td>
  </tr>
  <tr>
    <th scope="row">Row 2 header</th>
    <td>Column 1 Row 2 data</td>
    <td>Column 2 Row 2 data</td>
  </tr>
</table>

CSS Code for Examples 1 & 2

table.data-table {
width:90%;
border:double;
border-style:ridge;
border-collapse:collapse}

table.data-table caption {
font-size:.85em;
padding-top:1em}

table.data-table th, table.data-table td {
font-size:.85em;
border:double;
border-style:ridge}

table.data-table th {
font-weight: bold}

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 tablular data. Use <div> and <span> elements to affect layout.
  • Avoid cells that span multiple rows or multiple columns.
Top ↑

References

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