HTML-Tabellen
In HTML können Sie Tabellen für Ihre Website mit dem <table>-Tag in Verbindung mit den <tr>-, <td>- und <th>-Tags erstellen.
HTML-Tabellen ermöglichen die Darstellung von Daten (z. B. Bilder, Text, Links) in Spalten und Zeilen von Zellen. Tabellenzeilen können durch die Elemente <thead>, <tfoot> und <tbody> jeweils in Kopf-, Fuß- und Körperbereiche gruppiert werden.
In HTML5 können wir <tfoot> entweder vor oder nach <tbody> platzieren. Sie müssen nach allen <caption>, <colgroup> und <thead>-Elementen stehen.
Die meisten Attribute des <table>-Elements werden in HTML5 nicht mehr verwendet. Wenn Sie das Erscheinungsbild der Tabelle gestalten möchten, können Sie stattdessen CSS verwenden.
Mehrere Zeilen und Spalten überbrücken
Es ist möglich, die Zeilen und Spalten einer Tabelle über viele andere Zeilen und Spalten hinweg zu erstrecken.
Normalerweise kann eine Tabellenzelle nicht in den Bereich einer anderen Zelle hineinragen. Wenn Sie jedoch mehrere Zeilen oder Spalten in einer Tabelle überbrücken möchten, können Sie die colspan oder rowspan Attribute verwenden.
Tabellenbeschriftungen hinzufügen
Sie können das <caption>-Element verwenden, um eine Beschriftung für Tabellen festzulegen. Es sollte direkt nach dem öffnenden <table>-Tag platziert werden. Standardmäßig befindet sich die Beschriftung oben an der Tabelle, ihre Position kann jedoch mit der CSS caption-side-Eigenschaft geändert werden.
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:
Beispiel einer HTML-Tabelle|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>January</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>February</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>Ergebnis
| Month | Date |
|---|---|
| January | 10.01.2014 |
| February | 10.01.2014 |
Im gegebenen Beispiel verwenden wir das <table>-Tag, um eine Tabelle zu erstellen. Anschließend verwenden wir das <tr>-Tag, um die Tabelle in Zeilen aufzuteilen. Das <th>-Tag wird für die Tabellenkopfzellen verwendet, in denen der Titel steht. Mit anderen Worten wird die Tabellenzeile in Überschriften unterteilt. Das <td>-Tag wird für Tabellenzellen verwendet, in denen die Informationen stehen.
Wenn Sie die Überschrift in einer Zelle anzeigen möchten, können Sie das colspan Attribut verwenden.
Beispiel für das HTML <table>-Tag mit dem colspan Attribut:
Beispiel einer HTML-Tabelle mit colspan Attribut|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>January</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>February</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>Ergebnis
| Month and Date |
|---|
| January |
| February |
Dasselbe lässt sich auch mit Zeilen umsetzen, indem das rowspan Attribut verwendet wird.
Beispiel für das HTML <table>-Tag mit dem rowspan Attribut:
Beispiel einer HTML-Tabelle mit rowspan Attribut|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>January</td>
<td rowspan="2">10.01.2014</td>
</tr>
<tr>
<td>February</td>
</tr>
</table>
</body>
</html>Ergebnis
| Month | Date |
|---|---|
| January | 10.01.2014 |
| February |
Praxis
Welche Funktionen und Merkmale hat eine HTML-Tabelle?