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.

<summary> Überschrift

CSS - Bild vergrößern mit dem „Checkbox Hack”

PHP - Worte löschen mit Ausnahmen (RegEx)

JavaScript - Text bei onMouseOver und onMouseOut ersetzen

MySQL - Tabelle nach 7 Tagen leeren

Zu viel Animation
Zu viel Animation, zum Beispiel mit animierten Gifs, wirkt unprofessionell und lenkt ab. Jede Seite sollte höchstens ein animiertes Element enthalten, besser man verzichtet ganz darauf. (Alles, was über den Bildschirm hopst und zappelt und blinkt — weg damit! ;- )