Printer-friendly page
Screen-friendly pageComplex Data Table Example
Accessibility Features of Example
thelements are used for header cells.idattributes ofthelements are defined to uniquely identify them.headersattribute of each data cell represented bytdelement references theidattributes of thethelements that are the headers for the data cell.summaryattribute of thetableelement summarizes the data represented.
Example
Purchasing Authorization Form
| Requester Information | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| Name | Jon Smith | Date | 9/9/2005 | ||||||
| Department | Customer Service | ||||||||
| 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 | ||||
| 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 | ||||||
HTML Code
<h3>Purchasing Authorization Form</h3>
<table class="complex" cellpadding="2" cellspacing="0" summary="Purchase Receipt Information">
<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>
<table class="complex" cellpadding="2" cellspacing="0" summary="Purchase Receipt Information">
<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>
CSS Code
/* CSS Document */
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;
}
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;
}