HTML 表格

Eine Tabelle besteht eigentlich aus vielen kleinen Zellen, die geordnet angeordnet sind. Diese Zellen haben viele Zeilen und Spalten. Diese durch Zeilen und Spalten组成的 Layout wird als Tabelle bezeichnet, und die Tabelle wird durch den "table"-Tag definiert.

HTML-Tabelle-Beispiel:

Online-Beispiel

HTML-Tabelle
Dieser Beispiel zeigt, wie eine Tabelle in einem HTML-Dokument erstellt wird.

<table　border="1" Breite="300">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>

HTML 表格

Eine Tabelle wird durch den <table>-Tag definiert. Jede Tabelle hat mehrere Zeilen (durch den <tr>-Tag definiert), jede Zeile wird in mehrere Zellen aufgeteilt (durch den <td>-Tag definiert). Das Alphabet "td" steht für "table data", das heißt, der Inhalt der Datenzelle. Datenzellen können Text, Bilder, Listen, Absätze, Formulare, Horizontallinien, Tabellen usw. enthalten.

Tabellenbeispiel

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

Wird im Browser wie folgt angezeigt::

HTML-Tabelle und Randattribut

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

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

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

HTML-Tabellekopf

Tabellenkopf wird durch den <th>-Tag definiert.

Die meisten Browser zeigen Tabellenkopf als fett zentrierten Text an:

<table　border="1">
　　　　<tr>
　　　　　　　　<th>Header eins</<th>
　　　　　　　　<th>Header zwei</<th>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>Zeile　1, Spalte　1</td>
　　　　　　　　<td>Zeile　1, Spalte　2</td>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>Zeile　2, Spalte　1</td>
　　　　　　　　<td>Zeile　2, Spalte　2</td>
　　　　</tr>
</table>

Wird im Browser wie folgt angezeigt:

Mehr Beispiele

Tabelle ohne Rahmen
Dieser Beispiel zeigt eine Tabelle ohne Rahmen.

Tabellenkopf (Heading) in der Tabelle
Dieses Beispiel zeigt, wie der Tabellenkopf angezeigt wird.

Tabelle mit Titel
Dieser Beispiel zeigt eine Tabelle mit einem Titel (Caption).

Tabellenzellen, die über Zeilen oder Spalten hinweg reichen
Dieser Beispiel zeigt, wie Tabellenzellen, die über Zeilen oder Spalten hinweg reichen, definiert werden können.

Tabellen-Tags innerhalb der Tabelle
Dieser Beispiel zeigt, wie Elemente in verschiedenen Elementen angezeigt werden können.

Zellenabstand (Cell padding)
Dieser Beispiel zeigt, wie ein Abstand zwischen dem Zelleninhalt und dem Rahmen der Zelle durch "Cell padding" erzeugt werden kann.

Zellenabstand (Cell spacing)
Dieser Beispiel zeigt, wie die Entfernung zwischen den Zellen durch "Cell spacing" erhöht werden kann.

HTML-Tabelle-Tags