HTML - Tabellen

Grundlegende Tabellenstruktur

Die Struktur einer HTML-Tabelle besteht aus mehreren Elementen, die zusammenarbeiten, um eine strukturierte Darstellung von Daten zu erstellen. Das Kernelement jeder Tabelle ist das <table>-Element, das die Tabelle selbst definiert. Innerhalb des <table>-Elements befinden sich ein oder mehrere <tr>-Elemente, die jeweils eine Tabellenzeile darstellen.

Innerhalb jedes <tr>-Elements können Sie zwei Arten von Zellen hinzufügen: Tabellenkopfzellen und Tabellendatenzellen. Tabellenkopfzellen werden mit dem <th>-Element definiert und dienen zur Darstellung der Spaltenüberschriften oder Zeilenüberschriften der Tabelle. Diese Zellen werden standardmäßig automatisch mit fetter Schrift und zentrierter Ausrichtung formatiert, wodurch sie sich optisch von den Tabellendatenzellen unterscheiden.

Tabellendatenzellen werden mit dem <td>-Element definiert und enthalten die eigentlichen Daten in der Tabelle. Jedes <td>-Element stellt eine einzelne Zelle innerhalb einer Zeile dar, und Sie können mehrere <td>-Elemente innerhalb eines einzigen <tr>-Elements haben, um mehrere Spalten zu erstellen.

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

In diesem Beispiel umschließt das <table>-Element die gesamte Tabellenstruktur. Darin befinden sich drei <tr>-Elemente, die jeweils eine Tabellenzeile darstellen. Das erste <tr>-Element enthält zwei <th>-Elemente, die die Tabellenüberschriften definieren. Die nachfolgenden <tr>-Elemente enthalten <td>-Elemente, die die eigentlichen Daten für jede Zelle in der Tabelle enthalten.

Mit dieser grundlegenden Struktur können Sie Tabellen verschiedener Größen und Konfigurationen erstellen, um Ihre Daten übersichtlich und geordnet zu präsentieren.

Tabellenränder

In HTML-Tabellen können Sie mithilfe des border-Attributs Ränder zur Tabelle und ihren Zellen hinzufügen. Das border-Attribut legt die Breite des Rands um die Tabelle und ihre Zellen fest. Wenn Sie beispielsweise border="1" beim <table>-Element setzen, wird ein 1 Pixel breiter Rand um die Tabelle und jede Zelle hinzugefügt.

<table border="1">
  <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>

Obwohl das border-Attribut Ränder zu einer Tabelle hinzufügt, bietet es nur begrenzte Kontrolle über den Randstil. Für mehr Flexibilität können Sie CSS verwenden, um die Tabellenränder zu gestalten.

Mit CSS können Sie die border-Eigenschaft verwenden, um die Randbreite, den Stil und die Farbe für die Tabelle und ihre Zellen festzulegen. Hier ein Beispiel:

<table style="border: 2px solid #000;">
  <tr>
    <th style="border: 1px solid #000;">Überschrift 1</th>
    <th style="border: 1px solid #000;">Überschrift 2</th>
  </tr>
  <tr>
    <td style="border: 1px solid #000;">Daten 1</td>
    <td style="border: 1px solid #000;">Daten 2</td>
  </tr>
  <tr>
    <td style="border: 1px solid #000;">Daten 3</td>
    <td style="border: 1px solid #000;">Daten 4</td>
  </tr>
</table>

Die border-Eigenschaft im style-Attribut legt für das <table>-Element einen 2 Pixel breiten, durchgezogenen schwarzen Rand fest. Jedes <th>- und <td>-Element hat einen 1 Pixel breiten, durchgezogenen schwarzen Rand, der mit der border-Eigenschaft angewendet wird.

Die Verwendung von CSS gibt Ihnen mehr Kontrolle über das Aussehen von Tabellenrändern. Sie können verschiedene Randstile, Farben und Breiten für verschiedene Teile der Tabelle festlegen. Sie können auch bestimmte Zellen oder Zeilen mit CSS-Klassen oder IDs für eine genauere Stilkontrolle ansprechen.

Tabellenüberschriften

Tabellenüberschriften geben Kontext und beschreiben die Daten in jeder Spalte oder Zeile. Um eine Überschriftenzelle in einer Tabelle zu definieren, verwenden Sie das <th>-Element anstelle des <td>-Elements.

