HTML-Tabelle

Sie können Tabellen mit HTML erstellen.

Beispiel

Tabelle
Dieses Beispiel zeigt, wie man in einem HTML-Dokument eine Tabelle erstellt.
Tabellenrand
Dieses Beispiel zeigt verschiedene Arten von Tabellenrändern.

(Mehr Beispiele finden Sie am Ende dieser Seite)

Tabelle

Eine Tabelle wird mit dem <table>-Tag definiert. Jede Tabelle hat mehrere Zeilen (definiert durch das <tr>-Tag), und jede Zeile wird in mehrere Zellen aufgeteilt (definiert durch das <td>-Tag). Das Alphabet td steht für Tabelleninhalt (table data), d.h. der Inhalt der Datenzelle. Eine Datenzelle kann Text, Bilder, Listen, Absätze, Formulare, Horizontallinien, Tabellen usw. enthalten.

<table border="1">
<tr>
<td>Zeile 1, Zelle 1</td>
<td>Zeile 1, Zelle 2</td>
</tr>
<tr>
<td>Zeile 2, Zelle 1</td>
<td>Zeile 2, Zelle 2</td>
</tr>
</table>

Wird im Browser wie folgt angezeigt:

Zeile 1, Zelle 1 Zeile 1, Zelle 2
Zeile 2, Zelle 1 Zeile 2, Zelle 2

Tabelle und Rahmenattribut

Wenn das Rahmenattribut nicht definiert ist, wird die Tabelle keine Ränder anzeigen. Dies kann manchmal nützlich sein, aber in den meisten Fällen möchten wir die Ränder anzeigen.

Verwenden Sie das Rahmenattribut, um eine Tabelle mit Rändern anzuzeigen:

<table border="1">
<tr>
<td>Zeile 1, Zelle 1</td>
<td>Zeile 1, Zelle 2</td>
</tr>
</table>

Tabellenkopf

Tabellenkopf werden mit dem <th>-Tag definiert.

Die meisten Browser zeigen Tabellenkopf als fett zentrierten Text an:

<table border="1">
<tr>
<th>Titel</th>
<th>Ein weiterer Titel</th>
</tr>
<tr>
<td>Zeile 1, Zelle 1</td>
<td>Zeile 1, Zelle 2</td>
</tr>
<tr>
<td>Zeile 2, Zelle 1</td>
<td>Zeile 2, Zelle 2</td>
</tr>
</table>

Wird im Browser wie folgt angezeigt:

Titel Ein weiterer Titel
Zeile 1, Zelle 1 Zeile 1, Zelle 2
Zeile 2, Zelle 1 Zeile 2, Zelle 2

Zellen in der Tabelle

In einigen Browsern wird der ohne Inhalt befindliche Tabellenzelle nicht gut dargestellt. Wenn eine Zelle leer ist (kein Inhalt), kann der Browser möglicherweise den Rahmen dieser Zelle nicht anzeigen.

<table border="1">
<tr>
<td>Zeile 1, Zelle 1</td>
<td>Zeile 1, Zelle 2</td>
</tr>
<tr>
<td></td>
<td>Zeile 2, Zelle 2</td>
</tr>
</table>

Der Browser könnte so aussehen:

Zellen in der Tabelle

Hinweis:Der Rahmen dieser leeren Zelle wird nicht angezeigt. Um dies zu vermeiden, fügen Sie einen Leerzeichner-Platzhalter in die leeren Zellen ein, um den Rahmen anzuzeigen.

<table border="1">
<tr>
<td>Zeile 1, Zelle 1</td>
<td>Zeile 1, Zelle 2</td>
</tr>
<tr>
<td> </td>
<td>Zeile 2, Zelle 2</td>
</tr>
</table>

Wird im Browser wie folgt angezeigt:

Zeile 1, Zelle 1 Zeile 1, Zelle 2
　 Zeile 2, Zelle 2

Mehr Beispiele

Tabelle ohne Ränder
Dieses Beispiel zeigt eine Tabelle ohne Rahmen.
Tabellenkopf (Heading)
Dieses Beispiel zeigt, wie der Tabellenkopf angezeigt wird.
Leere Zellen
Dieses Beispiel zeigt, wie " " verwendet wird, um Zellen ohne Inhalt zu behandeln.
Tabelle mit Titel
Dieses Beispiel zeigt eine Tabelle mit einem Titel (caption).
Tabellenzellen, die über Zeilen oder Spalten hinausgehen
Dieses Beispiel zeigt, wie Tabellenzellen, die über Zeilen oder Spalten hinausgehen, definiert werden.
Tabelleninhalts-Tags
Dieses Beispiel zeigt, wie Elemente in verschiedenen Elementen angezeigt werden.
Zellenabstand (Cell padding)
Dieses Beispiel zeigt, wie "Cell padding" verwendet wird, um einen Abstand zwischen dem Zelleninhalt und dem Rahmen zu schaffen.
Zellenabstand (Cell spacing)
Dieses Beispiel zeigt, wie "Cell spacing" verwendet wird, um den Abstand zwischen Zellen zu erhöhen.
Hintergrundfarbe oder Hintergrundbild zu einer Tabelle hinzufügen
Hintergrundfarbe oder Hintergrundbild zu einer Tabelle hinzufügen
Hintergrundfarbe oder Hintergrundbild zu einer Tabellenzelle hinzufügen
Dieses Beispiel zeigt, wie man einer oder mehreren Tabellenzellen einen Hintergrund hinzufügt.
Inhalt in Tabellenzellen anordnen
Dieses Beispiel zeigt, wie die "align"-Eigenschaft verwendet wird, um den Inhalt der Zellen anzuordnen, um eine schön aussehende Tabelle zu erstellen.
Frame-(frame)-Eigenschaft
Dieses Beispiel zeigt, wie die "frame"-Eigenschaft verwendet wird, um den Rahmen um die Tabelle zu steuern.

Tabellen-Tags

Tabelle Beschreibung
<table> Tabellen definieren.
<caption> Tabellenüberschrift definieren.
<th> Tabellenkopf definieren.
<tr> Tabellenzeile definieren.
<td> Tabellenzelle definieren.
<thead> Tabellenkopf definieren.
<tbody> Tabellenkörper definieren.
<tfoot> Tabellenfuß definieren.
<col> Attribute, die für Tabellenzeilen verwendet werden, definieren.
<colgroup> Gruppe der Tabellenzeilen definieren.