Der <table>
-Tag in HTML: Beispiele und Anwendung
Der <table>
-Tag in HTML wird verwendet, um Tabellen auf einer Webseite darzustellen. Tabellen dienen zur strukturierten Darstellung von Daten in Zeilen und Spalten. In diesem Artikel lernen Sie die grundlegende Syntax, wichtige Elemente und Techniken zur Gestaltung und Optimierung von Tabellen kennen.
Grundlegende Syntax einer Tabelle
Eine HTML-Tabelle wird mit dem <table>
-Tag erstellt. Sie besteht aus Zeilen (<tr>
), die wiederum Zellen enthalten. Diese Zellen werden mit <td>
(Tabellenzelle) oder <th>
(Tabellenkopf) definiert.
Beispiel:
<table>
<tr>
<th>Spalte 1</th>
<th>Spalte 2</th>
<th>Spalte 3</th>
</tr>
<tr>
<td>Wert 1</td>
<td>Wert 2</td>
<td>Wert 3</td>
</tr>
<tr>
<td>Wert 4</td>
<td>Wert 5</td>
<td>Wert 6</td>
</tr>
</table>
Darstellung im Browser:
Spalte 1 | Spalte 2 | Spalte 3 |
---|---|---|
Wert 1 | Wert 2 | Wert 3 |
Wert 4 | Wert 5 | Wert 6 |
Wichtige Elemente innerhalb des <table>
-Tags
<table>
: Das Hauptelement, das die gesamte Tabelle definiert.<tr>
: Eine Zeile in der Tabelle.<td>
: Eine Zelle, die normale Daten enthält.<th>
: Eine Kopfzelle, die standardmäßig fett und zentriert dargestellt wird.<caption>
: Fügt der Tabelle eine Überschrift hinzu.
Beispiel mit Caption:
<table>
<caption>Beispieltabelle</caption>
<tr>
<th>Produkt</th>
<th>Preis</th>
<th>Anzahl</th>
</tr>
<tr>
<td>Apfel</td>
<td>1,00 €</td>
<td>10</td>
</tr>
</table>
Erweiterte Funktionen
Zellen über mehrere Spalten oder Zeilen verbinden
colspan
: Kombiniert mehrere Spalten.rowspan
: Kombiniert mehrere Zeilen.
Beispiel:
<table>
<tr>
<th>Name</th>
<th colspan="2">Details</th>
</tr>
<tr>
<td>Apfel</td>
<td>Rot</td>
<td>1,00 €</td>
</tr>
<tr>
<td>Banane</td>
<td>Gelb</td>
<td>0,50 €</td>
</tr>
</table>
Darstellung im Browser:
Name | Details | |
---|---|---|
Apfel | Rot | 1,00 € |
Banane | Gelb | 0,50 € |
Tabellen mit CSS gestalten
Mit CSS können Tabellen ansprechender gestaltet werden:
Beispiel:
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
th {
background-color: #f4f4f4;
}
</style>
Responsive Tabellen
Bei komplexen Tabellen kann die Darstellung auf mobilen Geräten schwierig werden. Mit CSS können Sie Tabellen für kleinere Bildschirme optimieren.
Beispiel:
<style>
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
</style>
Fazit
Der <table>
-Tag ist ein leistungsfähiges Werkzeug in HTML, um Daten in strukturierter Form darzustellen. Mit grundlegender Syntax, erweiterten Funktionen wie colspan
und rowspan
sowie durch die Nutzung von CSS können Tabellen vielseitig und ansprechend gestaltet werden. Für moderne Webseiten ist es zudem wichtig, Tabellen responsiv zu gestalten, um sie auf verschiedenen Geräten nutzbar zu machen.
Letzte Bearbeitung am Montag, 30. Dezember 2024 – 11:37 Uhr von Alex, Webmaster für Google und Bing SEO.