Beispiele für die Nutzung von Tabellen
Einfache Tabellen
Für viele Zwecke, bei denen nur Daten aus wenigen Kategorien einander zugeordnet werden, reichen einfache Tabellen zur Darstellung vollständig aus.
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>
Bei langen Tabellen ist auch eine wechselnde Farbe pro Zeile sinnvoll.
Dies kann durch die Klasse "wechselfarbe" in der <table>-Anweisung eingeschaltet werden:
<table class="wechselfarbe"> ... </table>
Name: | Raum: | Telefon: |
Abel | 22 | 12345 |
Bebel | 37 | 34567 |
Caesar | 14 | 56789 |
Dorian | 19 | 78901 |
Hat man Spalten oder Yeilenelemente, die als Überschrift fungieren, verwendet man für diese Zellen das HTML-Attribut <th>
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>
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>