Complex Data Tables

Complex tabular data tables are tables where the relationships between header cells and data cells are more complex than just the first row of cells heading columns or the first column of cells heading rows.

HTML Markup

table

The table element is the container for tabular data markup.

table:summary

The summary attribute can be used to provide a summary of what the author wanted the user to conclude from viewing the data in the table.

caption

The caption element is required to give the data table a unique title to aid in navigation to the table and for differentiating table markup used for layout from data tables.

th and td

The th element is for header cells and td element for data cells in a tabular data table.

th:id

The id attribute must be used to uniquely identify each header cell and is used in conjunction with the headers attribute to indicate the headers for a particular data cell.

td:headers

The headers attribute is used on td cells to point to the id of header cells. Even on simple tables this is important since screen readers use the information to read header cell information when users navigate data tables.

th:scope

The scope attribute can only have one of two values "row" and "col" usually provides the same information as the th element since:

If the th element is at the top of a column the assumption is that the header is for the data cells in the column in a simple data table.
If the th elelmen is at the first cell in a row the assumption is that the header is for the data cells in the row in a simple data table.

The main place where scope is helpful is in the first cell of a data table where it may be ambiguous if the th is a column or row header.

Related Accessibility Requirements

Section 508: 1194.22 (g) Row and column headers shall be identified for data tables.; 1194.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.
Web Content Accessibility Guidelines (WCAG 1.0)
: 5.1 For data tables, identify row and column headers. [Priority 1]; 5.2 For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells. [Priority 1]; 5.5 Provide summaries for tables [Priority 3]; 5.6 Provide abbreviations for header labels [Priority 3]

Example Complex Table

Purchasing Authorization Form
Requester Information
Name	Jon Smith						Date	9/9/2005
Department	Customer Service
E-mail	jon.smith@stateu.edu			Phone	(123) 456-7890
Supplier Information
Name	Acme Computer Supplies
Address 1	1234 Business Way
Address 2
City	Somewhere		State	IL	Zip Code			61820
E-mail	order@acmesupply.edu			Web	www.acmesupply.edu
Phone	(123) 222-3344			Fax	(123) 222-3355
Items
Item #	Part Number	Description				Quantity	Unit Cost	Total Cost
1	197-540501	Toner Cartridge for LaserJet 4100 Series 6000 Page Duty Cycle				2	$29.95	$59.90
2	555-013097	Ink Cartridge color for Epson Stylus C62				3	$27.00	$81.00
3	555-0167213	Parallel Printer Cable 10ft				1	$6.00	$6.00
Sub-Total								$146.90
Tax								$10.28
Shipping								$15.80
Total								$172.98
Approval
Person	Sara Johnson						Date	9/7/2005

CSS Source Code

table.complex {
  border-left: 1px solid #808080;
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
}

table.complex caption {
  padding: .25em;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #808080;
  background-color: #FFFFFF;
}

table.complex td, table.complex th {
  padding: .125em;
  margin: 0;
  width: 10%;
  background-color: #FFFFFF;
  border-right: 1px solid #C0C0C0;
  border-top: 1px solid #C0C0C0;
  border-bottom: 1px solid #C0C0C0;
}

table.complex th.label {
  text-align: right;
  padding-right: .25em;
}

table.complex th.title {
  text-align: center;
}

table.complex td.qty {
  text-align: center;
}

table.complex td.cost, table.complex th.approval {
  text-align: right;
  padding-right: .25em;
}

table.complex td.total {
  font-weight: bold;
  text-align: right;
  padding-right: .25em;
}

table.complex th.sub {
  text-align: right;
  padding-right: .25em;
}

table.complex th.sect {
  text-align: Left;
  background-color: #C0C0C0;
  border-top: 1px solid #808080;
}

HTML Source Code

<table class="complex" cellpadding="2" cellspacing="0">
<caption>Purchasing Authorization Form</caption>
<tbody><tr>
  <th class="sect" colspan="10" id="ri">Requester Information</th>
</tr>

<tr>
  <th colspan="1" id="name" class="label">Name</th>
  <td colspan="7" headers="name">Jon Smith</td>
  <th colspan="1" id="date" class="label">Date</th>
  <td colspan="1" headers="date">9/9/2005</td>
</tr>

<tr>
  <th colspan="1" id="dept" class="label">Department</th>
  <td colspan="9" headers="ri dept">Customer Service</td>
</tr>

<tr>
  <th colspan="1" id="remail" class="label">E-mail</th>
  <td colspan="4" headers="ri remail">jon.smith@stateu.edu</td>
  <th colspan="1" id="rphone" class="label">Phone</th>
  <td colspan="4" headers="ri rphone">(123) 456-7890</td>
</tr>

