Einfache Tabellen
Für viele Zwecke, bei denen nur Daten aus wenigen Kategorien einander zugeordnet werden, reichen einfache Tabellen zur Darstellung vollständig aus. Da "caption" von den Browsern sehr verschieden gestylt und nie voll in die Tabellendarstellung einbezogen wird und der Inhalt von "summary" für Anwender von Standardtechnik unzugänglich bleibt, kann es sinnvoll sein, auf beides zu verzichten und Überschriften bzw. Erklärungen ganz regulär mit hn bzw. p auszuzeichnen.
| Name: | Raum: | Telefon: |
| Abel | 22 | 12345 |
| Bebel | 37 | 34567 |
| Caesar | 14 | 56789 |
| Dorian | 19 | 78901 |
Die Darstellung im HTML-Code:
<table summary="Räume und Telefonnummern"> <caption> Beispiel: Tabelle ohne alles </caption> <tr> <td>Name:</td> <td>Raum:</td> <td>Telefon:</td> </tr> <tr> <td>Abel</td> <td>22</td> <td>12345</td> </tr> <tr> <td>Bebel</td> <td>37</td> <td>34567</td> </tr> <tr> <td>Caesar</td> <td>14</td> <td>56789</td> </tr> <tr> <td>Dorian</td> <td>19</td> <td>78901</td> </tr> </table>
Obwohl assistive Technologie es derzeit nicht verlangt, macht es jedoch wenig Mühe, die Überschriftenspalten mit dem dafür zur Verfügung stehenden th-Tag auszuzeichnen:
| Name: | Raum: | Telefon: |
|---|---|---|
| Abel | 22 | 12345 |
| Bebel | 37 | 34567 |
| Caesar | 14 | 56789 |
| Dorian | 19 | 78901 |
Die Darstellung im HTML-Code:
<table summary="Räume und Telefonnummern"> <caption> Beispiel: Tabelle mit th </caption> <tr> <th>Name:</th> <th>Raum:</th> <th>Telefon:</th> </tr> <tr> <th>Abel</th> <td>22</td> <td>12345</td> </tr> <tr> <th>Bebel</th> <td>37</td> <td>34567</td> </tr> <tr> <th>Caesar</th> <td>14</td> <td>56789</td> </tr> <tr> <th>Dorian</th> <td>19</td> <td>78901</td> </tr> </table>
Die im konkreten Fall möglicherweise unerwünschte Darstellung von th durch den Browser läßt sich durch Styles modifizieren:
| Name: | Raum: | Telefon: |
|---|---|---|
| Abel | 22 | 12345 |
| Bebel | 37 | 34567 |
| Caesar | 14 | 56789 |
| Dorian | 19 | 78901 |
Die Darstellung im HTML-Code:
<table id="taba" summary="Räume und Telefonnummern"> <caption> Beispiel: Tabelle mit modifiziert gestylten th </caption> <tr> <th class="oben">Name:</th> <th class="oben">Raum:</th> <th class="oben">Telefon:</th> </tr> <tr> <th class="reihe">Abel</th> <td>22</td> <td>12345</td> </tr> <tr> <th class="reihe">Bebel</th> <td>37</td> <td>34567</td> </tr> <tr> <th class="reihe">Caesar</th> <td>14</td> <td>56789</td> </tr> <tr> <th class="reihe">Dorian</th> <td>19</td> <td>78901</td> </tr> </table>
Lange Tabellen
HTML bietet die Möglichkeit, für lange Tabellen, die beim Ausdruck auf mehrere Seiten verteilt werden, Tabellenkopf- und -fußleisten zu definieren, die auf jeder Druckseite wiederholt werden. Der Hauptinhalt kann in mehrere gleichberechtigte Abschnitte unterteilt werden. Unter Accessibility-Gesichtspunkten ist die Verwendung langer Tabellen in der Regel nicht sinnvoll - besser ist es, hier jeden Abschnitt als eigene Tabelle anzulegen und diese Teiltabellen über ein Inhaltsverzeichnis einzeln anspringbar zu machen. Das gleiche gilt für Tabellen, die so komplex aufgebaut sind, daß der Autor möglicherweise daran denkt, sie durch "scope" und "axis" zusätzlich zu strukturieren: Diese Attribute werden von assistiver Technologie bis jetzt nicht ausgewertet.
| Amt für lange Tabellen - Mitarbeiterliste | ||
|---|---|---|
| Name: | Raum: | Telefon: |
| Letzte Revision der Liste: 1.April 2000 | ||
| Abteilung 25/a | ||
| Abel | 22 | 12345 |
| Bebel | 37 | 34567 |
| Caesar | 14 | 56789 |
| Deibel | 19 | 78901 |
| Abteilung 25/b | ||
| Esel | 24 | 67890 |
| Fabel | 25 | 76543 |
| Gabel | 27 | 92835 |
| Hebel | 28 | 65743 |
| Abteilung 26 | ||
| Jubel | 32 | 32569 |
| Kegel | 33 | 43194 |
| Label | 34 | 91236 |
| Mebel | 36 | 85305 |
Die Darstellung im HTML-Code:
<table summary="Räume und Telefonnummern">
<caption>
Beispiel: Lange Tabelle
</caption>
<thead>
<tr>
<th colspan="3">Amt für lange Tabellen - Mitarbeiterliste</th>
</tr>
<tr>
<th>Name:</th>
<th>Raum:</th>
<th>Telefon:</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Letzte Revision der Liste: 1.April 2000</td>
</tr>
</tfoot>
<tbody>
<tr>
<th colspan="3">Abteilung 25/a</th>
</tr>
<tr>
<th>Abel</th>
<td>22</td>
<td>12345</td>
</tr>
<tr>
<th>Bebel</th>
<td>37</td>
<td>34567</td>
</tr>
<tr>
<th>Caesar</th>
<td>14</td>
<td>56789</td>
</tr>
<tr>
<th>Deibel</th>
<td>19</td>
<td>78901</td>
</tr>
</tbody>
<tbody id="mitte">
<tr>
<th colspan="3">Abteilung 25/b</th>
</tr>
<tr>
<th>Esel</th>
<td>24</td>
<td>67890</td>
</tr>
<tr>
<th>Fabel</th>
<td>25</td>
<td>76543</td>
</tr>
<tr>
<th>Gabel</th>
<td>27</td>
<td>92835</td>
</tr>
<tr>
<th>Hebel</th>
<td>28</td>
<td>65743</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="3">Abteilung 26</th>
</tr>
<tr>
<th>Jubel</th>
<td>32</td>
<td>32569</td>
</tr>
<tr>
<th>Kegel</th>
<td>33</td>
<td>43194</td>
</tr>
<tr>
<th>Label</th>
<td>34</td>
<td>91236</td>
</tr>
<tr>
<th>Mebel</th>
<td>36</td>
<td>85305</td>
</tr>
</tbody>
</table>
Tabelle mit zeilenweiser Hintergrundfärbung
Bei langen Tabellen ist es oft hilfreich, wenn man einzelne Zeilen optisch unterscheidbar macht.
Hierzu gibt es zwei optionale Klassen eins und zwei, die im <tr>-Tag wirken.
Zeile mit der Class eins |
Zeile mit der Class zwei |
Zeile mit der Class eins |
Zeile mit der Class zwei |
Zeile mit der Class eins |
Zeile mit der Class zwei |
Die Darstellung im HTML-Code:
<table> <caption>Beispiel einer Tabelle mit zeilenweise wechselndem Hintergrund</caption> <tr class="eins"> <td>Zeile mit der Class <code>eins</code></td> </tr> <tr class="zwei"> <td>Zeile mit der Class <code>zwei</code></td> </tr> <tr class="eins"> <td>Zeile mit der Class <code>eins</code></td> </tr> <tr class="zwei"> <td>Zeile mit der Class <code>zwei</code></td> </tr> <tr class="eins"> <td>Zeile mit der Class <code>eins</code></td> </tr> <tr class="zwei"> <td>Zeile mit der Class <code>zwei</code></td> </tr> </table>
Darstellung einer Tabelle mit komplexen Inhalten
| Spaltenüberschrift 1 | Spaltenüberschrift 2 |
|---|---|
| Zeilenüberschrift | Normaler Inhalt |
| Zeilenüberschrift |
h3-ÜberschriftAbsatzinhalt h4-ÜberschriftAbsatztext h5-ÜberschriftAbsatztext
der etwas länger h6-ÜberschriftListe:
|
| Zeilenüberschrift ohne Class | Normaler Zellentext |