HTML - Element: <table>
Sie können in HTML Tabellen definieren, um tabellarische Daten darzustellen. Verwenden Sie Tabellen jedoch nicht zum Layout der Seite, denn dafür gibt es CSS.
Der <table>-Tag definiert den Beginn einer Tabelle. Um eine neue Tabellenzeile einzufügen verwenden Sie den
<tr>-Tag (tr = table row = Tabellenzeile). Innerhalb des <tr>-Tags erstellen Sie mit dem <td>-Tag
(td = table data = Tabellendaten) eine Tabellenspalte.
Mit dem <colgroup>-Tag und dem
<col>-Tag können Sie Tabellenspalten vordefinieren.
<table border="1"> <tr> <td> Tabellenzeile 1 - Tabellenspalte 1 </td> <td> Tabellenzeile 1 - Tabellenspalte 2 </td> <td> Tabellenzeile 1 - Tabellenspalte 3 </td> </tr> <tr> <td> Tabellenzeile 2 - Tabellenspalte 1 </td> <td> Tabellenzeile 2 - Tabellenspalte 2 </td> <td> Tabellenzeile 2 - Tabellenspalte 3 </td> </tr> <tr> <td> Tabellenzeile 3 - Tabellenspalte 1 </td> <td> Tabellenzeile 3 - Tabellenspalte 2 </td> <td> Tabellenzeile 3 - Tabellenspalte 3 </td> </tr> </table>
Tabellenkopf, Tabellenkörper und Tabellenfuß
Der <thead>-Tag definiert einen Tabellenkopf. Text der im <th>-Tag (th = table header = Tabellenkopf)
steht wird zentriert und Fett hervorgehoben angezeigt. Der <caption>-Tag definiert eine Tabellenüberschrift.
Tabellenkörper (<tbody>) und Tabellenfuß (<tfoot>) sind Optional und können zur Gliederung der Tabelle
hinzugefügt werden.
<table border="1"> <caption> Tabellenüberschrift </caption> <thead> <tr> <th> Kopf 1 </th> <th> Kopf 2 </th> <th> Kopf 3 </th> </tr> </thead> <tbody> <tr> <td> Tabellenzeile 1 - Tabellenspalte 1 </td> <td> Tabellenzeile 1 - Tabellenspalte 2 </td> <td> Tabellenzeile 1 - Tabellenspalte 3 </td> </tr> <tr> <td> Tabellenzeile 2 - Tabellenspalte 1 </td> <td> Tabellenzeile 2 - Tabellenspalte 2 </td> <td> Tabellenzeile 2 - Tabellenspalte 3 </td> </tr> </tbody> <tfoot style="background-color: Yellow;"> <tr> <td> Tabellenzeile 3 - Tabellenspalte 1 </td> <td> Tabellenzeile 3 - Tabellenspalte 2 </td> <td> Tabellenzeile 3 - Tabellenspalte 3 </td> </tr> </tfoot> </table>
Attribute
Mit den Attributen colspan="" und rowspan="" können Sie Tabellenspalten über mehrere Spalten und Zeilen setzen. Wenn Sie das Attribut border="1" weg lassen, so wird die Tabelle ohne Rahmen angezeigt.
<table border="1"> <tr> <td> Tabellenzeile 1 - Tabellenspalte 1 </td> <td colspan="2"> Tabellenzeile 1 - Tabellenspalte 2 und 3 </td> </tr> <tr> <td> Tabellenzeile 2 - Tabellenspalte 1 </td> <td> Tabellenzeile 2 - Tabellenspalte 2 </td> <td> Tabellenzeile 2 - Tabellenspalte 3 </td> </tr> <tr> <td rowspan="2"> Tabellenzeile 3 und 4 - Tabellenspalte 1 </td> <td> Tabellenzeile 3 - Tabellenspalte 2 </td> <td> Tabellenzeile 3 - Tabellenspalte 3 </td> </tr> <tr> <td> Tabellenzeile 4 - Tabellenspalte 2 </td> <td> Tabellenzeile 4 - Tabellenspalte 3 </td> </tr> <tr> <td> Tabellenzeile 5 - Tabellenspalte 1 </td> <td> Tabellenzeile 5 - Tabellenspalte 2 </td> <td> Tabellenzeile 5 - Tabellenspalte 3 </td> </tr> </table>
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<body> Textkörper
CSS - Texteingabe nur in Großbuchstaben
PHP - Suche nach Übereinstimmungen mit regulärem Ausdruck