Skip to Main Content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

Technology Training and Resources

Compliant Tables

 WinterSummer
 MorningAfternoonMorningAfternoon
Denver 9 36 55 95
Washington 20 40 70 92

<! -- Compliant example #1 (using scope attributes): -->

<p></p>
<table border="1">
<tbody>
<tr><th>&nbsp;</th>

<th colspan="2" scope="col">Winter</th>

<th colspan="2" scope="col">Summer</th></tr>
<tr><th>&nbsp;</th>

<th scope="col">Morning</th

><th scope="col">Afternoon</th>

<th scope="col">Morning</th>

<th scope="col">Afternoon</th></tr>
<tr>
<td scope="row">Denver</td>
<td>9</td>
<td>36</td>
<td>55</td>
<td>95</td>
</tr>
<tr>
<td scope="row">Washington</td>
<td>20</td>
<td>40</td>
<td>70</td>
<td>92</td>
</tr>
</tbody>
</table>

Compliant Table

 WinterSummer
 MorningAfternoonMorningAfternoon
Denver 9 36 55 95
Washington 20 40 70 92

 

<!-- Example #2 using the id and headers method -->

<table>
<tr>
<th>&nbsp;</th>
<th colspan="2" id="winter" >Winter</th>
<th colspan="2" id="summer" >Summer</th>
</tr>
<tr>
<th>&nbsp;</th>
<th id="am1" >Morning</th>
<th id="pm1" >Afternoon</th>
<th id="am2" >Morning</th>
<th id="pm2" >Afternoon</th>
</tr>
<tr>
<td id="denver" >Denber</td>
<td headers="denver am1 winter" >9</td>
<td headers="denver pm1 winter" >36</td>
<td headers="denver am2 summer" >55</td>
<td headers="denver pm2 summer" >95</td>
</tr>
<tr>
<td id="washington" >washington</td>
<td headers="washington am1 winter" >20</td>
<td headers="washington pm1 winter" >40</td>
<td headers="washington am2 summer" >70</td>
<td headers="washington pm2 summer" >92</td>
</tr>
</table>

Non-compliant table

 WinterSummer
 MorningAfternoonMorningAfternoon
Denver 9 36 55 95
Washington 20 40 70 92

<! -- Non-Compliant example #1 (using scope attributes): -->
<table>
<tr>
<th>&nbsp;</th>
<th colspan="2">Winter</th>
<th colspan="2">Summer</th>
</tr>
<tr>
<th>&nbsp;</th>
<th>Morning</th>
<th>Afternoon</th>
<th>Morning</th>
<th>Afternoon</th>
</tr>
<tr>
<td>Denver</td>
<td>9</td>
<td>36</td>
<td>55</td>
<td>95</td>
</tr>
<tr>
<td>Washington</td>
<td>20</td>
<td>40</td>
<td>70</td>
<td>92</td>
</tr>
</table>

LibGuide Table

Winter

Summer

Morning    Afternoon Morning Afternoon
Denver 9 36 55 95
Washington 20    40 70 92

<table style="width: 522px; height: 88px;" border="1">
<tbody>
<tr>
<td></td>
<td>Winter</td>
<td></td>
<td>
<p>Summer</p>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td>Morning</td>
<td>Afternoon</td>
<td>Morning</td>
<td>Afternoon</td>
</tr>
<tr>
<td>Denver</td>
<td>9</td>
<td>36</td>
<td>55</td>
<td>95</td>
</tr>
<tr>
<td>Washington</td>
<td>20</td>
<td>40</td>
<td>70</td>
<td>92</td>
</tr>
</tbody>
</table>