H. HTML Example 2

Below is the technique to add headers and scopes to example 2 of Checkpoint (h).

TRIP
date

MealsRoomTrans.Total
San Jose
25 Aug 97 37.74 112.00 45.00
26 Aug 97 27.28 112.00 45.00
Subtotal 65.02 224.00 90.00 379.02
Seattle
27 Aug 97 96.25 109.00 36.00
28 Aug 97 35.00 109.00 36.00
Subtotal 131.25 218.00 72.00 421.25
Totals 196.27 442.00 162.00 800.27

The following code shows the use of the scope attribute to define header to data relations. The <THEAD> tag is used to define a tables header section. All of the table headers need a scope applied. If a <THEAD> tag is used, the <TBODY> tag must also be used to properly separate the different sections of the table.

The <SPAN> tag can be used to have two different ID tags for multiple headers in the same cell. In this example t1-r1-l1 refers to TRIP and t1-r1-l2 refers to date. A scope cannot be applied to this header since it only refers to part of the column of cells. Any cells that are associated with TRIP or Date must use the HEADERS attribute to refer to the correct header. Note: a scope can be applied to a TD tag to avoid automatic formatting of the header; this is specific to this example. This does not affect its function.

<TABLE>
  <CAPTION>TRAVEL EXPENSES (actual cost, US$)</CAPTION>

  <THEAD>
    <TR>
      <TH><P><SPAN ID="t1-r1-l1">TRIP</SPAN>, <BR><SPAN ID="t1-r1-l2">date</SPAN></P></TH>
      <TH SCOPE="col">Meals</TH>
      <TH SCOPE="col">Room</TH>
      <TH SCOPE="col"><ABBR title="Transportation">Trans.</ABBR></TH>
      <TH SCOPE="col">Total</TH>
    </TR>
  </THEAD>

  <TBODY>
    <TR>
      <TH SCOPE="rowgroup" HEADERS="t1-r1-l1">San Jose</TH>
    </TR>

    <TR>
      <TD SCOPE="row" HEADERS="t1-r1-l2"> 25 Aug 97</TD>
      <TD>37.74</TD>
      <TD>112.00</TD>
      <TD>45.00</TD>
    </TR>

    <TR>
      <TD SCOPE="row" HEADERS="t1-r1-l2"> 26 Aug 97</TD>
      <TD>27.28</TD>
      <TD>112.00</TD>
      <TD>45.00</TD>
    </TR>

    <TR>
      <TD SCOPE="row">Subtotal</TD>
      <TD>65.02</TD>
      <TD>224.00</TD>
      <TD>90.00</TD>
      <TD>379.02</TD>
    </TR>
  </TBODY>

  <TBODY>
    <TR>
      <TH SCOPE="rowgroup" HEADERS="t1-r1-l1">Seattle</TH>
    </TR>

    <TR>
      <TD SCOPE="row" HEADERS="t1-r1-l2"> 27 Aug 97</TD>
      <TD>96.25</TD>
      <TD>109.00</TD>
      <TD>36.00</TD>
    </TR>

    <TR>
      <TD SCOPE="row" HEADERS="t1-r1-l2"> 28 Aug 97</TD>
      <TD>35.00</TD>
      <TD>109.00</TD>
      <TD>36.00</TD>
    </TR>

    <TR>
      <TD SCOPE="row">Subtotal</TD>
      <TD>131.25</TD>
      <TD>218.00</TD>
      <TD>72.00</TD>
      <TD>421.25</TD>
    </TR>
  </TBODY>

  <TBODY>
    <TR>
      <TH SCOPE="row">Totals</TH>
      <TD>196.27</TD>
      <TD>442.00</TD>
      <TD>162.00</TD>
      <TD>800.27</TD>
    </TR>
  </TBODY>
</TABLE>

This page adopted from the Curriculum for Web Content Accessibility Guidelines 1.0, Copyright © 2000 W3C (MIT, INRIA, Keio), All Rights Reserved.