Ein Leitfaden zu HTML-Tabellen: Definition, Beispiele und Anwendung

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.

Schon mal was von HTML5 gehört?

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. : 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.

, et : 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

Erstelle strukturierte Tabellen

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

Erfahre mehr über Datenvisualisierung

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.

Nutze HTML als Data Analyst

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>

Schon mal was von Low Code gehört?

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.

Zeile hinzufügen

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.

Werde HTML Experte