Jump to main content or area navigation.

Contact Us

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" (<table class="zebra">).

There are a number of methods for creating accessible data tables. Here are two.


Tables with Borders

This table is marked up using scope.

  • Adding a scope attribute with the value col to column headers links them to the data cells in the same column.
  • Adding a scope with the value row to row headers makes them headers for the data cells to their right.

This method is easiest for simple tables.

Example Table 1: Company data
Company Employees Founded
ACME Inc 1000 1947
XYZ Corp 2000 1973
JMJ Pensions 1 1986

Top of Page


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.
  • A headers attribute 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 headers.

Example Table 2: Contacts for the Fish Tissue Study
Name Location Phone Number Email
Leanne Stahl Washington, DC (202) 566-0404 stahl.leanne@epa.gov
Hilary Snook EPA Region 1
(CT, ME, MA, NH, RI, VT)
(617) 918-8670 snook.hilary@epa.gov
James P. Kurtenbach EPA Region 2
(NJ, NY)
(732) 321-6695 kurtenbach.james@epa.gov

Top of Page

Example Table 3: Company data
Employees Founded
Men Women
ACME Inc 700 300 1947
XYZ Corp 1200 800 1973
JMJ Pensions 0 1 1986

Top of Page

Description

Please look at the source code to see the formatting for these tables. Good overviews of creating accessible tables Exit EPA Disclaimer are easy to find.

Top of Page

For help with your epa.gov web design, contact the Web Template Workgroup.

Jump to main content.