HTML-Tabellen dienen dazu, Daten im Internet zu strukturieren und darzustellen. Ihre CSS-Äquivalente (wie Grids oder Flexbox) werden oft bevorzugt, weil sie moderner sind, aber HTML-Tabellen bleiben ideal, um Informationen in Tabellenform zu organisieren.
Sie ermöglichen es, Daten strukturiert darzustellen, indem sie in Zeilen und Spalten organisiert werden. Dies erleichtert die Darstellung komplexer Daten und ermöglicht es dem Benutzer, die bereitgestellten Informationen besser zu verstehen. Sie werden oft für Vergleichstabellen, Finanzberichte oder einfach zur Darstellung gut geordneter Informationen verwendet.
Struktur einer HTML-Tabelle
HTML-Tabellen werden mithilfe verschachtelter Tags erstellt, die die verschiedenen Ebenen der Struktur definieren. Hier sind die wichtigsten Elemente, die du verwenden kannst, um eine Tabelle zu erstellen.
1. <table >: Der Hauptcontainer
Dieses Tag ist der Hauptcontainer jeder HTML-Tabelle. Es enthält alle Elemente der Tabelle, einschließlich Zeilen, Spalten und Zellen. Standardmäßig hat eine Tabelle keine sichtbare Umrandung. Um ihr eine hinzuzufügen, kann das Attribut border verwendet werden.
2. <thead >, <tbody > et <tfoot >: Organisation der Tabelle
- <thead> : Enthält die Spaltenüberschriften. Die Verwendung dieses Tags ermöglicht es, die Elemente zu gruppieren, die als Kopfzeile der Tabelle dienen. Die Tags in <thead> sind oft <th> (Tabellenkopfzeilen).
- <tbody> : Enthält den Hauptkörper der Tabelle, hier werden die Daten normalerweise platziert. Die Datenzeilen werden mit dem <tr>-Tag erstellt.
- <tfoot> : Wird verwendet, um die Informationen zu gruppieren, die am unteren Ende der Tabelle stehen, wie eine Zusammenfassung oder Gesamtergebnisse.
Hier ist ein Beispiel für eine Tabelle:
<table border="1">
<thead>
<tr>
<th>Variable</th>
<th>Typ</th>
<th>Beschreibung</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alter</td>
<td>Ganzzahl</td>
<td>Repräsentiert das Alter einer Person in Jahren</td>
</tr>
<tr>
<td>Einkommen</td>
<td>Fließkomma</td>
<td>Repräsentiert das Jahreseinkommen in Euro</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Gesamtzahl der Variablen</td>
<td>2</td>
</tr>
</tfoot>
</table>
Hier erstellen <tr>, <th> und <td> jeweils Zeilen, Kopfzellen (oft standardmäßig fett formatiert) und Datenzellen.
Hier ist diese einfache Tabelle konkret dargestellt:
| Variable | Typ | Beschreibung |
|---|---|---|
| Alter | Ganzzahl | Repräsentiert das Alter einer Person in Jahren |
| Einkommen | Fließkomma | Repräsentiert das Jahreseinkommen in Euro |
| Gesamtzahl der Variablen | 2 | |
Komplexe Tabellen
HTML-Tabellen können recht komplex werden, wenn sie große Datenmengen oder detailliertere Beziehungen zwischen den verschiedenen Spalten und Zeilen darstellen müssen. Hier ist ein Beispiel für eine komplexe Tabelle, die fusionierte Spalten und Zeilen verwendet:
<table id="maTable" border="1">
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Berufsinformationen</th>
<th rowspan="2">Gehalt (€)</th>
</tr>
<tr>
<th>Beruf</th>
<th>Stufe</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob Sponge</td>
<td>Data Analyst</td>
<td>Junior</td>
<td>45 000</td>
</tr>
<tr>
<td>Alice Wonderland</td>
<td>Data Scientist</td>
<td>Senior</td>
<td>60 000</td>
</tr>
<tr>
<td>Bart Simpson</td>
<td>Data Engineer</td>
<td>Mittelstufe</td>
<td>55 000</td>
</tr>
<tr>
<td>Rick Sanchez</td>
<td>Architecte Big Data</td>
<td>Experte</td>
<td>75 000</td>
</tr>
<tr>
<td>Morty Smith</td>
<td>Machine Learning Engineer</td>
<td>Junior</td>
<td>70 000</td>
</tr>
</tbody>
</table>
- Spaltenzusammenführungcolspan: Im <thead>-Kopfbereich deckt die Zelle „Berufsinformationen“ zwei Spalten („Beruf“ und „Stufe“) ab. Dies wird durch das Attribut colspan=„2“ erreicht.
- Zeilenzusammenführung rowspan: Die Zelle „Name“ ist über zwei Kopfzeilen zusammengeführt, dank rowspan=„2“, um anzuzeigen, dass der Name jeder Person unabhängig von den Unterkategorien (Beruf und Stufe) ist.
- Komplexere Struktur: Diese Art von Tabelle ist besonders nützlich, um Daten mit Unterkategorien darzustellen, wie z.B. Kompetenzstufen oder zusätzliche Details zu jedem Eintrag.
- Durch die Verwendung fortgeschrittener Techniken wie colspan und rowspan kannst Du Tabellen erstellen, die nicht nur Deine Daten klar strukturieren, sondern auch ein komplexeres Informationsniveau bieten, während sie für Benutzer leicht lesbar bleiben.
Das Ergebnis ist wie folgt:
| Name | Berufsinformationen | Gehalt (€) | |
|---|---|---|---|
| Beruf | Stufe | ||
| Bob Sponge | Data Analyst | Junior | 45 000 |
| Alice Wonderland | Data Scientist | Senior | 60 000 |
| Bart Simpson | Data Engineer | Mittelstufe | 55 000 |
| Rick Sanchez | Big Data Architekt | Experte | 75 000 |
| Morty Smith | Machine Learning Engineer | Junior | 70 000 |
HTML-Tabellen stilisieren
Obwohl einige Eigenschaften es ermöglichen können, eine HTML-Tabelle zu personalisieren, ist die bevorzugte Methode oft CSS.
Das folgende Beispiel zeigt eine relativ einfache Anpassung einer HTML-Tabelle:
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid schwarz;
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
<table>
<thead>
<tr>
<th>Name</th>
<th>Beruf</th>
<th>Gehalt (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob Sponge</td>
<td>Data Analyst</td>
<td>45 000</td>
</tr>
<tr>
<td>Alice Wonderland</td>
<td>Data Scientist</td>
<td>60 000</td>
</tr>
<tr>
<td>Bart Simpson</td>
<td>Data Engineer</td>
<td>55 000</td>
</tr>
<tr>
<td>Rick Sanchez</td>
<td>Architecte Big Data</td>
<td>75 000</td>
</tr>
<tr>
<td>Morty Smith</td>
<td>Machine Learning Engineer</td>
<td>70 000</td>
</tr>
</tbody>
</table>
Das Ergebnis wirkt bereits weniger nüchtern:
| Name | Beruf | Gehalt (€) |
|---|---|---|
| Bob Sponge | Data Analyst | 45 000 |
| Alice Wonderland | Data Scientist | 60 000 |
| Bart Simpson | Data Engineer | 55 000 |
| Rick Sanchez | Big Data Architekt | 75 000 |
| Morty Smith | Machine Learning Engineer | 70 000 |
Durch die feine Nutzung von CSS in Kombination mit den Tabellen wird es möglich, visuell sehr ansprechende Ergebnisse zu erzielen, bestimmte Elemente hervorzuheben und vieles mehr.
Zugänglichkeit und bewährte Praktiken
Tabellen können Zugänglichkeitsprobleme verursachen, wenn sie nicht gut strukturiert sind. Dies kann je nach Browser umso problematischer sein, vor allem jedoch für Benutzer von Bildschirmlesegeräten. Dabei handelt es sich um Software, die es sehbehinderten Personen ermöglicht, im Internet zu navigieren. Diese Software konvertiert das, was sich auf dem Bildschirm befindet, in Audio- oder Braille-Ausgaben.
Hier sind einige bewährte Praktiken, um deine Tabellen zugänglich zu machen:
- Verwende klare Überschriften: Die <th>-Tags helfen Bildschirmlesegeräten, die Spaltenüberschriften zu verstehen. Jede Überschrift sollte den Inhalt der jeweiligen Spalte oder Zeile genau beschreiben, damit Benutzer leicht in der Tabelle navigieren können.
- Füge Scope-Attribute hinzu: Verwende scope=„col“ oder scope=„row“, um anzugeben, zu welcher Spalte oder Zeile eine Überschrift gehört. Dies hilft Bildschirmlesegeräten, jede Datenzelle mit ihrer entsprechenden Überschrift zu verknüpfen. Zum Beispiel:
<table border="1">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Beruf</th>
<th scope="col">Gehalt (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice Wonderland</td>
<td>Data Scientist</td>
<td>60 000</td>
</tr>
</tbody>
</table>
Füge eine <caption> hinzu: Dieses Tag kann verwendet werden, um der Tabelle einen beschreibenden Titel zu geben. Dadurch können Benutzer, einschließlich derer, die Bildschirmlesegeräte verwenden, schnell den Zweck der Tabelle verstehen. Zum Beispiel:
<table border="1">
<caption>Lohn-Tabelle der Mitarbeiter des Data-Teams</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Beruf</th>
<th scope="col">Gehalt (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice Wonderland</td>
<td>Data Scientist</td>
<td>60 000</td>
</tr>
</tbody>
</table>
- Bevorzuge CSS für die Personalisierung: Halte das HTML einfach und verwende CSS für die Personalisierung. Dies verbessert die Wartbarkeit und macht den Code zugänglicher. Zum Beispiel kannst Du mit CSS Deine Tabellen stilisieren, um sie attraktiver zu gestalten, ohne das HTML zu überlasten.
- Komplexe Tabellen und Zuordnung von Überschriften zu Zellen: Bei der Arbeit mit komplexen Tabellen, in denen Daten auf mehreren Ebenen organisiert sind, ist es hilfreich, jede Datenzelle mit ihrer entsprechenden Überschrift mithilfe der Attribute headers und id zu verknüpfen. Dadurch wird eine bessere Navigation für Nutzer von Screenreadern gewährleistet. Zum Beispiel:
<table border="1">
<thead>
<tr>
<th id="name">Name</th>
<th id="beruf">Beruf</th>
<th id="gehalt">Durchschnittsgehalt (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="name">Alice Wonderland</td>
<td headers="beruf">Data Scientist</td>
<td headers="gehalt">45 000</td>
</tr>
</tbody>
</table>
Tabellen und dynamische Daten
Es kann hilfreich sein, Tabellen eine dynamische Funktionalität hinzuzufügen. Mit JavaScript kannst Du Zeilen dynamisch hinzufügen oder entfernen, wodurch die Benutzeroberflächen interaktiver werden.
Hier ein einfaches Beispiel für ein Skript, das eine Zeile zu einer Tabelle hinzufügt:
<button onclick="zeileHinzufügen()">Zeile hinzufügen</button> <style> table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid schwarz; padding: 10px; text-align: left; } th { background-color: #f2f2f2; } </style>
<table id=„meineTabelle„ border=„1“>
<thead>
<tr>
<th>Name</th>
<th>Beruf</th>
<th>Gehalt (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice Wonderland</td>
<td>Data Scientist</td>
<td>60 000</td>
</tr>
</tbody>
</table>
<script>
function zeileHinzufügen() {
var table = document.getElementById(„maTable“).getElementsByTagName(‚tbody‘)[0];
var neueZeile = table.insertRow();
var zelle1 = nouvelleLigne.insertCell(0);
var zelle2 = nouvelleLigne.insertCell(1);
var zelle3 = nouvelleLigne.insertCell(2);
zelle1.innerHTML = „Vorname Nachname„;
zelle2.innerHTML = „Data Engineer“;
zelle3.innerHTML = „55 000“;
}
</script>
Die Schaltfläche wird also eine neue Zeile hinzufügen, in diesem Beispiel mit Standardwerten.
| Name | Beruf | Gehalt (€) |
|---|---|---|
| Alice Wunderland | Data Scientist | 60 000 |
Fazit
HTML-Tabellen sind leistungsstark, um Daten in strukturierter Form darzustellen, was die Lesbarkeit und das Verständnis der Informationen erleichtert. Wenn Du die grundlegenden Elemente wie <table>, <thead>, <tbody>, <tr>, <th> und <td> sowie fortgeschrittenere Konzepte wie `colspan` und `rowspan` kennst, kannst Du anspruchsvolle und zugängliche Tabellen erstellen. In Kombination mit CSS für grafische Anpassungen und JavaScript für interaktive Funktionen wird Deine Tabelle noch vielseitiger. Durch die Einhaltung bewährter Praktiken, insbesondere im Hinblick auf Barrierefreiheit, stellst Du sicher, dass Deine Tabellen von einer breiten Nutzergruppe verwendet werden können und auf vielen Browsern funktionieren.
