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.

Beispiel: Tabelle ohne alles
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:

Beispiel: Tabelle mit 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>

Die im konkreten Fall möglicherweise unerwünschte Darstellung von th durch den Browser läßt 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 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.

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. Hierzu gibt es zwei optionale Klassen eins und zwei, die im <tr>-Tag wirken.

Beispiel 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
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

Hier steht eine Beschreibung der Tabelle
Spaltenüberschrift 1 Spaltenüberschrift 2
Zeilenüberschrift Normaler Inhalt
Zeilenüberschrift

h3-Überschrift

Absatzinhalt

h4-Überschrift

Absatztext

h5-Überschrift

Absatztext der etwas länger
ist.

h6-Überschrift

Liste:

  • Element 1
  • Element 2
  • Element 3

  • Absatzelement
Zeilenüberschrift ohne Class Normaler Zellentext