Those of you who have created web sites in the past probably know that it is possible to use tables for layout purposes. In this class, I have purposely chosen to avoid teaching you how to do this. Why? Because it's outdated. There are still plenty of web sites that use this outdated technique, but it's yesterday's news, so to speak. More progressive sites abandoned table layouts years ago. Even the slow-to-reform web sites are switching to CSS layout instead of table layout. In fact, just a few months ago CNN.com switched to a CSS-based layout for the first time. MSNBC.com had already switched a little before CNN. This doesn't mean that CNN or MSNBC have great, standards-based web sites. They don't. But at least they've moved in the right direction.
You should be aware that it is possible to use tables for layout, but CSS is better. CSS is more powerful, cleaner, standards-based, and more modern. CSS also has accessibility benefits because it helps to separate content (the HTML) from the "look and feel" or "presentation" of that content (the CSS). With a clean separation between content and presentation, it is usually easier to ensure that the content itself is usable and accessible. One of the reasons for this is because if you remove the styles from the HTML, you essentially have a text-only version, which helps you to "visualize" how pages sound to screen reader users.
Here is an example of a simple data table:
| Summer | Winter | |
|---|---|---|
| High | 102 | 68 |
| Low | 72 | -2 |
It has two column headers ("Summer" and "Winter") and two row headers ("High" and "Low").
The code for this table looks like this:
<table width="200" border="1" class="normal">
<caption>
Temperatures in Fairfax
</caption>
<tr>
<th scope="col"> </th>
<th scope="col">Summer</th>
<th scope="col">Winter</th>
</tr>
<tr>
<th scope="row">High</th>
<td>102</td>
<td>68</td>
</tr>
<tr>
<th scope="row">Low</th>
<td>72</td>
<td>-2</td>
</tr>
</table>
Dreamweaver has a good utility for creating tables. It is easy to create a simple data table, even with all of the accessibility features (the scope attribute). You never have to go into the code view to create a simple data table. (See this week's reading materials for more information.)
We can turn our simple example into a more complex example by adding another layer of headers:
| Summer | Winter | |||
|---|---|---|---|---|
| DC | Fairfax | DC | Fairfax | |
| High | 102 | 102 | 70 | 68 |
| Low | 74 | 72 | -1 | -2 |
Now there are three headers that are associated with each data cell. For example the cell that says "74" is associated with Summer, DC, and Low.
Complex data tables are not as easy to create or to make accessible because Dreamweaver does not have a built-in method for associating the data cells with the header cells. You can still create the table using the Design View in Dreamweaver, but you'll have to add the extra markup for accessibility in the Code View.
The code for this table looks like this:
<table width="327" border="1" class="normal">
<caption>
Temperatures in the DC Area
</caption>
<tr>
<th width="43" rowspan="2"> </th>
<th colspan="2" id="summer">Summer</th>
<th colspan="2" id="winter">Winter</th>
</tr>
<tr>
<th width="62" id="dc-s">DC</th>
<th width="66" id="ffx-s">Fairfax</th>
<th width="60" id="dc-w">DC</th>
<th width="62" id="ffx-w">Fairfax</th>
</tr>
<tr>
<th id="high">High</th>
<td headers="summer dc-s high">102</td>
<td headers="summer ffx-s high">102</td>
<td headers="winter dc-w high">70</td>
<td headers="winter ffx-w high">68</td>
</tr>
<tr>
<th id="low">Low</th>
<td headers="summer dc-s low">74</td>
<td headers="summer ffx-s low">72</td>
<td headers="winter dc-w low">-1</td>
<td headers="winter ffx-w low">-2</td>
</tr>
</table>
(See the reading materials for more information about the techniques for making complex data tables accessible. See also the example below)
When you listen to a web page with a screen reader, everything is read to you one item at a time, in a linear fashion. This is not a problem for small data tables. However for large data tables (see the complex data table example below), the data can quickly become very confusing, especially if the screen reader does not read the headers along with the data.
(See the reading materials for more information.)
Here is an example of a complex data table copied from a sports website recently. Some of you have probably seen data tables like this during the last few days or weeks (go Mason!):
| STARTERS | Minutes Played | Field Goals Made-Attempted |
Free-Throws Made-Attempted |
Offensive Rebounds | Defensive Rebounds | Assists | Personal Fouls | Points |
|---|---|---|---|---|---|---|---|---|
| F. Campbell, G-F | 41 | 5-10 | 3-3 | 1 | 2 | 3 | 2 | 15 |
| J. Lewis, F | 41 | 6-12 | 8-14 | 2 | 7 | 3 | 2 | 20 |
| W. Thomas, F | 44 | 8-12 | 3-4 | 6 | 12 | 2 | 4 | 19 |
| T. Skinn, G | 39 | 4-11 | 0-1 | 2 | 5 | 2 | 4 | 10 |
| L. Butler, G | 35 | 6-11 | 3-3 | 2 | 4 | 2 | 4 | 19 |
| BENCH | Minutes Played | Field Goals Made-Attempted |
Free-Throws Made-Attempted |
Offensive Rebounds | Defensive Rebounds | Assists | Personal Fouls | Points |
| J. Carter, G | 1 | 0-0 | 0-0 | 0 | 0 | 0 | 0 | 0 |
| G. Norwood, G-F | 19 | 0-2 | 0-0 | 0 | 3 | 1 | 1 | 0 |
| C. Fleming, F | 1 | 0-0 | 0-0 | 0 | 0 | 0 | 0 | 0 |
| S. Hernandez, F | 4 | 1-2 | 0-0 | 0 | 2 | 0 | 0 | 3 |
| TOTALS | Field Goals Made-Attempted |
Free-Throws Made-Attempted |
Offensive Rebounds | Defensive Rebounds | Assists | Personal Fouls | Points | |
| 30-60 | 17-25 | 13 | 35 | 13 | 17 | 86 | ||
| 50.0% | 68.0% | |||||||
I've pasted in the code for this table below. This is a large table with a lot of data, so the code may look overwhelming, but pay special attention to the highlighted areas:
<table width="100%" cellpadding="0" cellspacing="0" summary="George Mason beat UConn in overtime to advance to the final four. George Mason outrebounded UConn and spread out the scoring among the starting players. Cinderella lives!">
<caption>George Mason Patriots</caption>
<tr>
<th width="25%" id="starters">STARTERS</th>
<th width="11%" id="min-starters">Minutes Played </th>
<th width="13%" id="fgm-a-starters">Field Goals <br />
Made-Attempted</th>
<th width="12%" id="ftm-a-starters">Free-Throws<br />
Made-Attempted </th>
<th width="10%" id="off-starters">Offensive Rebounds </th>
<th width="8%" id="reb-starters">Defensive Rebounds</th>
<th width="7%" id="ast-starters">Assists</th>
<th width="7%" id="pf-starters">Personal Fouls </th>
<th width="7%" id="pts-starters">Points</th>
</tr>
<tr>
<th id="campbell">F. Campbell, G-F</th>
<td headers="campbell min-starters">41</td>
<td headers="campbell fgm-a-starters">5-10</td>
<td headers="campbell ftm-a-starters">3-3</td>
<td headers="campbell off-starters">1</td>
<td headers="campbell reb-starters">2</td>
<td headers="campbell ast-starters">3</td>
<td headers="campbell pf-starters">2</td>
<td headers="campbell pts-starters">15</td>
</tr>
<tr>
<th id="lewis">J. Lewis, F</th>
<td headers="lewis min-starters">41</td>
<td headers="lewis fgm-a-starters">6-12</td>
<td headers="lewis ftm-a-starters">8-14</td>
<td headers="lewis off-starters">2</td>
<td headers="lewis reb-starters">7</td>
<td headers="lewis ast-starters">3</td>
<td headers="lewis pf-starters">2</td>
<td headers="lewis pts-starters">20</td>
</tr>
<tr>
<th id="thomas">W. Thomas, F</th>
<td headers="thomas min-starters">44</td>
<td headers="thomas fgm-a-starters">8-12</td>
<td headers="thomas ftm-a-starters">3-4</td>
<td headers="thomas off-starters">6</td>
<td headers="thomas reb-starters">12</td>
<td headers="thomas ast-starters">2</td>
<td headers="thomas pf-starters">4</td>
<td headers="thomas pts-starters">19</td>
</tr>
<tr>
<th id="skinn">T. Skinn, G</th>
<td headers="skinn min-starters">39</td>
<td headers="skinn fgm-a-starters">4-11</td>
<td headers="skinn ftm-a-starters">0-1</td>
<td headers="skinn off-starters">2</td>
<td headers="skinn reb-starters">5</td>
<td headers="skinn ast-starters">2</td>
<td headers="skinn pf-starters">4</td>
<td headers="skinn pts-starters">10</td>
</tr>
<tr>
<th id="butler">L. Butler, G</th>
<td headers="butler min-starters">35</td>
<td headers="butler fgm-a-starters">6-11</td>
<td headers="butler ftm-a-starters">3-3</td>
<td headers="butler off-starters">2</td>
<td headers="butler reb-starters">4</td>
<td headers="butler ast-starters">2</td>
<td headers="butler pf-starters">4</td>
<td headers="butler pts-starters">19</td>
</tr>
<tr>
<th width="25%" id="bench">BENCH</th>
<th width="11%" id="min-bench">Minutes Played</th>
<th width="13%" id="fgm-a-bench">Field Goals <br />
Made-Attempted</th>
<th width="12%" id="ftm-a-bench">Free-Throws<br />
Made-Attempted</th>
<th width="10%" id="off-bench">Offensive Rebounds</th>
<th width="8%" id="reb-bench">Defensive Rebounds</th>
<th width="7%" id="ast-bench">Assists</th>
<th width="7%" id="pf-bench">Personal Fouls</th>
<th width="7%" id="pts-bench">Points</th>
</tr>
<tr>
<th id="carter">J. Carter, G</th>
<td headers="carter min-bench">1</td>
<td headers="carter fgm-a-bench">0-0</td>
<td headers="carter ftm-a-bench">0-0</td>
<td headers="carter off-bench">0</td>
<td headers="carter reb-bench">0</td>
<td headers="carter ast-bench">0</td>
<td headers="carter pf-bench">0</td>
<td headers="carter pts-bench">0</td>
</tr>
<tr>
<th id="norwood">G. Norwood, G-F</th>
<td headers="norwood min-bench">19</td>
<td headers="norwood fgm-a-bench">0-2</td>
<td headers="norwood ftm-a-bench">0-0</td>
<td headers="norwood off-bench">0</td>
<td headers="norwood reb-bench">3</td>
<td headers="norwood ast-bench">1</td>
<td headers="norwood pf-bench">1</td>
<td headers="norwood bench">0</td>
</tr>
<tr>
<th id="fleming">C. Fleming, F</th>
<td headers="fleming min-bench">1</td>
<td headers="fleming fgm-a-bench">0-0</td>
<td headers="fleming ftm-a-bench">0-0</td>
<td headers="fleming off-bench">0</td>
<td headers="fleming reb-bench">0</td>
<td headers="fleming ast-bench">0</td>
<td headers="fleming pf-bench">0</td>
<td headers="fleming bench">0</td>
</tr>
<tr>
<th id="hernandez">S. Hernandez, F</th>
<td headers="hernandez min-bench">4</td>
<td headers="hernandez fgm-a-bench">1-2</td>
<td headers="hernandez ftm-a-bench">0-0</td>
<td headers="hernandez off-bench">0</td>
<td headers="hernandez reb-bench">2</td>
<td headers="hernandez ast-bench">0</td>
<td headers="hernandez pf-bench">0</td>
<td headers="hernandez bench">3</td>
</tr>
<tr>
<th colspan="2" rowspan="3" id="totals">TOTALS</th>
<th width="13%" id="fgm-a-totals">Field Goals <br />
Made-Attempted</th>
<th width="12%" id="ftm-a-totals">Free-Throws<br />
Made-Attempted</th>
<th width="10%" id="off-totals">Offensive Rebounds</th>
<th width="8%" id="reb-totals">Defensive Rebounds</th>
<th width="7%" id="ast-totals">Assists</th>
<th width="7%" id="pf-totals">Personal Fouls</th>
<th width="7%" id="pts-totals">Points</th>
</tr>
<tr>
<td headers="totals fgm-a-totals">30-60</td>
<td headers="totals ftm-a-totals">17-25</td>
<td headers="totals off-totals">13</td>
<td headers="totals reb-totals">35</td>
<td headers="totals ast-totals">13</td>
<td headers="totals pf-totals">17</td>
<td headers="totals pts-totals">86</td>
</tr>
<tr>
<td headers="totals fgm-a-totals">50.0%</td>
<td headers="totals ftm-a-totals">68.0%</td>
<td colspan="5"> </td>
</tr>
</table>
Hopefully this gives you a concrete real-world example to learn from. Now go to the WebAIM CD-ROM to learn the rest.