Tables

• Use the th element to mark up table heading cells of rows and/or columns in all data tables.
• Include the id attribute for row and column headers in a complex data table.
• Include the headers attribute for all data cells in a complex data table.

There are two types of tables that are used in HTML. Data tables contain multiple rows and columns, and are used to present information to a user in a clean, concise manner. Layout tables are used to layout the images and text on a page. Layout tables do not contain tabular data and are only used for the visual layout.

When a user comes to a table, they must be able to understand the purpose of the table, and navigate the specific data that the table shows. Although it is fairly easy for a sighted user to navigate data tables, someone using assistive technology may have a difficult time navigating a data table and understanding its purpose or contents. The user may be unable to determine which data matches with which column or row header. Using the appropriate table markup techniques in this checkpoint will make your HTML tables easier for assistive technology users to understand and navigate.

Using layout tables to make your pages more visually appealing may also create difficulties for someone using assistive technologies, as they will not be able to immediately discern that the table is used only for layout. This checkpoint will also show you how to mark up data tables and layout tables.

Back to top

• Simple data tables
• Complex data tables
• Layout tables

The techniques in this checkpoint are organized by table type, with each table type requiring specific techniques. The table types are: simple data tables, complex data tables, and layout tables.

Simple data tables

A simple data table contains one row of column headings and/or one row of row headings. This is the most basic type of data table. An example simple data table is below:

Boys and Girls in Elementary School Classes

Class	# of Boys	# of Girls
1st Grade	11	10
2nd Grade	7	12
3rd Grade	9	11
4th Grade	13	12
5th Grade	12	12

The code for the above example is:

<table border="1" summary="A example simple data table showing the number of boys and girls in each grade of an elementary school">
<caption>Boys and Girls in Elementary School Classes</caption>
<tr>

<th scope="col">Class</th>
<th scope="col"># of Boys</th>
<th scope="col"># of Girls</th></tr>

<tr>
<th scope="row">1st Grade</th>
<td>11</td>
<td>10</td>

</tr>
<tr>
<th scope="row">2nd Grade</th>
<td>7</td>

<td>12</td>
</tr>
...
</table>

The table shows the number of boys and the number of girls in each class of an elementary school. Without proper HTML markup, a user with an assistive technology might have trouble understanding, for example, that there are 11 girls in the 3rd grade class. This is because without proper markup, they will not hear the column and row headings read outloud. If they navigated to the "11" cell, all they would hear is "11".

For simple data tables, the following techniques are the minimum required to meet Checkpoint 10 from the IBM Web Accessibility Checklist.

• Use the <th> element to mark up table heading cells of rows and/or columns in a simple data table.

The following techniques are recommended to enhance accessibility of simple data tables:

• Use the <caption> element AND summary attribute to provide a description of the table's contents.

The <caption> element displays on the Web page. The summary attribute doesn't display in the browser, but screen readers will read the content aloud. For example:

<table summary="This table shows the number of boys and girls in each class of an elementary school"> <caption>Boys and Girls in Elementary School Classes</caption>

• Avoid the use of the title attribute with the <table> element. The <caption> element and summary attribute provide a more accessible alternative for describing the purpose of the table.
• For tables that allow users to sort on a particular column by clicking on a header, use the title attribute with the header. Adding the title attribute to each heading link allows you to explain that the user can sort on a particular column.
• For simple data tables that contain both row and column headers, use the scope attribute in addition to the <th> element. For example, the value of row in the scope attribute will assign the table header to all table cells in that row. Similarly, the value of col in the scope attribute will assign the table header to all table cells in that column. Scope is generally quicker and easier to code than id and headers attributes. The example code below shows an example of the <th> element technique as well as the scope attribute:

...
<tr>
< th scope="col" >Class</th>

< th scope="col" ># of Boys</th>
< th scope="col" ># of Girls</th>
</tr>

<tr>
< th scope="row" >1st Grade</th>
<td>11</td>

<td>10</td>
</tr>
.....

• Avoid using the background attribute on the <tbody> and <td> tags. These background images are ignored by text-only browsers, and may cause text to be displayed over an image, making them harder to read. In addition, the background attribute is not standard HTML.

Back to top

Complex data tables

Complex data tables are defined as having two or more levels of row or column headings or headings that span multiple rows or columns. Complex data tables require additional markup to explicitly associate the heading with the data. In the data cells, the headers attribute is used on the TD element to specify which heading cell, via the id attribute on the th element, is associated with a specific data cell.

The example complex data table below shows the number of boys and girls in each class of an elementary school, and also shows the breakdown of students that are assigned to each teacher. This is considered a complex data table because there are multiple row headers (1st Grade includes both Mr. Henry and Mrs. Smith).

In the example, column and row headers are identified with th elements and cells are associated with the column and row headers using the headers attribute. But in a complex row, such as the one beginning with 1st Grade , identifying only the row header is not enough to convey the relationships between the cells. In this example, it is important to understand that both Mr. Henry and Mrs. Smith are 1st grade teachers. Each has their own class of 1st grade boys and girls .

Boys and Girls in Elementary School Classes, by Teacher

Class	Teacher	# of Boys	# of Girls
1st Grade	Mr. Henry	5	4
	Mrs. Smith	7	9
2nd Grade	Mr. Jones	3	9
	Mrs. Smith	4	3
	Mrs. Kelly	6	9

