Table Tags and Styles

Summary

Simplify tables, include row and/or column headers and content in all cells, enable size changes, and associate cells with their headings.

Impact
Dos and Don'ts
How-to

Impact

HTML table specifications were originally developed for the presentation of tabular data. In the early days of the internet, Web designers and developers commonly used tables to control the layout of webpage content as well because they couldn't easily do so with HTML. However, tables used for layout may be problematic for some users:

Screen reader users may attempt to use table navigation for non-tabular information.
Content in the top row and left column will be read as column and row headings and other content may be read out of order.
Screen magnification users may find it difficult or impossible to resize content.
Content may become truncated or disappear completely when enlarged.

Page layout can now be better controlled with modern CSS, which enables users to more easily apply personal style sheets, incorporate a zoom layout, and use an in-page selector to modify font sizes, color contrast, and column layouts.

HTML tables used to display data can also pose access issues. A screen reader can only read aloud each cell in a table one-by-one, from left to right and top to bottom. If the table is not formatted correctly, there is no easy way to determine what label a particular value in a cell might have.

Dos and Don'ts

Expand all

Follow Core Skills Table Dos and Don'ts

Do

Use tables to display data.
Designate at least one row and/or column header.
Avoid or simplify complex tables.
Provide contextual information such as a caption or alt text.
Include content in all cells.

Don't

Don't use tables to make your webpage look a particular way.
Don't just change the visual formatting of the text to visually indicate table header rows and/or columns.
Don't merge cells.
Don't include a table within another table.
Don't repeat the same contextual information, such as a caption that duplicates a heading.
Don't leave any cells empty.

Learn more accessible table core skills.

Enable Users to Change Font and Column Sizes

Do

Allow the user to dictate the font size based on their screen size and preference by using relative font sizes (percentages and em).

Enable user to change table and cell widths by using browser defaults or percentage widths.

Example

#flexibleTable {
   table-layout: auto;
   width: 38%;
   white-space: normal;
   overflow: visible;
   border: 5px solid #000000;
}

#flexibleTable th, #flexibleTable td{
   padding: 3px 5px;
}

#flexibleTable td {
   text-align: left;
   vertical-align: top;
}

Don’t

Don't specify font sizes or table and cell widths in fixed sizes (px and pt).

Example

#ridgidTable {
   table-layout: fixed;
   width: 340px;
   white-space: nowrap;
   overflow: hidden;
   border: 5px solid #000000;
}

#ridgidTable td, #ridgidTable th {
   width: 170px;
   padding: 3px 5px;
}

#ridgidTable td {
   text-align: left;
   vertical-align: top;
}

Avoid Form Elements in the First Column

Do

Include content in every cell or users may wonder if data was omitted by mistake.

Example

<h5>Dog Beds</h5>
<table>
  <tbody>
    <tr>
      <th scope=”col”>Size</th>
      <th scope=”col”>Dimensions</th>
      <th scope=”col”>Cost</th>
      <th scope=”col”>Quantity</th>
    </tr> 
    <tr>
      <td>Small</td>
      <td>20" x 30"</td>
      <td>$25.00</td>
      <td><input type="text" id="quantity_s2" value="0" /></td>
    </tr> 
    <tr>
      <td>Medium</td>
      <td>25" x 40"</td>
      <td>$30.00</td>
      <td><input type="text" id="quantity_m2" value="0" /></td>
    </tr> 
    <tr>
      <td>Large</td>
      <td>30" x 50"</td>
      <td>$35.00</td>
      <td><input type="text" id="quantity_l2" value="0" /></td>
    </tr> 
    <tr>
      <td>X-Large</td>
      <td>45" x 60"</td>
      <td>$45.00</td>
      <td><input type="text" id="quantity_xl2" value="0" /></td>
    </tr> 
  </tbody>
</table>

Don't

Avoid the use of the following elements in the first column of a table:

Text entry fields
Radio buttons
Checkboxes
Select lists (dropdowns)

Example

This table includes a text field in the first column and also does not include table heading tags.

<h5>Dog Beds</h5>
<table>
  <tbody>
    <tr>
      <td><input type="text" id="quantity_s" value="0" /></td>
      <td>Small</td>
      <td>20" x 30"</td>
      <td>$25.00</td>
    </tr> 
    <tr>
      <td><input type="text" id="quantity_m" value="0" /></td>
      <td>Medium</td>
      <td>25" x 40"</td>
      <td>$30.00</td>
    </tr> 
    <tr>
      <td><input type="text" id="quantity_l" value="0" /></td>
      <td>Large</td>
      <td>30" x 50"</td>
      <td>$35.00</td>
    </tr> 
    <tr>
      <td><input type="text" id="quantity_xl" value="0" /></td>
      <td>X-Large</td>
      <td>45" x 60"</td>
      <td>$45.00</td>
    </tr>
  </tbody>
</table>

Programmatically Associate Cells with Their Headings

Associations between data cells and their corresponding row and column headings may be difficult or impossible to determine for some users. HTML markup should be used to establish programmatic associations among data cells and their corresponding row and column headers.

Do

Use the scope attribute to identify whether a table header is a column header or a row header.

All <th> elements should generally always have a scope attribute.

Example

<table>
<caption>Shelly's Daughters</caption>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
    <th scope="col">Birthday</th>
  </tr>
  <tr>
    <th scope="row">Jackie</th>
    <td>5</td>
    <td>April 5</td>
  </tr>
  <tr>
    <th scope="row">Beth</th>
    <td>8</td>
    <td>January 14</td>
  </tr>
</table>

Don't

Another way to associate data cells and headers is by using headers and id attributes, but this method is not recommended by WebAIM because it is more complex and the scope attribute is usually sufficient.

Example

<table>
<caption>Shelly's Daughters</caption>
  <tr>
    <th id="name">Name</th>
    <th id="age">Age</th>
    <th id="birthday">Birthday</th>
  </tr>
  <tr>
    <th id="jackie" headers="name">Jackie</th>
    <td headers="jackie age">5</td>
    <td headers="jackie birthday">April 5</td>
  </tr>
  <tr>
    <th id="beth" headers="name">Beth</th>
    <td headers="beth age">8</td>
    <td headers="beth birthday">January 14</td>
  </tr>
</table>

How-to

WebAIM's Creating Accessible Tables: Data Tables
Web Accessibility Initiative's Web Accessibility Tutorials: Table Concepts

Digital Resource Accessibility Assessments

Have an accessibility question?
Want your website or documents reviewed for accessibility?
Not sure how to interpret your Pope Tech reports?

Fill out the Digital Resource Accessibility Assessment Request Form to get assistance from an accessibility specialist.

Summary

Impact

Dos and Don'ts

+ Follow Core Skills Table Dos and Don'ts

Do

Don't

+ Enable Users to Change Font and Column Sizes

Do

Don’t

+ Avoid Form Elements in the First Column

Do

Don't

+ Programmatically Associate Cells with Their Headings

Do

Don't

How-to

Follow Core Skills Table Dos and Don'ts

Enable Users to Change Font and Column Sizes

Avoid Form Elements in the First Column

Programmatically Associate Cells with Their Headings