|
|
 |
 |
| |
Basic
Web Accessibility Guidelines
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 |
| 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. |
$? |
| Some software vendors offer educational discounts. |
|
|
FrontPage 2000 Instructions:
- Create table.
- Put cursor in cell where header will be located.
- Type in header text.
- Right click and choose "Cell Properties."
- Under "Layout," check "Header cell."
- 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.
- Change the span of the column by right clicking in the cell and
choosing "Cell Properties".
- Under "Layout" change "columns spanned" to
the desired number.
- THEAD, TBODY,
TFOOT, and COLGROUP tags will need to be entered
manually in the HTML view.
Dreamweaver 4 Instructions:
- Create table.
- Put cursor in cell where header will be located.
- Type in header text.
- Check "Header" in the Properties Window.
- Create a caption (the caption is called "Web Authoring"
in this example). Go to the Code view and manually enter the CAPTION
tag.
- 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.
- 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>
|
Back to Basic Guidelines
|
|
|
|
|
|
|