Tabellen

Tabellen eigenen sich hervorragend, Inhalte in Zeilen und Spalten darzustellen.

Jede Tabelle, die mit dem Tag

<table>...</table>

definiert wurde, besteht aus mindestens einer Zeile und einer Spalte. Tabellenzeilen werden durch den Tag

<tr>...</tr>

(für “table row”) festgelegt; Zellen mit den eigentlichen Inhalten entweder durch

<th>...</th>

(“table header” – Kopfzellen) oder

<td>...</td>

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

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

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

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

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