HTML <table> Tag
Definition und Verwendung
<table> Die Beschriftung definiert das HTML-Tabellenformat.
Eine HTML-Tabelle besteht aus einem <table> Element und eine oder mehrere <tr>,<th> und <td> Bestandteile:
- <tr>-Element Definieren Sie die Tabellenzeile
- <th>-Element Definieren Sie die Tabellenüberschrift
- <td>-Element Definieren Sie die Tabellenzelle
HTML-Tabellen können auch folgende Elemente enthalten:
Weitere Informationen:
HTML-Tutorial:HTML Tabelle
HTML DOM Referenzhandbuch:Tabellenobjekt
CSS-Tutorial:Tabellenstil festlegen
Beispiel
Beispiel 1
Eine einfache HTML-Tabelle mit zwei Spalten und zwei Zeilen:
<table>
<tr>
<th>Monat</th>
<th>Ersparnisse</th>
</tr>
<tr>
<td>Januar</td>
<td>￥3400</td>
</tr>
</table>
Beispiel 2
Wie man dem Tabellenrahmen eine Kollapsfunktion hinzufügt (CSS verwenden):
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Monat</th>
<th>Ersparnisse</th>
</tr>
<tr>
<td>Januar</td>
<td>￥3400</td>
</tr>
<tr>
<td>Februar</td>
<td>￥4500</td>
</tr>
</table>
</body>
</html>
Beispiel 3
Wie man die Tabelle rechts ausrichtet (CSS verwenden):
<table style="float:right">
<tr>
<th>Monat</th>
<th>Ersparnisse</th>
</tr>
<tr>
<td>Januar</td>
<td>￥3400</td>
</tr>
<tr>
<td>Februar</td>
<td>￥4500</td>
</tr>
</table>
Beispiel 4
Wie man die Tabelle zentriert (CSS verwenden):
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
table.center {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<table class="center">
<tr>
<th>Monat</th>
<th>Ersparnisse</th>
</tr>
<tr>
<td>Januar</td>
<td>￥3400</td>
</tr>
<tr>
<td>Februar</td>
<td>￥4500</td>
</tr>
</table>
Beispiel 5
Wie man der Tabelle eine Hintergrundfarbe hinzufügt (CSS verwenden):
<table style="background-color:#00FF00">
<tr>
<th>Monat</th>
<th>Ersparnisse</th>
</tr>
<tr>
<td>Januar</td>
<td>￥3400</td>
</tr>
<tr>
<td>Februar</td>
<td>￥4500</td>
</tr>
</table>
Beispiel 6
Wie man dem Tabelleninhalt Innenabstand hinzufügt (CSS verwenden):
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Monat</th>
<th>Ersparnisse</th>
</tr>
<tr>
<td>Januar</td>
<td>￥3400</td>
</tr>
<tr>
<td>Februar</td>
<td>￥4500</td>
</tr>
</table>
</body>
</html>
Beispiel 7
Wie man die Breite der Tabelle einstellt (CSS verwenden):
<table style="width:400px">
<tr>
<th>Monat</th>
<th>Ersparnisse</th>
</tr>
<tr>
<td>Januar</td>
<td>￥3400</td>
</tr>
<tr>
<td>Februar</td>
<td>￥4500</td>
</tr>
</table>
Beispiel 8
Wie man Kopfzeilen in Tabellen erstellt:
<table>
<tr>
<th>Name</th>
<th>E-Mail</th>
<th>Telefon</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>bill.gates@example.com</td>
<td>138-1234-5678</td>
</tr>
</table>
Beispiel 9
Wie man eine Tabelle mit Überschrift erstellt:
<table>
<caption>Monatliche Ersparnisse</caption>
<tr>
<th>Monat</th>
<th>Ersparnisse</th>
</tr>
<tr>
<td>Januar</td>
<td>￥3400</td>
</tr>
<tr>
<td>Februar</td>
<td>￥4500</td>
</tr>
</table>
Beispiel 10
Wie definiert man Zellen von Tabellenzellen, die über mehrere Zeilen oder Spalten hinausgehen:
<table>
<tr>
<th>Name</th>
<th>E-Mail</th>
<th colspan="2">Telefon</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>bill.gates@example.com</td>
<td>138-1234-5678</td>
<td>186-2345-6789</td>
</tr>
</table>
Globale Attribute
<table> Der Tag unterstützt auch Globale Attribute in HTML.
Ereignisattribute
<table> Der Tag unterstützt auch Ereignisattribute in HTML.
Standardmäßige CSS-Einstellungen
Die meisten Browser verwenden folgende Standardwerte zur Anzeige <table> Element:
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
Browserunterstützung
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Unterstützung | Unterstützung | Unterstützung | Unterstützung | Unterstützung |
