Tabellen

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.

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>

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>

Beispiel: Tabelle mit der Klasse "wechselfarbe"

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>

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> 

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

---