Tabellen: Die Elemente table, tr, th und td
- Tabellen sind geordnet angezeigte Daten in parallelen Spalten oder rechtwinkligen Anordnungen, welche sich nach einer bestimmten Regel aufeinander beziehen. Tabellen eignen sich dazu, Informationen in (visuell) sinnvolle Untermengen zu organisieren. Das XHTML Tabellen-Modell erlaubt es Autoren, Daten (wie zum Beispiel Text, Bilder, Hyperlinks, Formulare oder andere Tabellen) in Spalten und Zeilen anzuordnen. Tabellen bestehen aus einer oder mehreren Zeilen mit Datenzellen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Tabellen</title>
</head>
<body>
<table border="1" summary="Die 20 besten Alben aller Zeiten">
<tr>
<th>Nummer</th><th>Interpret</th><th>Titel</th><th>Erscheinungsjahr</th>
</tr>
<tr>
<td>1</td><td>Beatles, The</td><td>Revolver</td><td>1966</td>
</tr>
<tr>
<td>2</td><td>Nirvana</td><td>Nevermind</td><td>1991</td>
</tr>
<tr>
<td>3</td><td>Beatles, The</td><td>Sgt Pepper's Lonely Hearts Club Band</td><td>1967</td>
</tr>
<tr>
<td>4</td><td>U2</td><td>The Joshua Tree</td><td>1987</td>
</tr>
<tr>
<td>5</td><td>Beatles, The</td><td>The Beatles White Album</td><td>1968</td>
</tr>
...
</table>
</body>
</html>- Eine Tabelle beginnt mit
<table>und endet mit</table>. Die einzelnen Zeilen werden durch das Elementtrausgezeichnet. Die Elementethundtdstehen für Spaltenüberschriften bzw. Datenzellen. Das Attributbordergibt die Breite des Rahmens in Pixeln an. Das Attributsummarywird bei Textbrowsern angezeigt und erleichtert das Verständnis des Tabelleninhaltes. Es sollte eine Zusammenfassung über den Tabelleninhalt enthalten.border="0"unterdrückt Rahmen explizit, kann aber weggelassen werden, da standardmäßig kein Rahmen gerendert wird.
Tabellen sollten nicht als »blinde Tabellen« nur als Layoutvorlage für Ihre Webseite dienen, sondern lediglich Informationen in einen inhaltlichen Kontext stellen. Das Layout einer Website lässt sich viel einfacher und geschickter über CSS steuern.
Tabellenüberschrift: Das Element caption
- Das Element
captionerlaubt Ihnen, eine Erklärung in Form einer Tabellenüberschrift zur Verfügung zu stellen und diese ober- oder unterhalb der Tabelle zu platzieren. Es muss zwischen<table>und dem erstentr-Element stehen.
Tabellenspalten: Die Elemente colgroup und col
- Einige Browser haben besonders bei großen Tabellen Schwierigkeiten mit der Darstellung. Um diese zu beschleunigen, können Sie mit den Element
colgroupundcolAnzahl und Breite der Spalten vordefinieren.
<table border="1" summary="Informationen über den Jahresumsatz unseres Unternehmens">
<colgroup>
<col width="50" />
<col width="75" />
</colgroup>
<tr>
<th>Jahr:</th><th>Umsatz:</th>
</tr>
<tr>
<td>2001</td><td>DM 36M</td>
</tr>
<tr>
<td>...</td><td>...</td>
</tr>
</table>- Das Element
colgroupenthält Angaben zu den einzelnen Spalten. Jedes leere Elementcoldefiniert eine Spalte, das Attributwidthdie Breite der Spalte in Pixeln. Sollen die Spaltenbreiten flexibel dargestellt und nur die Anzahl der Spalten angegeben werden, wählen Sie folgendes Markup. Dabei wird innerhalb des Start-Tags<colgroup>durch das Attributspandie Anzahl der Spalten bestimmt.
<table border="1" summary="Informationen über den Jahresumsatz unseres Unternehmens">
<colgroup span="2">
</colgroup>
<tr>
<th>Jahr:</th><th>Umsatz:</th>
</tr>
<tr>
<td>2001</td><td>DM 36M</td>
</tr>
<tr>
<td>...</td><td>...</td>
</tr>
</table>Zeilengruppen: Die Elemente thead, tfoot und tbody
- Tabellenzeilen können in Tabellenkopf, Tabellenrumpf und Tabellenfuß gruppiert werden. Der Tabellenkopf und der Tabellenfuß sollten Informationen über die Tabellenspalten enthalten. Der Tabellenrumpf sollte die Zeilen mit den eigentlichen Datenzellen enthalten. Anders als man vielleicht glaubt, werden die drei Bereiche auch in der Reihenfolge
thead,tfootundtbodyausgezeichnet, also nicht der Tabellenfuß am Ende. Am Ende dieser Seite sehen Sie dazu ein Beispiel.
Zellen miteinander verbinden: Die Attribute colspan und rowspan
- Mit dem Attribut
rowspankönnen Sie zwei oder mehr Zellen zeilenübergreifend miteinander verbinden. Das Attributcolspanverbindet Zellen spaltenübergreifend, also innerhalb einer Zeile. Der numerische Attributwert gibt jeweils an, wie viele Zellen miteinander verbunden werden sollen.
<table border="1">
<tr>
<td>Zelle eins, Zeile eins</td>
<td colspan="2">Zellen zwei und drei, Zeile eins</td>
</tr>
<tr>
<td>Zelle eins, Zeile zwei</td>
<td>Zelle zwei, Zeile zwei</td>
<td>Zelle drei, Zeile drei</td>
</tr>
</table>In das Start-Tag der Zelle wird das Attribut notiert. Für die weiteren Spalten oder Zeilen, über die sich die Zelle erstreckt, werden die Elemente td bzw. th einfach gelöscht.
Folgendes Beispiel soll Ihnen noch einmal die Anwendung aller vorgestellten Tabellen-Elemente und -Attribute verdeutlichen. Der Quelltext dieser Tabelle sieht auf den ersten Blick sehr kompliziert aus. Versuchen Sie ihn zu verstehen und experimentieren Sie selbst ein wenig mit dem Aufbau einer Tabelle:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Tabellen</title>
</head>
<body>
<table border="1">
<caption>Öffnungszeiten der Hotelgastronomie</caption>
<thead>
<tr>
<th colspan="2" rowspan="2"> </th>
<th colspan="3">Tageszeiten</th>
</tr>
<tr>
<th>morgens</th>
<th>mittags</th>
<th>abends</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2"> </td>
<td colspan="3">Alle Uhrzeiten MESZ</td>
</tr>
<tr>
<td colspan="5">Öffnungszeiten gelten nur im Sommer</td>
</tr>
</tfoot>
<tbody>
<tr>
<th rowspan="3">Betrieb</th>
<th>Bistro</th>
<td>6-10</td>
<td>11-15</td>
<td>18-22</td>
</tr>
<tr>
<th>Restaurant</th>
<td>8-10</td>
<td>11-14</td>
<td>19-24</td>
</tr>
<tr>
<th>Bar</th>
<td>-</td>
<td>-</td>
<td>20-1</td>
</tr>
</tbody>
</table>
</body>
</html>Sie sehen, dass Sie colspan und rowspan auch miteinander kombinieren können.
- In zwei Zellen sehen Sie den Eintrag
. Dabei handelt es sich um ein so genanntes Entity. Das Entity steht für ein Leerzeichen. Dies ist in diesem Fall ein möglicher Workaround für Browser mit mangelhafter CSS-Unterstützung, da der Rahmen von Tabellenzellen ohne Inhalt sonst nicht dargestellt wird. Über Entities werden Sie im weiteren Verlauf mehr erfahren.
