Main Content
HTML
Table Types
Tables can be used in a few different ways. One is to use them to structure your web page which is considered a layout table. Layout tables are discussed more in depth in Lesson 2: Structure and Style. Since we want to talk about the HTML aspect of tables we will cover data tables and the importance of utilizing all the proper elements HTML has to offer.
Data Tables
Properly formatting data tables will ensure that assistive technologies such as screen readers can access and navigate the tables as well as ensure that the user is receiving the best possible understanding of the information that the data table contains. A well-formatted table will include a few basic elements beyond the typical table row (tr) and table data (td) tags. Other tags often forgotten include <caption>, <thead>, <tbody>, <tfoot>, and <th>. A properly formatted table resembles the basic structure of an HTML page. Much like the <html> <head> </head> <body> </body> </html> scheme, a table has a <table> <thead> </thead> <tbody> </tbody> </table> scheme. To pass as a functional web page, the structure for the html elements, are mandatory. A table that does not have these elements exactly as described in the following sections are not mandatory to print the table out to the page. For a data table to be accessible however, these elements are very important.
Table Caption and Summary
Caption
All tables should include a <caption> tag that gives the table a title so that assistive technologies can properly identify and navigate among them. This becomes very important when a page contains multiple data table. Without the <caption> tag, a screen reader will identify the table with one long string of all the contents it holds. When a page contains multiple table, the user can navigate from one table to the next with a keyboard shortcut. Because of this, it is important to have a <caption> tag so that the user can hear the titles and chose the table relevant to what they are searching for.
Summary
Much like the alt attribute used for images, tables use a summary attribute within the opening <table> tag that should describe the information that the table contains. This description is meant to be a generalized overview of the contents and not a detailed report. The summary attribute will not visibly appear on the web page but screen readers will be able to access and read the descriptions to the user.
Table Headers, Body & Footer
Headers
There are two different types of tables elements that are considered a head. There is the table head <thead> and a header cell <th>. The header cell tag, <th>, is used in place of the <td> tags when the contents of the cell are meant to define the data to follow in either a row or a column. If the header cell defines a column, the <th> tag should include the attribute scope=”col”. Likewise, if the header cell defines a row, the <th> tag should include the attribute scope=”row”. For headers that are long, you can use the “abbr” attribute for an abbreviation. For a heading that is Chiquita Bananas the abbreviation could appear as follows: <th abbr=”bananas”>Chiquita Bananas</th>
Often, the first row of a table will be made of headers for the columns and there are now row headers in the table. In this case, it is acceptable to omit the scope attribute from the <th> tag. Even if there are row headers included, if the first row of cells are all column headers, they should be contained within the table header tags <thead>, much like <head> is used for an html page structure. The row header cells will then still be contained outside the <thead> tags. The big difference between the table head tags and the head tags used for the html information is that anything within the <thead> tag will render on the screen, with the exception of the summary attribute.
Body & Footer
The majority of the table data, including the row headers, will be contained within the <tbody> tags. The body tags are used to group the main data content together. The <tfoot> tag can be used to hold an additional row of the header cells and display them at the bottom of the table.
<caption>COURSES</caption>
<thead>
<tr>
<th id="course" scope="col" width="20%">
<p>Course</p>
</th>
<th id="section" scope="col" width="20%">
<p>Section</p>
</th>
<th id="time" scope="col" width="20%">
<p>Time</p>
</th>
<th id="location" scope="col" width="20%">
<p>Location</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<th headers="course" id="biology331" scope="row" width="20%">
<p>Biology 331</p>
</th>
<td headers="section biology331" width="20%">
<p>001</p>
</td>
<td headers="time biology331" width="20%">
<p>1:15 M W F</p>
</td>
<td headers="location biology331" width="20%">
<p>214 Willard</p>
</td>
</tr>
<tr>
<th headers="course" id="biology412" scope="row" width="20%">
<p>Biology 412</p>
</th>
<td headers="section biology412" width="20%">
<p>003</p>
</td>
<td headers="time biology412" width="20%">
<p>1:45 T Th</p>
</td>
<td headers="location biology412" width="20%">
<p>112 Willard</p>
</td>
</tr>
<tr>
<th headers="course" id="math21" scope="row" width="20%">
<p>Math 021</p>
</th>
<td headers="section math21" width="20%">
<p>005</p>
</td>
<td headers="time math21" width="20%">
<p>3:45 M W F</p>
</td>
<td headers="location math21" width="20%">
<p>008 Sparks</p>
</td>
</tr>
<tr>
<th headers="course" id="english15" scope="row" width="20%">
<p>English 015</p>
</th>
<td headers="section english15" width="20%">
<p>001</p>
</td>
<td headers="time english15" width="20%">
<p>8:15 M W F</p>
</td>
<td headers="location english15" width="20%">
<p>012 Burrows</p>
</td>
</tr>
<tr>
<th headers="course" id="history100" scope="row" width="20%">
<p>History 100</p>
</th>
<td headers="section history100" width="20%">
<p>002</p>
</td>
<td headers="time history100" width="20%">
<p>11:30 M W F</p>
</td>
<td headers="location history100" width="20%">
<p>035 Thomas</p>
</td>
</tr>
</tbody>
</table>
|
Course |
Section |
Time |
Location |
|---|---|---|---|
|
Biology 331 |
001 |
1:15 M W F |
214 Willard |
|
Biology 412 |
003 |
1:45 T Th |
112 Willard |
|
Math 021 |
005 |
3:45 MWF |
008 Sparks |
|
English 015 |
001 |
8:15 MWF |
012 Burrows |
|
History 100 |
002 |
11:30 MWF |
035 Thomas |
Empty Table Cells
If it is possible, you should avoid including empty cells within your tables. Sometimes empty cells are used to separate headers from the table data but screen readers will voice the word “blank” when they come to an instance of an empty cell. If a table is a collection of data where some information is either not provided or unknown, then the empty cell is useful in showing missing data and a screen reader will convey that by voicing the word “blank”.
|
Course |
Course Number |
Section |
Time |
Location |
|---|---|---|---|---|
|
Biology |
331 |
001 |
1:15 M W F |
214 Willard |
|
412 |
003 |
1:45 T Th |
112 Willard |
|
|
Math |
021 |
005 |
3:45 MWF |
008 Sparks |
|
English |
015 |
001 |
012 Burrows |
|
|
History |
100 |
002 |
11:30 MWF |
035 Thomas |
Add "Hear it read"