<tr>
  <th class="sect" colspan="10" id="si">Supplier Information</th>
</tr>

<tr>
  <th colspan="1" id="cn" class="label">Name</th>
  <td colspan="9" headers="si cn">Acme Computer Supplies</td>
</tr>

<tr>
  <th colspan="1" id="ad1" class="label">Address 1</th>
  <td colspan="9" headers="si ad1">1234 Business Way</td>
</tr>

<tr>
  <th colspan="1" id="ad2" class="label">Address 2</th>
  <td colspan="9" headers="si ad2"> </td>
</tr>

<tr>
  <th colspan="1" id="city" class="label">City</th>
  <td colspan="3" headers="si city">Somewhere</td>
  <th colspan="1" id="state" class="label">State</th>
  <td colspan="1" headers="si state"><abbr title="Illinois">IL</abbr></td>
  <th colspan="3" id="zip" class="label">Zip Code</th>
  <td colspan="1" headers="si zip">61820</td>
</tr>

<tr>
  <th colspan="1" class="label" id="semail">E-mail</th>
  <td colspan="4" headers="si semail">order@acmesupply.edu</td>
  <th colspan="1" id="sweb" class="label">Web</th>
  <td colspan="4" headers="si sweb"><a href="http://www.acmesupply.edu/">www.acmesupply.edu</a></td>
</tr>

<tr>
  <th colspan="1" id="sphone" class="label">Phone</th>
  <td colspan="4" headers="si sphone">(123) 222-3344</td>
  <th colspan="1" id="sfax" class="label">Fax</th>
  <td colspan="4" headers="si sfax">(123) 222-3355</td>
</tr>

<tr>
  <th class="sect" colspan="10" id="items">Items</th>
</tr>

<tr>
  <th class="title" colspan="1" id="itemnum">Item #</th>
  <th colspan="1" class="title" id="part">Part Number</th>
  <th colspan="5" class="title" id="desc">Description</th>
  <th colspan="1" id="qty" class="title">Quantity</th>
  <th colspan="1" id="unit" class="title">Unit Cost</th>
  <th colspan="1" id="totalcost" class="title">Total Cost</th>
</tr>

<tr>
  <th class="title" colspan="1" id="num1">1</th>
  <td class="part" colspan="1" headers="part  num1">197-540501</td>
  <td class="part" colspan="5" headers="desc  num1">Toner Cartridge for LaserJet 4100 Series 6000 Page Duty Cycle </td>
  <td class="qty" colspan="1" headers="qty   num1">2</td>
  <td class="cost" colspan="1" headers="unit  num1">$29.95</td>
  <td class="cost" colspan="1" headers="totalcost num1">$59.90</td>
</tr>

<tr>
  <th class="title" colspan="1" id="num2">2</th>
  <td class="part" colspan="1" headers="part  num2">555-013097</td>
  <td class="part" colspan="5" headers="desc  num2">Ink Cartridge color for Epson Stylus C62 </td>
  <td class="qty" colspan="1" headers="qty   num2">3</td>
  <td class="cost" colspan="1" headers="unit  num2">$27.00</td>
  <td class="cost" colspan="1" headers="totalcost num2">$81.00</td>
</tr>

<tr>
  <th class="title" colspan="1" id="num3">3</th>
  <td class="part" colspan="1" headers="part  num3">555-0167213</td>
  <td class="part" colspan="5" headers="desc  num3">Parallel Printer Cable 10ft </td>
  <td class="qty" colspan="1" headers="qty   num3">1</td>
  <td class="cost" colspan="1" headers="unit  num3">$6.00</td>
  <td class="cost" colspan="1" headers="totalcost num3">$6.00</td>
</tr>

<tr>
  <th class="sub" colspan="9" id="subtotal">Sub-Total</th>
  <td class="cost" colspan="1" headers="subtotal">$146.90</td>
</tr>

<tr>
  <th class="sub" colspan="9" id="tax">Tax</th>
  <td class="cost" colspan="1" headers="tax">$10.28</td>
</tr>

<tr>
  <th class="sub" colspan="9" id="ship">Shipping</th>
  <td class="cost" colspan="1" headers="ship">$15.80</td>
</tr>

<tr>
  <th colspan="9" id="totalall" class="total">Total</th>
  <td class="total" colspan="1" headers="totalall">$172.98</td>
</tr>

<tr>
  <th colspan="10" id="approval" class="sect">Approval</th>
</tr>

<tr>
  <th class="approval" colspan="1" id="appperson">Person</th>
  <td class="approval" colspan="7" headers="approval appperson">Sara Johnson</td>
  <th class="approval" colspan="1" id="appdate">Date</th>
  <td class="approval" colspan="1" headers="approval appdate">9/7/2005</td>
</tr>

</tbody></table>