HTML `<table>`-Tag

Das <table>-Tag definiert eine HTML-Tabelle. Es enthält andere HTML-Elemente, die die Struktur der Tabelle bestimmen.

Das <tr>-Tag bestimmt die Tabellenzeilen. Eine Zeile kann ein oder mehrere <td>- oder <th>-Elemente enthalten, die jeweils eine Tabellenzelle und einen Tabellenkopf definieren.

Das <th>-Tag wird in die erste Zeile der Tabelle eingefügt. Der Text darin ist standardmäßig fett und zentriert.

TIP

Das <th>-Tag ist kein zwingend erforderliches Element in der Tabelle, aber wir empfehlen dessen Verwendung, da es zu einem besseren Tabellenlayout beiträgt und Suchmaschinen hilft, den Inhalt der Tabelle besser zu indexieren.

Eine komplexere Tabelle kann auch <caption>, <thead>, <tbody>, <tfoot> oder <colgroup>-Elemente enthalten.

DANGER

Es wird empfohlen, Tabellen nicht für das Seitenlayout zu verwenden. Manchmal werden Tabellen in HTML missbräuchlich zur Steuerung des Seitenlayouts eingesetzt. Dafür können Sie CSS als Alternative zu HTML-Tabellen verwenden.

Syntax

Das <table>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<table>) und dem schließenden (</table>)-Tag geschrieben.

Beispiel für das HTML `<table>`-Tag:

HTML <table>-Tag

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Month</th>
        <th>Date</th>
      </tr>
      <tr>
        <td>June</td>
        <td>10.06.2018</td>
      </tr>
      <tr>
        <td>July</td>
        <td>15.07.2018</td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

Ergebnis

table example

Attribute

DANGER

Die Attribute des <table>-Tags werden in HTML5 nicht unterstützt. Verwenden Sie zur Formatierung von Tabellen die unten aufgeführten CSS-Eigenschaften.

Attribut	Wert	Beschreibung	CSS-Eigenschaft
align	left center right	Definiert, wie die Tabelle im Verhältnis zum umgebenden Text ausgerichtet werden soll. Wird in HTML5 nicht unterstützt.	margin
bgcolor	rgb(x,x,x) #xxxxxx colorname	Definiert die Hintergrundfarbe der Tabelle. Wird in HTML5 nicht unterstützt.	background-color
border	1 0	Definiert die Größe des Rahmens um die Tabelle. Wird in HTML5 nicht unterstützt.	border
cellpadding	pixels	Definiert den Abstand zwischen Zellwand und Zellinhalt. Wird in HTML5 nicht unterstützt.	padding
cellspacing	pixels	Definiert den Abstand zwischen den Zellen. Wird in HTML5 nicht unterstützt.	border-spacing
frame	void above below hsides lhs rhs vsides box border	Definiert, welche Seite des Rahmens um die Tabelle angezeigt werden soll. Wird in HTML5 nicht unterstützt.	border-style border-width
rules	none groups rows cols all	Definiert, welche Teile der inneren Rahmen sichtbar sein sollen. Wird in HTML5 nicht unterstützt.	border (Verwenden Sie diese Eigenschaft entsprechend mit thead, tbody, tfoot, col oder colgroup HTML-Tags).
width	pixels	Definiert die Breite der Tabelle. Wird in HTML5 nicht unterstützt.	width

Das <table>-Tag unterstützt auch die Globalen Attribute und die Ereignisattribute.

Practice

Welche Verwendungszwecke haben die <table>, <tr>, <td> und <th>-Tags in HTML?

Das <table>-Tag wird verwendet, um eine Tabelle zu erstellen.Das <tr>-Tag wird verwendet, um eine Zeile in der Tabelle zu erstellen.Das <td>-Tag wird verwendet, um eine Zelle in der Tabelle zu erstellen.Das <th>-Tag wird verwendet, um eine Kopfzelle in der Tabelle zu erstellen.Das <th>-Tag wird verwendet, um eine Fußnote in der Tabelle zu erstellen.Das <td>-Tag wird verwendet, um Bilder in die Tabelle einzufügen.

HTML <table>-Tag ​

Syntax ​

Beispiel für das HTML <table>-Tag: ​

Ergebnis ​