Der Text innerhalb von <th>-Elementen wird fett und zentriert dargestellt, wodurch er sich optisch von den normalen Tabellendatenzellen abhebt. Diese Formatierung hilft Benutzern, die Überschriften schnell zu erkennen und die Struktur der Tabelle zu verstehen.

<table>
  <tr>
    <th>Name</th>
    <th>Alter</th>
    <th>Stadt</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
    <td>London</td>
  </tr>
</table>

Die erste Zeile der Tabelle enthält drei <th>-Elemente, die die Überschriften für die Spalten "Name", "Alter" und "Stadt" darstellen. Die folgenden Zeilen verwenden <td>-Elemente, um die eigentlichen Daten anzuzeigen.

Um eine klare Verbindung zwischen Überschriftenzellen und den entsprechenden Datenzellen herzustellen, können Sie das scope-Attribut verwenden. Das scope-Attribut gibt an, ob eine Überschriftenzelle mit einer Zeile oder einer Spalte verbunden ist.

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Alter</th>
    <th scope="col">Stadt</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
    <td>London</td>
  </tr>
</table>

Das scope-Attribut ist für jedes <th>-Element auf col gesetzt, was anzeigt, dass jede Überschriftenzelle mit einer Spalte verbunden ist. Dies hilft Screenreadern und anderen Hilfstechnologien, die Beziehung zwischen den Überschriften und den Datenzellen zu verstehen.

Sie können das scope-Attribut auch mit dem Wert row für Überschriftenzellen verwenden, die mit einer bestimmten Zeile verbunden sind, wie im Fall einer Tabelle mit Zeilenüberschriften.

Durch die angemessene Verwendung von <th>-Elementen und dem scope-Attribut können Sie gut strukturierte und barrierefreie Tabellen erstellen, die sowohl für visuelle Benutzer als auch für Benutzer von Hilfstechnologien leicht zu verstehen sind.

Tabellenbeschriftung

Das <caption>-Element in HTML definiert eine Beschriftung oder einen Titel für eine Tabelle. Es bietet eine kurze Beschreibung oder Zusammenfassung des Tabelleninhalts und hilft Benutzern, den Zweck oder Kontext der in der Tabelle dargestellten Daten zu verstehen.

Standardmäßig erscheint die Beschriftung über der Tabelle und ist horizontal zentriert. Der Text innerhalb des <caption>-Elements wird als einfacher Text ohne zusätzliche Formatierung angezeigt.

<table>
  <caption>Mitarbeiterinformationen</caption>
  <tr>
    <th>Name</th>
    <th>Abteilung</th>
    <th>Gehalt</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>Marketing</td>
    <td>50.000 €</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>Vertrieb</td>
    <td>60.000 €</td>
  </tr>
</table>

Das <caption>-Element wird direkt nach dem öffnenden <table>-Tag platziert und enthält den Text "Mitarbeiterinformationen". Diese Beschriftung liefert einen klaren Titel für die Tabelle und zeigt an, dass sie Informationen über Mitarbeiter enthält.

Während die Standardformatierung des <caption>-Elements in den meisten Fällen ausreicht, können Sie CSS verwenden, um die Beschriftung nach Ihren Bedürfnissen weiter zu gestalten und zu positionieren.

table caption {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
}

In diesem CSS-Code legt die font-size-Eigenschaft die Größe des Beschriftungstextes auf das 1,2-fache der Standardgröße fest. Die font-weight-Eigenschaft macht den Text fett, damit er sich abhebt. Die margin-bottom-Eigenschaft fügt etwas Abstand zwischen der Beschriftung und der Tabelle hinzu. Schließlich richtet die text-align-Eigenschaft die Beschriftung links aus, anstatt der standardmäßigen Zentrierung.

Sie können CSS auch verwenden, um die Beschriftung unter der Tabelle zu positionieren oder andere Stile wie Farben, Hintergrundfarben und Abstände entsprechend Ihren Designvorlieben anzuwenden.

Die Verwendung des <caption>-Elements und dessen Gestaltung mit CSS ermöglicht es Ihnen, einen klaren und aussagekräftigen Titel für Ihre Tabellen bereitzustellen, wodurch sie zugänglicher und benutzerfreundlicher werden.

Zellenpolster und -abstand in Tabellen

