Tabellen eigenen sich hervorragend, Inhalte in Zeilen und Spalten darzustellen.
Jede Tabelle, die mit dem Tag [html]<table>…</table> [/html]definiert wurde, besteht aus mindestens einer Zeile und einer Spalte. Tabellenzeilen werden durch den Tag [html]<tr>…</tr> [/html](für “table row”) festgelegt; Zellen mit den eigentlichen Inhalten entweder durch [html]<th>…</th> [/html](“table header” – Kopfzellen) oder [html]<td>…</td> [/html](“table data” – Inhaltszellen).
Eine einfache Tabelle könnte so aussehen:
| Land | Stadt |
|---|---|
| Deutschland | Rhede |
| Frankreich | Paris |
| Italien | Rom |
[/html]
Mit den beiden Kopfzellen werden die Überschriften für die beiden Spalten festgelegt, die restlichen Zeilen enthalten die Daten der Tabelle.
Über das Ihnen bereits bekannt Attribut align=”…” lassen sich sowohl der Inhalt einzelner Zellen als auch die gesamte Tabelle ausrichten.
[html]
<html>
<head>
<title>Meine erste HTML-Seite</title>
</head>
<body>
<table align="center">
<tr>
<th>Land</th>
<th>Stadt</th>
</tr>
<tr>
<td align="right">Deutschland</td>
<td>Rhede</td>
</tr>
<tr>
<td align="right">Frankreich</td>
<td>Paris</td>
</tr>
<tr>
<td align="right">Italien</td>
<td>Rom</td>
</tr>
</table>
</body>
</html>
[/html]
8.1 Hintergrundgrafik und -farbe für Tabellen und Tabellenzellen
Ähnlich wie beim BODY-Tag ist es möglich, einer Tabelle (oder auch einer einzelnen Zelle) eine bestimmte Hintergrundgrafik oder -farbe zuzuordnen. Verwenden Sie dazu die beiden Attribute background=”…” (Hintergrundgrafik) und bgcolor=”…” (Hintergrundfarbe).
[html]
<html>
<head>
<title>Meine erste HTML-Seite</title>
</head>
<body>
<table bgcolor="yellow">
<tr>
<th>Land</th>
<th>Stadt</th>
</tr>
<tr>
<td background="deutschland.gif">Deutschland</td>
<td>Rhede</td>
</tr>
<tr>
<td background="frankreich.gif">Frankreich</td>
<td>Paris</td>
</tr>
<tr>
<td background="italien.gif">Italien</td>
<td>Rom</td>
</tr>
</table>
</body>
</html>
[/html]
8.2 Stärke der Gitternetzlinien
Sie können bei der Definition einer Tabelle zusätzlich das Attribut cellspacing=”…” angeben. Je größer der Wert, desto dicker werden die einzelnen Gitternetzlinien.
[html]
<html>
<head>
<title>Meine erste HTML-Seite</title>
</head>
<body>
<table border="2" cellspacing="7">
<tr>
<th>Land</th>
<th>Stadt</th>
</tr>
<tr>
<td>Deutschland</td>
<td>Rhede</td>
</tr>
<tr>
<td>Frankreich</td>
<td>Paris</td>
</tr>
<tr>
<td>Italien</td>
<td>Rom</td>
</tr>
</table>
</body>
</html>
[/html]
8.3 Abstand von Zelleninhalt zum Zellenrand
Ähnlich wie bei der Stärke der Gitternetzlinien können Sie bei der Definition einer Tabelle das Attribut cellpadding=”…” angeben, um durch den Wert den Abstand von Zelleninhalt zum Rand festzulegen. Je größer der Wert, desto größer ist der Abstand.
[html]
<html>
<head>
<title>Meine erste HTML-Seite</title>
</head>
<body>
<table border="2" cellpadding="5">
<tr>
<th>Land</th>
<th>Stadt</th>
</tr>
<tr>
<td>Deutschland</td>
<td>Rhede</td>
</tr>
<tr>
<td>Frankreich</td>
<td>Paris</td>
</tr>
<tr>
<td>Italien</td>
<td>Rom</td>
</tr>
</table>
</body>
</html>
[/html]
8.4 Breite und Höhe von Tabellen und Tabellenzellen
Um Tabellen besser anpassen zu können, können Sie die Breite von Tabellen bzw. einzelnen Tabellenzellen (width=”…”) angeben. Dabei sind absolute Werte (width=”500″) ebenso möglich wie relative Werte (width=”75%”).
Analog dazu definieren Sie die Höhe von Tabellen und Tabellenzellen mit Hilfe des Attributes height=”…”.
[html]
<html>
<head>
<title>Meine erste HTML-Seite</title>
</head>
<body>
<table width="400">
<tr>
<th height="100" width="50%">Land</th>
<th height="100" width="50%">Stadt</th>
</tr>
<tr>
<td>Deutschland</td>
<td>Rhede</td>
</tr>
<tr>
<td>Frankreich</td>
<td>Paris</td>
</tr>
<tr>
<td>Italien</td>
<td>Rom</td>
</tr>
</table>
</body>
</html> [/html]