Design Principle
When using data tables, ensure data cells are associated with row and column header cells and can be explicitly associated with header cells
§ 508 1944.22: (g) Row and column headers shall be identified for data tables
§ 508 1944.22: (h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers
- Presenting data in a tabular format
- Visual layout of the content
Layout Tables
HTML tables are container elements for presenting tabular data in a grid format. As tables can also provide a way to control the placement (alignment and position) and layout of content objects on the web page, they soon evolved into the primary layout tool for web pages to control and manage the visual aesthetics of all types of content.
The recommended design construct is to separate presentation from content using CSS for layout, however carefully designed layout tables, when used judiciously, can be a very useful tool for page layout to address browser compatibility and other issues.
Design construct to keep in mind using tables for layout:
- Keep layout tables as simple as possible.
- Avoid complex or nested tables. While these tables will pass Section 508 validation, they are very tedious to navigate for people using screen readers.
- Use of attributes like cellpadding, cellspacing colspan, rowspan to provide white spaces and make the layout work linearly as well as graphically.
- Use relative values to control table attributes like size, padding, margins so that the tables resize easily when screen is magnified or changed
- Do not use structural mark-up elements like <th> element to bold and center text in a cell. Use style sheets to control visual layout, color and presentation of the information within the table .
- Place a content "chunk" within a single cell.
- Present content in a logical read order so that the information makes sense when linearized. Non-graphical browsers and screen readers linearize the content starting at the top left cell, moving right to the bottom right cell, chunking the content from each cell into individual blocks of information.
Data Tables
Data tables are used to present data in a tabular format. They have cells that are headers for the rows and columns which provide contextual meaning to the cell content. Data tables can be simple or complex, with multiple nested cells and table headers.
Sighted users can visualize the entire layout of a table and can visually establish relationship between the row and column headers and the cell content. Screen readers on the other hand read tables sequentially cell by cell from the top left to the right bottom cell and can only establish relationship if it is present programmatically.
Design constructs to keep in mind for data tables:
- May use <caption> element to display the "title" of the table on the web page
- Must use summary attribute of the <table> element to create a text description of the content of the table. This will not be displayed on the web.
- Use <thead>, <tbody>, <tfoot> and <colgroup> to group table rows and columns into meaningful sections
- Associate data cells with their row and column headers
- Use <th> element to create row and column headers.
- Use id attribute to uniquely identify the row and column header cells
- Use scope attribute to associate the header to a row or column
- Use axis attribute to associate a group of cells to row and column header
- Use headers attribute set to the id values in the <td> element to associate the cell with it's header row and column
- Use abbrev attribute within the <th> element to shorten header titles
Using <th> element with scope attribute is sufficient to define the row and column headers for small simple tables. However, for large and complex tables, the table cells should be associated with the header cells.
Example of a Data Tables with Code
