Skip Navigation

Accessibility Example 6. C.

6.  Create tables that work properly. 

C. REQUIRED: For data tables that have two or more logical views of row or column headers, use markup to associate data cells and header cells. 

In HTML, use THEAD, TFOOT, and TBODY to group rows, COLS and COLGROUP to group columns, and the "axis," "scope," and "headers" attributes, to describe more complex relationships among data. 

Use THEAD and TFOOT to define a group of rows to form a header or footer for a table. Use TBODY to group rows in the body of the table. 

Use COLGROUP in conjunction with the SPAN= attribute to identify column groups (The example shows two groups of columns, the first having two columns, the second with only one column). Use the COLS= attribute in the <TABLE> tag to specify the number of columns in a table. 

  What you see:

 

Web Authoring
Software for Creating Web Sites Descriptive Information
Type Product Purpose Price
Some software vendors offer educational discounts.
Graphics Adobe Photoshop Graphics program for creating, retouching, and editing images. $?
Macromedia Fireworks Program for designing Web graphics. $?
HTML Authoring Programs Microsoft FrontPage HTML editor for visually designing and managing Web sites and pages. $?
Macromedia Dreamweaver HTML editor for visually designing and managing Web sites and pages. $?


FrontPage 2000 Instructions:

  1. Create table.
  2. Put cursor in cell where header will be located.
  3. Type in header text.
  4. Right click and choose "Cell Properties."
  5. Under "Layout," check "Header cell."
  6. Create a caption (the caption is called "Web Authoring" in this example), click to select the table, then choose Table, Insert, Caption. The insertion point will be moved above the table so you can add the caption.
  7. Change the span of the column by right clicking in the cell and choosing "Cell Properties".
  8. Under "Layout" change "columns spanned" to the desired number.
  9. THEAD, TBODY, TFOOT, and COLGROUP tags will need to be entered manually in the HTML view.

Dreamweaver 4 Instructions:

  1. Create table.
  2. Put cursor in cell where header will be located.
  3. Type in header text.
  4. Check "Header" in the Properties Window.
  5. Create a caption (the caption is called "Web Authoring" in this example). Go to the Code view and manually enter the CAPTION tag.
  6. Change the span of the column. First highlight the cells to be changed.
    To merge cells, choose "Merge Cell" under "Modify, Table" or click the "Merge Cell" button in the Properties Window.
    To split cells, choose "Split Cell" under "Modify, Table" or click the "Split Cell" button in the Properties Window.
  7. THEAD, TBODY, TFOOT, and COLGROUP tags will need to be entered manually in the Code view.

HTML Source Code:

<table border="1">
<caption align="top"> <b>Web Authoring</b></caption>
<colgroup span="2">
<colgroup span="2">
<thead>
<tr>
<th colspan="2">Software for Creating Web Sites</th>
<th colspan="2">Descriptive Information</th>
</tr>
<tr>
<th>Type</th>
<th>Product</th>
<th>Purpose</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Graphics</td>
<td>Adobe Photoshop</td>
<td>Graphics program for creating, retouching, and editing images. </td>
<td>$?</td>
</tr>
<tr>
<td>Macromedia Fireworks</td>
<td>Program for designing Web graphics.</td>
<td>$?</td>
</tr>
<tr>
<td rowspan="2">HTML Authoring Programs</td>
<td>Microsoft FrontPage</td>
<td>HTML editor for visually designing and managing Web sites and pages. </td>
<td>$?</td>
</tr>
<tr>
<td>Macromedia Dreamweaver</td>
<td>HTML editor for visually designing and managing Web sites and pages. </td>
<td>$?</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Some software vendors offer educational discounts. </td>
</tr>
</tfoot>
</table>