HTML-Tabellen sind ein nützliches Werkzeug, um Daten strukturiert und übersichtlich darzustellen. Sie bestehen aus Zeilen und Spalten und können für verschiedene Zwecke verwendet werden, wie z.B. Preislisten, Stundenpläne oder Datenbanken.

Grundlegende Syntax einer HTML-Tabelle

Eine HTML-Tabelle wird mit dem <table>-Tag erstellt. Tabellenzeilen werden mit dem <tr>-Tag, Tabellenzellen mit dem <td>-Tag und Tabellenkopfzellen mit dem <th>-Tag definiert.

<table>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
</tr>
<tr>
<td>Daten 1</td>
<td>Daten 2</td>
</tr>
<tr>
<td>Daten 3</td>
<td>Daten 4</td>
</tr>
</table>

Tabellenüberschriften

Tabellenüberschriften werden mit dem <th>-Tag erstellt und sind standardmäßig fett und zentriert.

<table>
<tr>
<th>Produkt</th>
<th>Preis</th>
</tr>
<tr>
<td>Apfel</td>
<td>1,00 €</td>
</tr>
<tr>
<td>Banane</td>
<td>0,80 €</td>
</tr>
</table>

Tabellenrahmen und Abstände

Sie können CSS verwenden, um Tabellenrahmen und -abstände zu definieren und die Darstellung Ihrer Tabelle zu verbessern.

<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>

<table>
<tr>
<th>Produkt</th>
<th>Preis</th>
</tr>
<tr>
<td>Apfel</td>
<td>1,00 €</td>
</tr>
<tr>
<td>Banane</td>
<td>0,80 €</td>
</tr>
</table>

Zusammenführung von Zellen

Sie können das colspan-Attribut verwenden, um Zellen horizontal zusammenzuführen, und das rowspan-Attribut, um Zellen vertikal zusammenzuführen.

<table>
<tr>
<th>Produkt</th>
<th colspan="2">Preis</th>
</tr>
<tr>
<td>Apfel</td>
<td>1,00 €</td>
<td>pro Stück</td>
</tr>
<tr>
<td rowspan="2">Banane</td>
<td>0,80 €</td>
<td>pro Stück</td>
</tr>
<tr>
<td>7,00 €</td>
<td>pro Kilo</td>
</tr>
</table>

HTML-Tabellen sind ein mächtiges Werkzeug, um Daten strukturiert und übersichtlich darzustellen. Durch die Verwendung von <table>, <tr>, <td>, <th>, colspan und rowspan können Sie komplexe Daten in einer klaren und leicht verständlichen Weise präsentieren.