EPAFiles: Web Design
Styles for Data Tables, Template 4
Note: EPA no longer updates this information, but it may be useful as a reference or resource.
EPA builds all web content in the Drupal WebCMS as of January 2013. All new microsites and resource directories will be created using Drupal WebCMS. There is still content on EPA's legacy servers and this content will be maintained there until it is transformed and moved into the Drupal WebCMS. This information on styles and look and feel only applies to the existing content using Template 4 or older versions of EPA's template. Information for building new content is found in the EPA Web Guide.
Note: These styles apply to Template 4 pages.
Tables, if given a class of "table zebra", will be formatted like Table 2 and 3 (
<table class="table zebra">). If given a class of "tablebord zebra", will be formatted like Table 1 (
<table class="tablebord zebra">). If you just want alternating colored rows, simply give your table a class of "zebra" (
There are a number of methods for creating accessible data tables. Here are two.
Tables with Borders
This table is marked up using
- Adding a
scopeattribute with the value
colto column headers links them to the data cells in the same column.
- Adding a
scopewith the value
rowto row headers makes them headers for the data cells to their right.
This method is easiest for simple tables.
Tables without Borders
These tables are marked up using
headers. This technique also connects data cells with their header.
- Each column header gets a unique id.
headersattribute is then added to each data cell.
- This attribute contains a list, separated by spaces, of the id of every column header that applies to that data cell.
This technique is more complicated, and can be reserved for very complex or irregular tables.
Table 2 and 3 demonstrate
|Leanne Stahl||Washington, DC||(202) firstname.lastname@example.org|
|Hilary Snook||EPA Region 1
(CT, ME, MA, NH, RI, VT)
|James P. Kurtenbach||EPA Region 2
Please look at the source code to see the formatting for these tables. Good overviews of creating accessible tables are easy to find.