WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Data Tables in Higher Ed

for

From: Corbett, James
Date: Oct 11, 2012 9:24AM

Pamela:

Your wish is my command.

<html>
<head>
<title>
Adaptive Technologies and the Web (Tables Example)
</title>
</head>
<body>
<h1>Plain Table</h1>
<table width="100%" cellpadding="4" cellspacing="1" style="border: 1px solid #ccc">
<tr>
<td>Start Date</td>
<td>Language</td>
<td>Cost</td>
<td>Location</td>
<td>Type</td>
<td>Status</td>
</tr>
<tr>
<td>2011-10-19</td>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<td>2011-10-26</td>
<td>French</td>
<td>$900.00</td>
<td>Gatineau</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<td>2011-11-07</td>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<td>2011-11-14</td>
<td>French</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<td>2011-11-23</td>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<td>2011-11-28</td>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<td>2011-12-05</td>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<td>2011-12-19</td>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<td>2012-02-21</td>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
</table>

<h1>Table with markup and summary</h1>
<table summary="List of courses available" width="100%" cellpadding="4" cellspacing="1" style="border: 1px solid #ccc">
<tr>
<th>Start Date</th>
<th>Language</th>
<th>Cost</th>
<th>Location</th>
<th>Type</th>
<th>Status</th>
</tr>
<tr>
<th>2011-10-19</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-10-26</th>
<td>French</td>
<td>$900.00</td>
<td>Gatineau</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-11-07</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-11-14</th>
<td>French</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-11-23</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-11-28</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-12-05</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-12-19</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2012-02-21</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
</table>

<h1>Table with markup and scope on header</h1>
<table summary="List of courses available" width="100%" cellpadding="4" cellspacing="1" style="border: 1px solid #ccc">
<tr>
<th scope="col">Start Date</th>
<th scope="col">Language</th>
<th scope="col">Cost</th>
<th scope="col">Location</th>
<th scope="col">Type</th>
<th scope="col">Status</th>
</tr>
<tr>
<th>2011-10-19</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-10-26</th>
<td>French</td>
<td>$900.00</td>
<td>Gatineau</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-11-07</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-11-14</th>
<td>French</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-11-23</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-11-28</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-12-05</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2011-12-19</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th>2012-02-21</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
</table>

<h1>Table with markup and full scope</h1>
<table summary="List of courses available" width="100%" cellpadding="4" cellspacing="1" style="border: 1px solid #ccc">
<tr>
<th scope="col">Start Date</th>
<th scope="col">Language</th>
<th scope="col">Cost</th>
<th scope="col">Location</th>
<th scope="col">Type</th>
<th scope="col">Status</th>
</tr>
<tr>
<th scope="row">2011-10-19</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-10-26</th>
<td>French</td>
<td>$900.00</td>
<td>Gatineau</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-11-07</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-11-14</th>
<td>French</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-11-23</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-11-28</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-12-05</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-12-19</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2012-02-21</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
</table>

<h1>Table with proper header and scope</h1>
<table summary="List of courses available" width="100%" cellpadding="4" cellspacing="1" style="border: 1px solid #ccc">
<tr>
<th scope="col">Start Date</th>
<th scope="col">Language</th>
<th scope="col">Cost</th>
<th scope="col">Location</th>
<th scope="col">Type</th>
<th scope="col">Status</th>
</tr>
<tr>
<th scope="row">2011-10-19</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-10-26</th>
<td>French</td>
<td>$900.00</td>
<td>Gatineau</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-11-07</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-11-14</th>
<td>French</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-11-23</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-11-28</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-12-05</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2011-12-19</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
<tr>
<th scope="row">2012-02-21</th>
<td>English</td>
<td>$900.00</td>
<td>Ottawa</td>
<td>Classroom</td>
<td>Open</td>
</tr>
</table>

<h1>Table using id</h1>
<table summary="List of courses available" width="100%" cellpadding="4" cellspacing="1" style="border: 1px solid #ccc">
<tr>
<th id="sd">Start Date</th>
<th id="ln">Language</th>
<th id="c">Cost</th>
<th id="l">Location</th>
<th id="t">Type</th>
<th id="s">Status</th>
</tr>
<tr>
<td headers="sd">2011-10-19</td>
<td headers="ln">English</td>
<td headers="c">$900.00</td>
<td headers="l">Ottawa</td>
<td headers="t">Classroom</td>
<td headers="s">Open</td>
</tr>
<tr>
<td headers="sd">2011-10-26</td>
<td headers="ln">French</td>
<td headers="c">$900.00</td>
<td headers="l">Gatineau</td>
<td headers="t">Classroom</td>
<td headers="s">Open</td>
</tr>
<tr>
<td headers="sd">2011-11-07</td>
<td headers="ln">English</td>
<td headers="c">$900.00</td>
<td headers="l">Ottawa</td>
<td headers="t">Classroom</td>
<td headers="s">Open</td>
</tr>
<tr>
<td headers="sd">2011-11-14</td>
<td headers="ln">French</td>
<td headers="c">$900.00</td>
<td headers="l">Ottawa</td>
<td headers="t">Classroom</td>
<td headers="s">Open</td>
</tr>
<tr>
<td headers="sd">2011-11-23</td>
<td headers="ln">English</td>
<td headers="c">$900.00</td>
<td headers="l">Ottawa</td>
<td headers="t">Classroom</td>
<td headers="s">Open</td>
</tr>
<tr>
<td headers="sd">2011-11-28</td>
<td headers="ln">English</td>
<td headers="c">$900.00</td>
<td headers="l">Ottawa</td>
<td headers="t">Classroom</td>
<td headers="s">Open</td>
</tr>
<tr>
<td headers="sd">2011-12-05</td>
<td headers="ln">English</td>
<td headers="c">$900.00</td>
<td headers="l">Ottawa</td>
<td headers="t">Classroom</td>
<td headers="s">Open</td>
</tr>
<tr>
<td headers="sd">2011-12-19</td>
<td headers="ln">English</td>
<td headers="c">$900.00</td>
<td headers="l">Ottawa</td>
<td headers="t">Classroom</td>
<td headers="s">Open</td>
</tr>
<tr>
<td headers="sd">2012-02-21</td>
<td headers="ln">English</td>
<td headers="c">$900.00</td>
<td headers="l">Ottawa</td>
<td headers="t">Classroom</td>
<td headers="s">Open</td>
</tr>
</table>

</body>
</html>