In HTML-Tabellen können Sie den Abstand innerhalb und zwischen Tabellenzellen mit den Attributen cellpadding und cellspacing steuern. Diese Attribute ermöglichen es Ihnen, den visuellen Abstand Ihrer Tabelle anzupassen, um sie lesbarer zu machen.

Das Attribut cellpadding legt den Abstand zwischen dem Zelleninhalt und den Zellenrändern fest. Es definiert den internen Abstand innerhalb jeder Zelle. Standardmäßig wird der Zelleninhalt nahe an den Zellenrändern angezeigt, aber Sie können den Abstand vergrößern, um etwas Platz hinzuzufügen.

<table cellpadding="10">
  <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>

Das Attribut cellpadding ist auf 10 gesetzt, was 10 Pixel Abstand innerhalb jeder Zelle hinzufügt. Dies erzeugt einen sichtbaren Abstand zwischen dem Zelleninhalt und den Zellenrändern und macht den Inhalt lesbarer.

Das Attribut cellspacing legt den Abstand zwischen den Tabellenzellen fest. Es definiert den Abstand oder die Lücke zwischen benachbarten Zellen in der Tabelle. Standardmäßig gibt es keinen Abstand zwischen den Zellen, aber Sie können cellspacing verwenden, um eine Trennung hinzuzufügen.

<table cellspacing="5">
  <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>

Das Attribut cellspacing ist auf 5 gesetzt, was einen 5-Pixel-Abstand zwischen den Zellen hinzufügt. Dies erzeugt eine visuelle Trennung zwischen den Zellen und macht es einfacher, eine Zelle von der anderen zu unterscheiden.

Obwohl die Attribute cellpadding und cellspacing eine schnelle Möglichkeit bieten, Zellenabstand und -abstand zu steuern, haben sie einige Einschränkungen. Für mehr Kontrolle und Flexibilität können Sie CSS-Eigenschaften wie padding und border-spacing verwenden.

Mit CSS können Sie bestimmte Zellen, Zeilen oder die gesamte Tabelle gezielt ansprechen, um Abstand- und Abstands-Stile anzuwenden.

<style>
  table {
    border-collapse: separate;
    border-spacing: 5px;
  }
  td, th {
    padding: 10px;
  }
</style>

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

Die Eigenschaft border-collapse ist auf separate gesetzt, um die Verwendung von border-spacing zu ermöglichen. Die Eigenschaft border-spacing wird dann verwendet, um einen 5-Pixel-Abstand zwischen den Zellen festzulegen. Die Eigenschaft padding wird sowohl auf <td>- als auch auf <th>-Elemente angewendet, um 10 Pixel Abstand innerhalb jeder Zelle hinzuzufügen.

Die Verwendung von CSS gibt Ihnen mehr Kontrolle über das Aussehen Ihrer Tabelle und ermöglicht es Ihnen, unterschiedliche Abstand- und Abstands-Werte für verschiedene Teile der Tabelle festzulegen und sogar verschiedene Stile basierend auf bestimmten Klassen oder IDs anzuwenden.

Durch die Verwendung der Attribute cellpadding und cellspacing oder CSS-Eigenschaften wie padding und border-spacing können Sie den Abstand innerhalb und zwischen Tabellenzellen anpassen, um visuell ansprechende und lesbare Tabellen zu erstellen.

Colspan und Rowspan

In HTML-Tabellen können Sie die Attribute colspan und rowspan verwenden, um komplexe Tabellenlayouts zu erstellen, indem Sie Zellen über Spalten oder Zeilen hinweg zusammenführen. Diese Attribute ermöglichen es Ihnen, Zellen zu erstellen, die sich über mehrere Spalten oder Zeilen erstrecken.

Das Attribut colspan wird verwendet, um eine Zelle über Spalten hinweg zu erstrecken. Es wird auf ein <th>- oder <td>-Element angewendet und gibt die Anzahl der Spalten an, über die sich die Zelle erstrecken soll. Wenn Sie colspan="2" für eine Zelle festlegen, wird sie sich über zwei Spalten erstrecken und die beiden Zellen zu einer zusammenführen.

<table>
  <tr>
    <th colspan="2">Zusammengeführte Überschrift</th>
  </tr>
  <tr>
    <td>Zelle 1</td>
    <td>Zelle 2</td>
  </tr>
  <tr>
    <td colspan="2">Zusammengeführte Zelle</td>
  </tr>
