HTML-Primer: Was in HTML-Büchern fehlt
Tabellen in HTML
Es kommt immer mal vor, dass man verschiedene Dinge mit ihren Eigenschaften als Tabelle listen will: Produkte mit ihren Bestellnummern und Preisen sind ein gutes Beispiel.
Die HTML-Elemente, die wir hierzu brauchen sind:
- Table (die komplette Tabelle wird von den Table-Tags eingerahmt)
- TR (Table Row, d.h. Tabellen-Zeile)
- TH (Table Header, d.h. Spalten-Überschrift)
- TD (Table Data, d.h. eine Tabellenzelle bzw. eine Spalte in einer Reihe
Erstellen wir also eine einfache Tabelle:
<table>
<tr>
<th>Name</th>
<th>Geburtsdatum</th>
<th>Geburtsort</th>
</tr>
<tr>
<td>Arthur</td>
<td>16.01.1997</td>
<td>Trier</td>
</tr>
<tr>
<td>Ludmilla</td>
<td>27.08.1957</td>
<td>Trier</td>
</tr>
<tr>
<td>Herwig</td>
<td>21.09.1955</td>
<td>Salzburg</td>
</tr>
</table>
Die Schritte sind:
- Tabelle (Table) öffnen mit dem Table-Start-Tag: <table>
- Erste Zeile (Table-Row) der Tabelle starten: <tr>
- Die einzeln Zellen mit Spaltenüberschriften als Tabellenkopf-Elemente (Table-Header) anlegen: <th> ... </th>
- Erste Zeile beenden mit dem TR-End-Tag: </tr>
- Zweite Zeile öffnen: <tr>
- Die einzelnen Zellen mit Tabellendaten (Table-Data) anlegen: <td> ... </td>
- Weitere Zeilen mit Tabellendaten anlegen
- Nach der letzten Zeile die Tabelle mit dem Table-End-Tag schließen: </table>
Wenn wir das nun in den Rumpf (Body) einer HTML-Datei einfügen, sollte das etwa so aussehen:
| Name | Geburtsdatum | Geburtsort |
|---|---|---|
| Alexander | 16.01.1997 | Trier |
| Lydia | 27.08.1957 | Trier |
| Herbert | 21.09.1955 | Salzburg |
Tabellen-Attribute
Wie schon erwähnt, wird das genaue Design eigentlich außerhalb der HTML-Datei festgelegt, nämlich in sogenannten Style Sheets, auch CSS genannt. Die meisten CSS-Anweisungen kann man auch als HTML-Attribute vergeben und dabei schon mal die Begriffe verstehen lernen. Das heißt aber nicht, dass man das heute noch so macht. Im Gegenteil: Genaugenommen gehört nichts, was zum Design gehört (Layout, Abstände, Ränder, etc.) in die HTML-Datei. Trotzdem ist es erstens für das Verständnis gut und zweitens kann es hier und da schnell und nützlich sein.
Border
Border heißt, aus dem Englischen übersetzt, Rand. Wenn wir der Tabelle (im Table-Tag) ein Attribut Border mit einem Wert von z.B. 1 geben, erhalten alle Tabellen-Elemente (Zellen) einen Rand von 1 Pixel (also 1 Bildpunkt).
Wir ändern das Table-Tag also ab in:
<table border="1">
...
Wenn wir nun nach dem Speichern die Seite neu laden, sollte die Tabelle etwa so aussehen:
| Name | Geburtsdatum | Geburtsort |
|---|---|---|
| Alexander | 16.01.1997 | Trier |
| Lydia | 27.08.1957 | Trier |
| Herbert | 21.09.1955 | Salzburg |
Padding (cellpadding)
Das englische Wort Pad heißt eigentlich soviel wie Polster oder Kissen. Damit der Inhalt von Tabellen-Zellen (TH- oder TD-Elementen) nicht zu nah an den Rand der Zelle kommt, fügt man ein Polster - einen Abstand - zwischen Inhalt und Zellen-Rand. Um das Padding-Element für Tabellen direkt in HTML einzugeben lautet der Attributname cellpadding. Wenn wir z.B. einen Freiraum von 10 Pixeln um unseren Tabellentext haben wollen, fügen wir das in unseren Table-Tag ein:
<table border="1" cellpadding="10">
...
Übungsaufgabe: Experimentiere mit verschiedenen Werten für das Border- und das Cellpadding-Attribut. Wähle dabei für beide Attribute auch den Wert 0 und sehr große Werte, z.B. 100.
Cellspacing
Die meisten Browser stellen HTML-Tabellen mit einem 3D-Effekt dar, der eigentlich gar nicht schön ist. Ohne die genaue Bedeutung hier zu erklären: Wenn man das Attribut Cellspacing verwendet und ihm den Wert 0 gibt, sieht die Tabelle besser aus.
Jetzt sieht unser Table-Start-Tag also wie folgt aus:
<table border="1" cellpadding="5" cellspacing="0">
So erhalten wir etwa folgende Tabelle:
| Name | Geburtsdatum | Geburtsort |
|---|---|---|
| Alexander | 16.01.1997 | Trier |
| Lydia | 27.08.1957 | Trier |
| Herbert | 21.09.1955 | Salzburg |
Nicht vergessen: Nach dem Speichern der Test-Seite muss die Seite neu geladen werden. (Bei Firefox hält man dazu die Umschalt-Taste fest und drückt auf F5.)
Nun bekommt unser HTML-Dokument einen richtigen HTML-Seitenkopf.