Tables

Tables tend to be better for accessibility when used for data, but if created correctly, they can also be used for page layouts. Regardless of which table type you create, keep the following suggestions in mind:

• If using for layout, consider alternatives to using a table (would a bulleted list or columns be sufficient?).
• Keep tables simple (no nested tables, split cells, or merged cells).
  • People using screen readers to have the table read aloud to them may struggle to understand its layout otherwise.
• Avoid leaving cells blank (especially for spacing).
• If it must be left blank, label it as “blank” (hide it visually by matching the text color to the background).
• Check reading order by tabbing through the table.
• Content should read logically from left to right, top to bottom.

• Show a relationship between at least two items.
• Can be numbers, words, categories, observations, etc. that show a connection to each other.
• Header, caption, and summary MUST be used to show the relationship between rows and columns.

• Used to position content in a document or page.
• Do not represent a relationship between information in the cells.
• Reading order is most essential.
• Header, caption, and summary should NOT be used.
• Layout tables could be confusing since there is no connection between columns and rows.
• Best practices discourage layout tables for web pages.
• If you choose to use them, use CSS-based layouts (per the World Wide Web Consortium).

• Insert a table rather than only using spaces or tabbing. Select the top row and indicate that it is a Header row in the Table Design tab.
• If a table spans multiple pages, ensure the Header row repeats. To do this in Microsoft Word, select the row, right-click to view Table Properties, and check Repeat as header row.

• Add a caption tag to the table to summarize its contents and purpose.
• In Word, right-click the table and select Insert Caption…
• Describe the purpose and interpretation of the table in the text preceding the table; this will help all users.

Add alt text to the table.

• Right-click the table and select Table Properties.
• Select the Alt Text tab from the Table Properties box.
• Enter short description in the Description box.

• Add a caption tag to the table to summarize its contents and purpose.
• Describe the purpose and interpretation of the table in the text preceding the table; this will help all users.

Example: HTML of a Table on a Website with Caption

<table>

<caption>Monthly Ice Cream Sales </caption>

…

</table>

• Organize semantic markup for row and column headers.
• Header cells must be <th>. Data cells must be <td>.
• If tables have complicated headers, you may need to use scope, id, and headers attributes.

Example: HTML of Correctly Marked Up Table

<table style=”width:100%”>

<caption>Group Member Names and Ages</caption>

<tr>

<th>Lastname</th>

<th>Age</th>

</tr>

<tr>

<td>Smith</td>

<td>50</td>

</tr>

<tr>

<td>Jackson</td>

<td>94</td>

</tr>

</table>

• Use relative values rather than pixel values for sizing.
• Some users with low vision may struggle with scrolling horizontally and others may wish to zoom in on tables, so using proportional sizing will aid them.

Example: HTML of Proportional Sizing

<table styling=”width:100%”>

Example: HTML of Absolute Sizing

<table style=”width:400px”>