Achtung!

Der Webbaukasten wird nicht mehr aktiv betreut und nicht mehr weiter entwickelt. Verwenden Sie stattdessen das CMS-Angebot des RRZE.
Die Dokumentation des CMS-Angebotes finden Sie auf der Website wordpress.rrze.fau.de.

Einfache Tabellen

Für viele Zwecke, z. B. wenn Daten aus wenigen Kategorien einander zugeordnet werden sollen, reichen einfache Tabellen zur Darstellung völlig aus. Allerdings können auch beim Einsatz von tabellen Schwieriegkeiten entstehen: Zum einen wird"caption" von den Browsern sehr verschieden gestylt und nie voll in die Tabellendarstellung einbezogen. Zum anderen bleibt der Inhalt von "summary" für Anwender von Standardtechnik unzugänglich. Deshalb kann es manchmal sinnvoll sein, auf beides zu verzichten und Überschriften bzw. Erklärungen außerhalb der Tabelle und ganz regulär mit hn bzw. p auszuzeichnen.

Beispiel: Tabelle ohne alles
Name: Raum: Telefon:
Abel 22 12345
Bebel 37 34567
Caesar 14 56789
Dorian 19 78901

Die Darstellung in 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:

Beispiel: Tabelle mit th
Name: Raum: Telefon:
Abel 22 12345
Bebel 37 34567
Caesar 14 56789
Dorian 19 78901

Die Darstellung in 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ässt sich durch Styles modifizieren:

Beispiel: Tabelle mit modifiziert gestylten th
Name: Raum: Telefon:
Abel 22 12345
Bebel 37 34567
Caesar 14 56789
Dorian 19 78901

Die Darstellung in 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

Bei sehr langen Tabellen, die beim Ausdruck auf mehrere Seiten verteilt werden, können Tabellenkopf- und -fußleisten so definiert werden, dass sie auf jeder Druckseite wiederholt werden. Der Hauptinhalt selbst kann in mehrere gleichberechtigte Abschnitte unterteilt werden.

Davon abgesehen ist die Verwendung langer Tabellen unter Accessibility-Gesichtspunkten in der Regel nicht sinnvoll. Besser ist es, jeden Abschnitt als eigene Tabelle anzulegen und diese dann in einem Inhaltsverzeichnis zusammenzufassen. Über dieses können die Benutzer dann die einzelnen Teiltabellen dann direkt ansteuern.

Das gleiche gilt für Tabellen, die so komplex aufgebaut sind, dass 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.

Beispiel: Lange Tabelle
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
Jubel3232569
Kegel3343194
Label34 91236
Mebel3685305

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. Geben Sie hierzu der Tabelle die CSS-Klasse wechselfarbe:

Beispiel 1 einer Tabelle mit zeilenweise wechselndem Hintergrund
Zeile 1
Zeile 2
Zeile 3
Zeile 4

Die Darstellung im HTML-Code:

<table class="wechselfarbe">
	<caption>Beispiel 1 einer Tabelle mit zeilenweise wechselndem Hintergrund</caption>
	<tr>
		<td>Zeile 1</td>
	</tr>
	<tr>
		<td>Zeile 2</td>
	</tr>			
	<tr>
		<td>Zeile 3</td>
	</tr>
	<tr>
		<td>Zeile 4</td>
	</tr>
</table>
		

Alternativ k├Ânnen Sie die Zeilen auch einzeln durch die zwei Klassen eins und zwei im <tr>-Tag markieren.

Beispiel 2 einer Tabelle mit zeilenweise wechselndem Hintergrund
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 2 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>
</table>