Simple Data Table Example
Accessibility Features of Example
thelements are used for header cells.idattributes ofthelements are defined to uniquely identify them.headersattribute of each data cell represented bytdelement references theidattributes of thethelements that are the headers for the data cell.summaryattribute is defined on thetableelement to provide the conclusion from the data contained in the table.
Example
Use of Microsoft Office to Create Web Materials
| Power Point | Word | Excel | |
|---|---|---|---|
| Instructors | 71% | 87.9% | 51.4% |
| Web Developers | 43.7% | 84,9% | 43.7% |
| Disability Support | 57.7% | 73.1% | 46.2% |
| Others | 42.9% | 78.6% | 40.5% |
HTML Code
<h3>Use of Microsoft Office to Create Web Materials</h3>
<table summary="70% of Instructors use Microsoft Office to create instructional web materials" border="1">
<thead>
<tr>
<td></td>
<th id="ID0">Power Point</th>
<th id="ID2" scope="col">Word</th>
<th id="ID3" scope="col">Excel</th>
</tr>
</thead>
<tbody>
<tr>
<th id="ID1">Instructors</th>
<td headers="ID0 ID1">71%</td>
<td headers="ID2 ID1">87.9%</td>
<td headers="ID3 ID1">51.4%</td>
</tr>
<tr>
<th id="ID4">Web Developers</th>
<td headers="ID0 ID4">43.7%</td>
<td headers="ID2 ID4">84,9%</td>
<td headers="ID3 ID4">43.7%</td>
</tr>
<tr>
<th id="ID5">Disability Support</th>
<td headers="ID0 ID5">57.7%</td>
<td headers="ID2 ID5">73.1%</td>
<td headers="ID3 ID5">46.2%</td>
</tr>
<tr>
<th id="ID6">Others</th>
<td headers="ID0 ID6">42.9%</td>
<td headers="ID2 ID6">78.6%</td>
<td headers="ID3 ID6">40.5%</td>
</tr>
</tbody>
</table>
<table summary="70% of Instructors use Microsoft Office to create instructional web materials" border="1">
<thead>
<tr>
<td></td>
<th id="ID0">Power Point</th>
<th id="ID2" scope="col">Word</th>
<th id="ID3" scope="col">Excel</th>
</tr>
</thead>
<tbody>
<tr>
<th id="ID1">Instructors</th>
<td headers="ID0 ID1">71%</td>
<td headers="ID2 ID1">87.9%</td>
<td headers="ID3 ID1">51.4%</td>
</tr>
<tr>
<th id="ID4">Web Developers</th>
<td headers="ID0 ID4">43.7%</td>
<td headers="ID2 ID4">84,9%</td>
<td headers="ID3 ID4">43.7%</td>
</tr>
<tr>
<th id="ID5">Disability Support</th>
<td headers="ID0 ID5">57.7%</td>
<td headers="ID2 ID5">73.1%</td>
<td headers="ID3 ID5">46.2%</td>
</tr>
<tr>
<th id="ID6">Others</th>
<td headers="ID0 ID6">42.9%</td>
<td headers="ID2 ID6">78.6%</td>
<td headers="ID3 ID6">40.5%</td>
</tr>
</tbody>
</table>
