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>

Beispiel anzeigen

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>

Beispiel anzeigen

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>

Beispiel anzeigen

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

JavaScript - Textteil auswählen

MySQL - Alle Einträge nach einem Tag löschen

Inhalt mit Humor
Lockern Sie Ihre privaten Seiten mit Humor auf, das macht die Seite persönlicher. Einfügen von lustigen Bildern oder Text, auch hier gilt: Bitte nicht zu viel!