| Name | Cups | Type of Coffee | Sugar? |
|---|---|---|---|
| T. Sexton | 10 | Espresso | No |
| J. Dinnen | 5 | Decaf | Yes |
This example shows how to associate data cells (created with TD) with their corresponding headers by means of the "headers" attribute. The "headers" attribute specifies a list of header cells (row and column labels) associated with the current data cell. This requires each header cell to have an "id" attribute.
Use the CAPTION attribute for the TABLE tag, and/or give a summary of the table. The CAPTION attribute, illustrated below, will display for the person seeing the table, and it will be there also for assistive technologies. The SUMMARY attribute can be used with the table, as shown below, but it does not show visually on current browsers. See HTML code below:
<TABLE border="1"
LONGDESC="descriptions/coffee-table-longdesc.html" summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar."> <CAPTION>Cups of coffee consumed by each senator
</CAPTION> <TR> <TH id="header1">Name</TH> <TH id="header2">Cups</TH> <TH id="header3" abbr="Type">Type of Coffee</TH> <TH id="header4">Sugar?</TH> <TR> <TD headers="header1">T. Sexton</TD> <TD headers="header2">10</TD> <TD headers="header3">Espresso</TD> <TD headers="header4">No</TD> <TR> <TD headers="header1">J. Dinnen</TD> <TD headers="header2">5</TD> <TD headers="header3">Decaf</TD> <TD headers="header4">Yes</TD> </TABLE>
End example.
A speech synthesizer might render this tables as follows:
Caption: Cups of coffee consumed by each senator
Summary: This table charts the number of cups of coffee
consumed by each senator, the type of coffee
(decaf or regular), and whether taken with sugar.
Name: T. Sexton, Cups: 10, Type: Espresso, Sugar: No
Name: J. Dinnen, Cups: 5, Type: Decaf, Sugar: Yes
A visual user agent might render this table as follows:
Back to Top