H. HTML Example 3

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. A scope cannot be applied to this header cell since it only refers to part of the column of cells. Any cells that is 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 does not affect its function.

<table border="0" cellspacing="0" cellpadding="0" width="100%">
  <colgroup span="1"></colgroup>
  <colgroup span="3"></colgroup>
  <colgroup span="1"></colgroup>
  <colgroup span="3"></colgroup>
  <colgroup span="1"></colgroup>
  <colgroup span="3"></colgroup>
  <thead>
    <tr>
      <td valign="top"></td>
      <th scope="col" colspan="3" align="center" valign="top"><b>Undergraduate</b></th>
      <td align="center" valign="top"></td>
      <th scope="col" colspan="3" align="center" valign="top"><b>Graduate</b></th>
      <td valign="top"></td>
      <th scope="col" colspan="3" align="center" valign="top"><b>Total</b></th>
    </tr>
    <tr>
      <th scope="col" valign="top"><p align="left"><i><span id="campus">Campus</span>, <span id="year">Year</span></i></p></th>
      <th align="right" scope="col" valign="top"><i>Total Fees</i></th>
      <th align="right" scope="col" valign="top"><i>Amount</i></th>
      <th align="right" scope="col" valign="top"><i>%Change</i></th>
      <td align="right" valign="top"></td>
      <th align="right" scope="col" valign="top"><i>Total Fees</i></th>
      <th align="right" scope="col" valign="top"><i>Amount</i></th>
      <th align="right" scope="col" valign="top"><i>%Change</i></th>
      <td align="right" valign="top"></td>
      <th align="right" scope="col" valign="top"><i>Total Fees</i></th>
      <th align="right" scope="col" valign="top"><i>Amount</i></th>
      <th align="right" scope="col" valign="top"><i>%Change</i></th>
    </tr>
    <tr>
      <td colspan="12" valign="top"><hr /></td>
    </tr>
  </thead>
  <tr>
    <th valign="top" headers="campus" scope="rowgroup" colspan="12"><p align="left"><b>Springfield</b></p></th>
  </tr>
  <tr>
    <td valign="top" align="left" scope="row" headers="year">FY00 Budget</td>
    <td align="right" valign="top">$39,475,010</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">$2,914,175</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">$42,389,185</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
  </tr>
  <tr>
    <td valign="top" align="left" scope="row" headers="year">FY01 Projection</td>
    <td align="right" valign="top">39,379,824</td>
    <td align="right" valign="top">($95,186)</td>
    <td align="right" valign="top">-0.24</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">3,042,995</td>
    <td align="right" valign="top">$128,820</td>
    <td align="right" valign="top">4.42</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">42,422,819</td>
    <td align="right" valign="top">$33,634</td>
    <td align="right" valign="top">0.08</td>
  </tr>
  <tr>
    <td valign="top" align="left" scope="row" headers="year">FY02 Projection</td>
    <td align="right" valign="top">39,292,797</td>
    <td align="right" valign="top">(87,027)</td>
    <td align="right" valign="top">-0.22</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">3,068,353</td>
    <td align="right" valign="top">25,358</td>
    <td align="right" valign="top">0.83</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">42,361,150</td>
    <td align="right" valign="top">(61,669)</td>
    <td align="right" valign="top">(0.15)</td>
  </tr>
  <tr>
    <td valign="top" align="left" scope="row" headers="year">FY03 Projection</td>
    <td align="right" valign="top">39,096,986</td>
    <td align="right" valign="top">(195,811)</td>
    <td align="right" valign="top">-0.50</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">3,093,711</td>
    <td align="right" valign="top">25,358</td>
    <td align="right" valign="top">0.83</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">42,190,697</td>
    <td align="right" valign="top">(170,453)</td>
    <td align="right" valign="top">(0.40)</td>
  </tr>
  <tr>
    <td valign="top" align="left" scope="row" headers="year">FY04 Projection</td>
    <td align="right" valign="top">38,860,381</td>
    <td align="right" valign="top">(236,605)</td>
    <td align="right" valign="top">-0.61</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">3,119,069</td>
    <td align="right" valign="top">25,358</td>
    <td align="right" valign="top">0.82</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">41,979,450</td>
    <td align="right" valign="top">(211,247)</td>
    <td align="right" valign="top">(0.50)</td>
  </tr>
  <tr>
    <td valign="top" align="left" scope="row" headers="year">FY05 Projection</td>
    <td align="right" valign="top">38,645,533</td>
    <td align="right" valign="top">(214,848)</td>
    <td align="right" valign="top">-0.55</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">3,144,427</td>
    <td align="right" valign="top">25,358</td>
    <td align="right" valign="top">0.81</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">41,789,960</td>
    <td align="right" valign="top">(189,490)</td>
    <td align="right" valign="top">(0.45)</td>
  </tr>
  <tr>
    <td valign="top" align="left" scope="row" headers="year">FY06 Projection</td>
    <td align="right" valign="top">38,463,320</td>
    <td align="right" valign="top">(182,213)</td>
    <td align="right" valign="top">-0.47</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">3,169,785</td>
    <td align="right" valign="top">25,358</td>
    <td align="right" valign="top">0.81</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">41,633,105</td>
    <td align="right" valign="top">(156,855)</td>
    <td align="right" valign="top">(0.38)</td>
  </tr>
  <tr>
    <td valign="top" colspan="2" scope="row">Change from FY00 to FY06</td>
    <td align="right" valign="top">(1,011,690)</td>
    <td align="right" valign="top">-2.56</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">255,610</td>
    <td align="right" valign="top">8.77</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">(756,080)</td>
    <td align="right" valign="top">(1.78)</td>
  </tr>
  <tr>
    <td valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
  </tr>
  <tr>
    <th valign="top" headers="campus" scope="rowgroup" colspan="12"><p align="left"><b>West Plains</b></p></th>
  </tr>
  <tr>
    <td valign="top" align="left" scope="row" headers="year">FY00 Budget</td>
    <td align="right" valign="top">$1,673,209</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">$1,673,209</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
  </tr>
  <tr>
    <td valign="top" align="left" scope="row" headers="year">FY01 Projection</td>
    <td align="right" valign="top">1,732,966</td>
    <td align="right" valign="top">$59,757</td>
    <td align="right" valign="top">3.57</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">1,732,966</td>
    <td align="right" valign="top">$59,757</td>
    <td align="right" valign="top">3.57</td>
  </tr>
  <tr>
    <td valign="top" scope="row" headers="year">FY02 Projection</td>
    <td align="right" valign="top">1,810,651</td>
    <td align="right" valign="top">77,685</td>
    <td align="right" valign="top">4.48</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">1,810,651</td>
    <td align="right" valign="top">77,685</td>
    <td align="right" valign="top">4.48</td>
  </tr>
  <tr>
    <td valign="top" align="left" scope="row" headers="year">FY03 Projection</td>
    <td align="right" valign="top">1,876,384</td>
    <td align="right" valign="top">65,733</td>
    <td align="right" valign="top">3.63</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">1,876,384</td>
    <td align="right" valign="top">65,733</td>
    <td align="right" valign="top">3.63</td>
  </tr>
  <tr>
    <td valign="top" align="left" scope="row" headers="year">FY04 Projection</td>
    <td align="right" valign="top">1,948,093</td>
    <td align="right" valign="top">71,709</td>
    <td align="right" valign="top">3.82</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">1,948,093</td>
    <td align="right" valign="top">71,709</td>
    <td align="right" valign="top">3.82</td>
  </tr>
  <tr>
    <td valign="top" align="left" scope="row" headers="year">FY05 Projection</td>
    <td align="right" valign="top">2,019,802</td>
    <td align="right" valign="top">71,709</td>
    <td align="right" valign="top">3.68</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">2,019,802</td>
    <td align="right" valign="top">71,709</td>
    <td align="right" valign="top">3.68</td>
  </tr>
  <tr>
    <td valign="top" scope="row" headers="year">FY06 Projection</td>
    <td align="right" valign="top">2,091,511</td>
    <td align="right" valign="top">71,709</td>
    <td align="right" valign="top">3.55</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">2,091,511</td>
    <td align="right" valign="top">71,709</td>
    <td align="right" valign="top">3.55</td>
  </tr>
  <tr>
    <td valign="top" colspan="2" scope="row">Change from FY00 to FY06</td>
    <td align="right" valign="top">418,302</td>
    <td align="right" valign="top">25.00</td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top"></td>
    <td align="right" valign="top">418,302</td>
    <td align="right" valign="top">25.00</td>
  </tr>
</table>