</table>

Das Attribut rowspan wird verwendet, um eine Zelle über Zeilen hinweg zu erstrecken. Es wird auf ein <th>- oder <td>-Element angewendet und gibt die Anzahl der Zeilen an, über die sich die Zelle erstrecken soll. Wenn Sie rowspan="3" für eine Zelle festlegen, wird sie sich über drei Zeilen erstrecken und die Zellen vertikal zusammenführen.

<table>
  <tr>
    <th rowspan="2">Zusammengeführte Überschrift</th>
    <td>Zelle 1</td>
  </tr>
  <tr>
    <td>Zelle 2</td>
  </tr>
  <tr>
    <td>Zelle 3</td>
    <td>Zelle 4</td>
  </tr>
</table>

Durch die Kombination von colspan und rowspan können Sie komplexe Tabellenlayouts mit zusammengeführten Zellen erstellen, die sich sowohl über Spalten als auch über Zeilen erstrecken.

<table>
  <tr>
    <th colspan="2" rowspan="2">Zusammengeführte Überschrift</th>
    <th>Überschrift 1</th>
  </tr>
  <tr>
    <th>Überschrift 2</th>
  </tr>
  <tr>
    <td>Zelle 1</td>
    <td>Zelle 2</td>
    <td>Zelle 3</td>
  </tr>
</table>

Die Verwendung der Attribute colspan und rowspan ermöglicht es Ihnen, Tabellen mit zusammengeführten Zellen zu erstellen und Daten auf übersichtliche und ansprechende Weise zu präsentieren. Diese Attribute sind nützlich, wenn Sie Daten gruppieren möchten oder wenn Sie bestimmte Zellen oder Überschriften in Ihrer Tabelle hervorheben möchten.

Tabellenstyling mit CSS

CSS bietet Gestaltungsmöglichkeiten, um das Aussehen von HTML-Tabellen zu verändern. Mit CSS können Sie verschiedene Teile Ihrer Tabellen anpassen, wie Hintergrundfarben, Textfarben, Schriftarten, Rahmen und mehr, um sie an das Design Ihrer Website anzupassen und die Lesbarkeit zu verbessern.

Eine Styling-Technik ist das Anwenden von Hintergrundfarben auf die Tabelle, Zeilen oder Zellen. Sie können die Eigenschaft background-color verwenden, um eine Volltonfarbe oder einen Farbverlauf als Hintergrund festzulegen.

