HTML Tische
Mit HTML-Tabellen können Webentwickler Daten in Zeilen und Spalten anordnen.
Beispiel
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Definieren Sie eine HTML-Tabelle
Eine Tabelle in HTML besteht aus Tabellenzellen innerhalb von Zeilen und Spalten.
Beispiel
Eine einfache HTML-Tabelle:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
Try it Yourself »
Tabellenzellen
Jede Tabellenzelle wird durch ein <td>- und ein </td>-Tag definiert.
td steht für Tabellendaten (table data).
Alles zwischen <td> und </td> ist der Inhalt der Tabellenzelle.
Hinweis: Tabellendatenelemente sind die Datencontainer der Tabelle.
Sie können alle Arten von HTML-Elementen enthalten; Texte, Bilder, Listen, andere Tabellen usw.
Tabellenzeilen
Jede Tabellenzeile beginnt mit einem <tr> und endet mit einem </tr>-Tag.
tr steht für Tabellenzeile (table row).
Beispiel
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Try it Yourself »
Sie können in einer Tabelle beliebig viele Zeilen haben. Stellen Sie jedoch sicher, dass die Anzahl der Zellen in jeder Zeile gleich ist.
Hinweis: Es gibt Zeiten, in denen eine Zeile weniger oder mehr Zellen als eine andere haben kann. Das erfahren Sie in einem späteren Kapitel.
Tabellenüberschriften
Manchmal möchten Sie, dass Ihre Zellen Überschriften sind. Verwenden Sie in diesen Fällen das Tag <th> anstelle des Tags <td>-Tag:
Beispiel
Die erste Zeile soll Tabellenüberschriften sein:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Try it Yourself »
Standardmäßig ist der Text in <th>-Elementen fett und zentriert, aber Sie können das mit CSS ändern.
HTML Übungen
HTML-Tabellen-Tags
| Tag | Beschreibung |
|---|---|
| <table> | Definiert eine Tabelle |
| <th> | Definieren Sie eine Kopfzelle in einer Tabelle |
| <tr> | Definiert eine Zeile in einer Tabelle |
| <td> | Definiert eine Zelle in einer Tabelle |
| <caption> | Definieren Sie eine Tabellenüberschrift |
| <colgroup> | Geben Sie eine Gruppe von einer oder mehreren Spalten in einer Tabelle zur Formatierung an |
| <col> | Geben Sie Spalteneigenschaften für jede Spalte innerhalb eines <colgroup>-Elements an |
| <thead> | Gruppiert den Header-Inhalt in einer Tabelle |
| <tbody> | Gruppiert den Hauptinhalt in einer Tabelle |
| <tfoot> | Gruppiert den Inhalt der Fußzeile in einer Tabelle |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz.