The code below shows the correct markup of the 1st Grade portion of the above table. Notice that the column and row headers are marked with the id attribute, and the corresponding data cells contain the headers attribute. In addition, you will notice that the cell containing Mr. Henry is a header cell as well as a data cell, and therefore it contains both the id and headers attributes.

...
<tr>

<th id="class">Class</th>
<th id="teacher">Teacher</th>
<th id="boys"># of Boys</th>

<th id="girls"># of Girls</th>
</tr>
<tr>
<th id="1stgrade" rowspan="2">1st Grade</th>

<th id="MrHenry" headers="1stgrade teacher">Mr. Henry</th>
<td headers="1stgrade MrHenry boys">5</td>
<td headers="1stgrade MrHenry girls">4</td>

</tr>
<tr>
<th id="MrsSmith" headers="1stgrade teacher">Mrs. Smith</th>
<td headers="1stgrade MrsSmith boys">7</td>

<td headers="1stgrade MrsSmith girls">9</td>
</tr>

Adding id attributes to the first cell in each row and to other row cells that could be perceived as headers for subsequent cells in the row makes it explicitly clear which column and row headers apply to a particular cell. For example, it is now clear that both 1st Grade and Mr. Henry are row headers for the cell containing 5. This markup does not change the visual look of the table, and a screen reader user will be able to better understand the relationships between the cells.

For complex data tables, the following techniques are the minimum required to meet Checkpoint 10 from the IBM Web Accessibility Checklist.

• Use the <th> element to mark up table heading cells of rows and/or columns in a complex data table.
• Include the id attribute for all column and row headers.
• Include the headers attribute for all data cells in order to associate the cells with one or more column and row headings.

The following techniques are recommended to enhance accessibility of complex tables:

• Use the <caption> element AND summary attribute to provide a description of the table's contents.
• Avoid the use of the title attribute with the <table> element. The <caption> element and summary attribute provide a more accessible alternative for describing the purpose of the table.
• Consider using the abbr attribute for very long tables. The abbr attribute is used to shorten the way that the assistive technology reads row and column headers. When reading very long tables, a user may tire of hearing the long row and column headers for every single cell. In this case, you may define an abbr attribute to shorten the headers. For example, you may shorten "# of Boys" to "boys". A screen reader will normally read the abbr attribute instead of the complete row or column header. Using this technique, the code for the above complex table would look like this:

<tr>
<th id="class">Class</th>

<th id="teacher">Teacher</th>
<th id="boys" abbr="boys" ># of Boys</th>
<th id="girls" abbr="girls" # of Girls</th>
</tr>

• For all complex data tables, you also have the option of breaking down the complex table into several smaller simple data tables. These types of tables are generally easier to make accessible, and may be easier to understand for a user with assistive technology. For example, you could split the example complex table into five smaller tables, one for each grade. This would eliminate the need for the Class row header, and would leave only one header column and one header row, thus eliminating the need for the headers and id attributes.

Back to top

Layout tables

Layout tables are used to position objects (text or images) on a web page. For the sighted user, this creates a more visually appealing web site. However, for someone using assistive technology, layout tables can make the page extremely confusing if they are not coded correctly.

The following techniques are recommended to enhance the accessibility of layout tables:

• The summary attribute should be used, and the summary should be set to null. For example, <table summary="">. Do not set the attribute to an empty space. Ensure that there is nothing between the two quote marks. (i.e. Use "" instead of " ").
• Set table and cell width to a percentage, rather than an absolute size, by using the width attribute. Using a percentage allows the table to adjust to fit any screen size, so that users with different screen sizes or screen magnifiers can more easily see the table. See the example below:

<table width="90%" summary= "This example table shows the use of the width attribute for both tables and cells.>
<tr>
<td width="45%">This cell takes up 45% of the table width</td>

<td width="55%"> This cell takes up 55% of the table width </td>
</tr>
<tr>
<td width="45%"> This cell takes up 45% of the table width </td>

<td width="55%"> This cell takes up 55% of the table width </td>
</tr>
</table>

• Use Cascading Style Sheets instead of HTML layout tables. Some assistive technology, including the text-only browser, LYNX, must linearize tables in order to present them to the user. This means that the user will hear the table cell by cell, from left to right and top to bottom. HTML layout tables may not always linearize correctly, and therefore it is usually better to use CSS to position information on a web page. The example below shows an incorrectly linearized layout table that is being used to position the lines of a poem so that they read down the left size of the page first, and then down the right side, like a newspaper column.

Example of an incorrectly linearized layout table

Mary had a little lamb	and everywhere that Mary went
its fleece was white as snow	the lamb was sure to go.

• When a user with an assistive technology that requires linearization, such as LYNX, tries to read this poem, they will hear "Mary had a little lamb, and everywhere that Mary went, its fleece was white as snow, the lamb was sure to go.". This example demonstrates that although HTML layout tables make a page more visually appealing, they can cause confusion for those using assistive technology.

Use only the td, table, and tr elements, as well as the border, cellspacing, and cellpadding attributes in layout tables. Do not use any additional attributes or elements in layout tables.

Back to top

Test the Web site to ensure that it complies with accessibility requirements.

Tools

You will need to install the following tools to test this checkpoint:

• A screen reader

Techniques

The following technique is required to verify this checkpoint:

Back to top