Tabellen
Tabellen sind eine hervorragende Möglichkeit, strukturierte Daten auf einer Webseite darzustellen. HTML bietet spezielle Tags, um Tabellen zu erstellen und zu formatieren.
5.1. Tabellenstruktur
Eine HTML-Tabelle besteht aus mehreren grundlegenden Tags:
<table>: Der Container für die gesamte Tabelle.<tr>: Definiert eine Tabellenzeile.<td>: Definiert eine Tabellenzelle.<th>: Definiert eine Tabellenkopfzelle (header cell).
Beispiel: Grundstruktur einer Tabelle
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabellenbeispiel</title>
</head>
<body>
<table>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 3</th>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
</table>
</body>
</html>
5.2. Erweiterte Tabellen
HTML bietet zusätzliche Tags, um Tabellen weiter zu strukturieren und zu formatieren:
<thead>: Definiert den Kopfbereich der Tabelle.<tbody>: Definiert den Hauptteil der Tabelle.<tfoot>: Definiert den Fußbereich der Tabelle.
Beispiel: Tabelle mit Kopf-, Körper- und Fußbereich
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Erweiterte Tabelle</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Fuß 1</td>
<td>Fuß 2</td>
<td>Fuß 3</td>
</tr>
</tfoot>
</table>
</body>
</html>
5.3. Tabellenzellen verbinden
Manchmal ist es notwendig, mehrere Zellen in einer Tabelle zusammenzufassen. Dies kann horizontal mit dem colspan-Attribut oder vertikal mit dem rowspan-Attribut geschehen.
Beispiel: Zellen verbinden
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabellenzellen verbinden</title>
</head>
<body>
<table>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 3</th>
</tr>
<tr>
<td>Zelle 1</td>
<td colspan="2">Zelle 2 und 3 verbunden</td>
</tr>
<tr>
<td rowspan="2">Zelle 4 und 5 verbunden</td>
<td>Zelle 6</td>
<td>Zelle 7</td>
</tr>
<tr>
<td>Zelle 8</td>
<td>Zelle 9</td>
</tr>
</table>
</body>
</html>