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.

<td> Tabellenspalte

CSS - Container mit Eselsohren

PHP - Counter für Seitenaufrufe

JavaScript - Datum und Uhrzeit als Zeichenkette anzeigen

MySQL - Den nächsten und vorherigen Datensatz ermitteln