<style>
  table {
    background-color: #f2f2f2;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
  tr:nth-child(even) {
    background-color: #e6e6e6;
  }
</style>

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

In diesem Beispiel wird die Eigenschaft background-color auf das <table>-Element angewendet, um einen hellgrauen Hintergrund für die Tabelle festzulegen. Die <th>-Elemente haben einen grünen Hintergrund und weiße Textfarbe, um die Überschriften hervorzuheben. Der Selektor tr:nth-child(even) zielt auf jede gerade Zeile ab und wendet eine andere Hintergrundfarbe an, um einen Zebrastreifen-Effekt zu erzeugen und die Lesbarkeit zu verbessern.

Sie können auch die Textstile innerhalb der Tabellenzellen ändern. Verwenden Sie Eigenschaften wie color, font-family, font-size und text-align, um die Textfarbe, Schriftart, Größe und Ausrichtung zu ändern.

<style>
  table {
    font-family: Arial, sans-serif;
    font-size: 14px;
  }
  td {
    color: #333;
    text-align: center;
  }
  th {
    font-weight: bold;
    text-transform: uppercase;
  }
</style>

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

In diesem Beispiel werden die Eigenschaften font-family und font-size auf das <table>-Element angewendet, um eine Schriftart und Größe für die Tabelle festzulegen. Die <td>-Elemente haben eine dunkelgraue Textfarbe und sind mit der Eigenschaft text-align zentriert ausgerichtet. Die <th>-Elemente sind mit fetter Schriftstärke und Großbuchstaben unter Verwendung der Eigenschaften font-weight und text-transform gestaltet.

Um Stile auf Teile der Tabelle anzuwenden, können Sie CSS-Klassen oder IDs verwenden. Indem Sie einer Tabelle, Zeile oder Zelle eine Klasse oder ID zuweisen, können Sie sie mit CSS-Selektoren ansprechen und Stile anwenden.

<style>
  .highlight {
    background-color: yellow;
    font-weight: bold;
  }
  .text-right {
    text-align: right;
  }
</style>

<table>
  <tr>
    <th>Überschrift 1</th>
    <th>Überschrift 2</th>
  </tr>
  <tr>
    <td class="highlight">Daten 1</td>
    <td>Daten 2</td>
  </tr>
  <tr>
    <td>Daten 3</td>
    <td class="text-right">Daten 4</td>
  </tr>
</table>

In diesem Beispiel wird die Klasse .highlight auf eine Zelle angewendet, wodurch sie eine gelbe Hintergrundfarbe und fette Schriftstärke erhält. Die Klasse .text-right wird verwendet, um den Text innerhalb einer Zelle rechtsbündig auszurichten.

Durch die Nutzung der Möglichkeiten von CSS können Sie optisch ansprechende und gut strukturierte Tabellen erstellen, die das Erscheinungsbild Ihrer Daten verbessern. Probieren Sie verschiedene Stile, Farben und Layouts aus, um das beste Design zu finden, das Ihren Bedürfnissen entspricht und zum Aussehen Ihrer Website passt.

Barrierefreiheitsaspekte

Bei der Erstellung von Tabellen in HTML ist es wichtig, die Barrierefreiheit zu berücksichtigen. Dies macht Ihre Tabellen für alle Nutzer verständlich und navigierbar, einschließlich derer, die assistive Technologien wie Screenreader verwenden.

Eine wichtige Praxis für Barrierefreiheit ist die Verwendung des <th>-Elements für Kopfzellen anstelle des <td>-Elements. Das <th>-Element bietet eine semantische Bedeutung und zeigt an, dass die Zelle Kopfinformationen enthält. Screenreader und andere assistive Technologien können diese Informationen nutzen, um Benutzern das Verständnis der Struktur und des Kontexts der Tabelle zu erleichtern.

<table>
  <tr>
    <th>Name</th>
    <th>Alter</th>
    <th>Stadt</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
    <td>London</td>
  </tr>
</table>

Um die Barrierefreiheit weiter zu verbessern, sollten Sie Kopfzellen mit ihren entsprechenden Datenzellen verknüpfen. Dies kann mit den Attributen scope oder headers erfolgen.

Das scope-Attribut gibt an, ob eine Kopfzelle mit einer Zeile oder Spalte verknüpft ist. Es kann auf "row" für Zeilenüberschriften oder "col" für Spaltenüberschriften gesetzt werden.

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Alter</th>
    <th scope="col">Stadt</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
    <td>London</td>
  </tr>
</table>

Alternativ können Sie das headers-Attribut für Datenzellen verwenden, um sie explizit mit einer oder mehreren Kopfzellen zu verknüpfen. Der Wert des headers-Attributs sollte die id der entsprechenden Kopfzelle sein.

<table>
  <tr>
    <th id="name">Name</th>
    <th id="age">Alter</th>
    <th id="city">Stadt</th>
  </tr>
  <tr>
    <td headers="name">John</td>
    <td headers="age">25</td>
    <td headers="city">New York</td>
  </tr>
  <tr>
    <td headers="name">Alice</td>
    <td headers="age">30</td>
    <td headers="city">London</td>
  </tr>
</table>

Ein weiterer Aspekt der Barrierefreiheit ist die Bereitstellung einer beschreibenden Überschrift für die Tabelle mit dem <caption>-Element. Die Überschrift sollte den Zweck oder Inhalt der Tabelle zusammenfassen und den Benutzern helfen, ihren Kontext zu verstehen.

<table>
  <caption>Mitarbeiterinformationen</caption>
  <tr>
    <th>Name</th>
    <th>Abteilung</th>
    <th>Gehalt</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>Marketing</td>
    <td>50.000 €</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>Vertrieb</td>
    <td>60.000 €</td>
  </tr>
</table>

Vermeiden Sie es, Tabellen für Layoutzwecke zu verwenden. Tabellen sollten für tabellarische Daten verwendet werden, nicht für die Anordnung von Inhalten auf einer Seite. Verwenden Sie für das Layout stattdessen CSS-Techniken wie Flexbox oder Grid. Dies hilft, eine klare Trennung zwischen Inhalt und Darstellung zu bewahren und macht Ihre Webseiten zugänglicher und wartbarer.