Page is a not externally linkable
DrDoc - 9:51 pm on Sep 27, 2006 (gmt 0)
I would not want you to leave empty-handed. I have therefore prepared a couple different examples of accessible tables which demonstrate the simplicity of rudimentary accessibility and usability, as applied to tables. You may modify these examples as you wish, and apply each scenario on a personal level as related to your own needs and uses. The first scenario we will look at provides two different ways of authoring the same table. This particular table presents average daily temperatures in Fakeland throughout the year. Multiple years are provided for comparison over time. Although the former example is more explicit due to referencing header data for each cell individually, both examples technically produce the same output. The former uses Next I would like to give you an example of how to utilize THEAD/TFOOT/TBODY sections in your table. There are many more examples which can be given. Both the HTML 4.01 Table Model [w3.org] section and the WCAG [w3.org] contain further information about the various table elements and their attributes. Further examples are also given on those pages.
Accessible Tables
Examples
<table rules="all" frame="box" border="1" cellspacing="0">
<caption>Average Daily Temperature (°C) in Fakeland</caption>
<colgroup>
<col span="2"></col>
<col span="12" width="30"></col>
</colgroup>
<tbody>
<tr>
<th colspan="2" rowspan="2"></th>
<th colspan="12" id="m">Month</th>
</tr>
<tr>
<th id="m1" headers="m">Jan</th>
<th id="m2" headers="m">Feb</th>
<th id="m3" headers="m">Mar</th>
<th id="m4" headers="m">Apr</th>
<th id="m5" headers="m">May</th>
<th id="m6" headers="m">Jun</th>
<th id="m7" headers="m">Jul</th>
<th id="m8" headers="m">Aug</th>
<th id="m9" headers="m">Sep</th>
<th id="m10" headers="m">Oct</th>
<th id="m11" headers="m">Nov</th>
<th id="m12" headers="m">Dec</th>
</tr>
<tr>
<th rowspan="3" id="y">Year</th>
<th id="y1" headers="y">2003</th>
<td headers="m1 y1">-5</td>
<td headers="m2 y1">-2</td>
<td headers="m3 y1">4</td>
<td headers="m4 y1">8</td>
<td headers="m5 y1">12</td>
<td headers="m6 y1">16</td>
<td headers="m7 y1">19</td>
<td headers="m8 y1">21</td>
<td headers="m9 y1">16</td>
<td headers="m10 y1">10</td>
<td headers="m11 y1">3</td>
<td headers="m12 y1">0</td>
</tr>
<tr>
<th id="y2" headers="y">2004</th>
<td headers="m1 y2">-4</td>
<td headers="m2 y2">-3</td>
<td headers="m3 y2">2</td>
<td headers="m4 y2">6</td>
<td headers="m5 y2">11</td>
<td headers="m6 y2">17</td>
<td headers="m7 y2">18</td>
<td headers="m8 y2">20</td>
<td headers="m9 y2">15</td>
<td headers="m10 y2">6</td>
<td headers="m11 y2">1</td>
<td headers="m12 y2">-3</td>
</tr>
<tr>
<th id="y3" headers="y">2005</th>
<td headers="m1 y3">-10</td>
<td headers="m2 y3">-8</td>
<td headers="m3 y3">0</td>
<td headers="m4 y3">6</td>
<td headers="m5 y3">10</td>
<td headers="m6 y3">13</td>
<td headers="m7 y3">18</td>
<td headers="m8 y3">22</td>
<td headers="m9 y3">18</td>
<td headers="m10 y3">8</td>
<td headers="m11 y3">5</td>
<td headers="m12 y3">1</td>
</tr>
</tbody>
</table>
<table rules="all" frame="box" border="1" cellspacing="0">
<caption>Average Daily Temperature (°C) in Fakeland</caption>
<colgroup>
<col span="2"></col>
<col span="12" width="30"></col>
</colgroup>
<tbody>
<tr>
<th colspan="2" rowspan="2"></th>
<th colspan="12" scope="colgroup">Month</th>
</tr>
<tr>
<th scope="col">Jan</th>
<th scope="col">Feb</th>
<th scope="col">Mar</th>
<th scope="col">Apr</th>
<th scope="col">May</th>
<th scope="col">Jun</th>
<th scope="col">Jul</th>
<th scope="col">Aug</th>
<th scope="col">Sep</th>
<th scope="col">Oct</th>
<th scope="col">Nov</th>
<th scope="col">Dec</th>
</tr>
<tr>
<th rowspan="3" scope="rowgroup">Year</th>
<th scope="row">2003</th>
<td>-5</td>
<td>-2</td>
<td>4</td>
<td>8</td>
<td>12</td>
<td>16</td>
<td>19</td>
<td>21</td>
<td>16</td>
<td>10</td>
<td>3</td>
<td>0</td>
</tr>
<tr>
<th scope="row">2004</th>
<td>-4</td>
<td>-3</td>
<td>2</td>
<td>6</td>
<td>11</td>
<td>17</td>
<td>18</td>
<td>20</td>
<td>15</td>
<td>6</td>
<td>1</td>
<td>-3</td>
</tr>
<tr>
<th scope="row">2005</th>
<td>-10</td>
<td>-8</td>
<td>0</td>
<td>6</td>
<td>10</td>
<td>13</td>
<td>18</td>
<td>22</td>
<td>18</td>
<td>8</td>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>headers to convey this information, whereas the latter uses the scope attribute. As you can see, the second example appears leaner and would definitely be preferrable for a dynamically generated table. The first example is, however, recommended due to its explicit nature. <table rules="groups" frame="hsides" border="1" cellpadding="10" cellspacing="0">
<caption>Weekend Shift Managers, August 2005</caption>
<colgroup align="center" span="3"></colgroup>
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Date</th>
<th scope="col">Manager</th>
</tr>
</thead>
<tbody>
<tr>
<td>Saturday</td>
<td>8/5</td>
<td>Lindsay</td>
</tr>
<tr>
<td>Sunday</td>
<td>8/6</td>
<td>Brian</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Saturday</td>
<td>8/12</td>
<td>Chantelle</td>
</tr>
<tr>
<td>Sunday</td>
<td>8/13</td>
<td>Lindsay</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Saturday</td>
<td>8/19</td>
<td>Brian</td>
</tr>
<tr>
<td>Sunday</td>
<td>8/20</td>
<td>Chantelle</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Saturday</td>
<td>8/26</td>
<td>Lindsay</td>
</tr>
<tr>
<td>Sunday</td>
<td>8/27</td>
<td>Brian</td>
</tr>
</tbody>
</table>