HTML table / HTML Tabellen | html-einfach.de

HTML (HyperText Markup Language) ist die grundlegende Sprache zur Gestaltung von Webseiten. Eine der vielen Komponenten, die du in HTML verwenden kannst, sind Tabellen. Sie sind nützlich, um Daten in einem strukturierten, tabellarischen Format zu präsentieren. In diesem Tutorial wirst du lernen, wie du Tabellen in HTML erstellst und verwendest.

Inhalt

1. Einführung in Tabellen

HTML-Tabellen ermöglichen die Präsentation von Daten in einem tabellarischen Format auf einer Webseite. Sie sind besonders geeignet für die Darstellung von strukturierten Daten, die logisch in Zeilen und Spalten gruppiert werden können. Sie sollten jedoch nicht zur Gestaltung oder für das Layout einer Webseite verwendet werden sollten. Dies war eine verbreitete Praxis in der Frühzeit des Webs, hat sich aber als schlechte Praxis erwiesen und wurde durch CSS (Cascading Style Sheets) ersetzt, das nun die bevorzugte Methode zur Gestaltung von Webseiten ist.

2. Aufbau einer HTML-Tabelle

Um eine HTML-Tabelle zu erstellen, verwenden wir verschiedene HTML-Elemente, die jeweils eine spezifische Rolle in der Tabelle spielen. Hier ist eine einfache Tabelle und ihre grundlegenden Elemente:

<table border="1">
  <tr>
    <th>Überschrift 1</th>
    <th>Überschrift 2</th>
  </tr>
  <tr>
    <td>Daten 1</td>
    <td>Daten 2</td>
  </tr>
</table>

<table>: Dies ist das Container-Element, das die Tabelle erstellt. Jede Tabelle beginnt und endet mit diesem Tag.
<tr>: Steht für „table row“ (Tabellenzeile). Dieses Element definiert eine Zeile in der Tabelle.
<th>: Steht für „table header“ (Tabellenkopf). Es wird verwendet, um Überschriften für Spalten oder Zeilen zu erstellen. Der Inhalt dieser Zelle wird standardmäßig fett und zentriert dargestellt.
<td>: Steht für „table data“ (Tabellendaten). Dieses Element definiert eine Zelle in der Tabelle, in die Daten eingegeben werden können.

Darüber hinaus können wir weitere Elemente verwenden, um Überschriften und Fußzeilen zu definieren:

<thead>: Definiert den Kopf einer Tabelle und enthält die Kopfzeile(n) der Tabelle, die normalerweise Überschriftenzellen <th> enthalten.
<tbody>: Definiert den Hauptkörper einer Tabelle und enthält eine oder mehrere Zeilen <tr> mit Datenzellen <td>.
<tfoot>: Definiert die Fußzeile einer Tabelle und kann benutzt werden, um eine Zusammenfassung oder eine Fußzeile für die Tabelle zu erstellen.

Wenn du die Tabellenrahmen sehen möchtest, dann füge das Attribut „border“ ein. <table border=“1″>

3. Erweiterte Tabellenstruktur

Manchmal können Tabellen komplex sein und es könnte notwendig sein, Zellen über mehrere Zeilen oder Spalten zu spannen. Das ist, wo colspan und rowspan zum Einsatz kommen:

colspan: Dieses Attribut ermöglicht es einer Zelle, sich über mehrere Spalten zu erstrecken.
rowspan: Mit diesem Attribut kann eine Zelle sich über mehrere Zeilen erstrecken.

<table border="1">
  <tr>
    <th>Überschrift 1</th>
    <th colspan="2">Überschrift 2</th>
  </tr>
  <tr>
    <td>Daten 1</td>
    <td>Daten 2</td>
    <td>Daten 3</td>
  </tr>
</table>

In diesem Fall erstreckt sich „Überschrift 2“ über zwei Spalten.

Eine weitere erweiterte Funktion sind Tabellengruppen <colgroup> und <col>, die es ermöglichen, eine Gruppe von Spalten zu formatieren, anstatt jede einzelne Zelle zu bearbeiten.

4. Styling von HTML-Tabellen

Das Styling von HTML-Tabellen kann auf zwei Arten erfolgen: durch Inline-CSS oder durch Verwendung von externen CSS-Dateien.

Beispiel für Inline-CSS:

<table style="width:100%">


 ...
</table>

Beispiel für externes CSS:

table {
  width: 100%;
}

Das optische Erscheinungsbild von HTML-Tabellen lässt sich stark anpassen, indem du CSS (Cascading Style Sheets) verwendest. CSS ermöglicht es dir, Farben, Abstände, Grenzen und vieles mehr zu steuern. Hier sind einige Möglichkeiten, wie du Tabellen mit CSS gestalten kannst:

4.1. Tabellenfarbe:

Mit CSS kannst du Hintergrund- und Textfarben für deine gesamte Tabelle, einzelne Zeilen, Zellen oder spezifische Abschnitte (wie <thead>, <tbody> und <tfoot>) festlegen.

table {
  background-color: #f2f2f2;
}

th, td {
  color: #333;
}

4.2. Tabellenränder:

Du kannst Tabellenränder in Bezug auf Stil, Breite und Farbe gestalten. Du kannst auch das border-collapse-Attribut verwenden, um zu steuern, ob die Ränder von Zellen und Tabellen miteinander verschmelzen sollen.

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
}

4.3. Zebrastreifen:

Zebrastreifen (abwechselnde Hintergrundfarben für jede Zeile) verbessern die Lesbarkeit von Tabellen mit vielen Zeilen. Du kannst sie mit dem :nth-child CSS-Selektor erstellen.

tr:nth-child(even) {
  background-color: #f2f2f2;
}

4.4. Abstände und Polsterung:

Mit den Eigenschaften margin und padding kannst du den Abstand um deine Tabelle und innerhalb von Zellen steuern.

table {
  margin: 20px 0;
}

th, td {
  padding: 15px;
}

4.5. Textausrichtung:

Du kannst die Textausrichtung in deinen Tabellenzellen steuern, um den Inhalt linksbündig, rechtsbündig oder zentriert zu machen.

th {
  text-align: left;
}

td {
  text-align: right;
}

Mit diesen CSS-Techniken kannst du das Aussehen deiner HTML-Tabellen stark anpassen. Denke daran, immer die Lesbarkeit und Zugänglichkeit im Auge zu behalten, wenn du deine Tabellen gestaltest.

5. Best Practices und häufige Fehler

Zum Schluss noch einige Best Practices und häufige Fehler, die du vermeiden solltest:

Verwende Tabellen nur für tabellarische Daten, nicht für das Layout deiner Webseite.
Stelle sicher, dass deine Tabelle auch ohne CSS verständlich und lesbar ist.
Verwende das <caption>-Element, um deiner Tabelle einen Titel oder eine Übersicht hinzuzufügen.
Vermeide es, zu viele verschachtelte Tabellen zu verwenden, da dies die Zugänglichkeit und Lesbarkeit deiner Tabelle beeinträchtigen kann.

Mit diesen Tipps bist du nun gut gerüstet, um deine eigenen HTML-Tabellen zu erstellen und zu gestalten. Viel Spaß beim Coden!

Tipps zur Verwendung von Tabellen in HTML

HTML-Tabellen dienen dazu, strukturierte Daten in einem tabellarischen Format zu präsentieren. Sie sind besonders nützlich für die Darstellung von Informationen, die sich logisch in Zeilen und Spalten gruppieren lassen, wie z. B. Wetterdaten, Finanzberichte, Vergleichsdaten und mehr.

Vermeidung von Tabellen in HTML

Es ist wichtig zu verstehen, dass Tabellen in HTML nicht zur Gestaltung oder zum Layout von Webseiten verwendet werden sollten. In der Vergangenheit wurden Tabellen oft missbraucht, um komplexe Layouts zu erstellen, was zu unzugänglichem und schlecht strukturiertem Code führte. In der modernen Webentwicklung sollten wir stattdessen CSS (insbesondere Flexbox und Grid) für das Layout verwenden.

Best Practices für HTML-Tabellen

Nutze Tabellen nur für tabellarische Daten, nicht für das Layout.
Verwende immer das <thead>-Element für Kopfzeilen und das <tbody>-Element für den Hauptteil der Tabelle.
Nutze das <th>-Element für Überschriften und gib ihnen mithilfe des scope-Attributs Kontext.
Wenn deine Tabelle komplex ist, kannst du die colspan– und rowspan-Attribute verwenden, um Zellen über mehrere Zeilen oder Spalten zu spannen.
Füge deinen Tabellen mithilfe des <caption>-Elements immer eine Beschreibung hinzu.

HTML-Tabellen vs. Excel-Tabellen

Im Gegensatz zu Excel, das eine vollständige Tabellenkalkulationsanwendung ist, dient HTML nur zur Präsentation von Daten. HTML-Tabellen haben keine eingebauten Funktionen zur Berechnung oder Manipulation von Daten, wie Excel das bietet. HTML-Tabellen ermöglichen es dir, Daten im Webbrowser anzuzeigen, sind jedoch nicht interaktiv und bieten keine Funktionen zur Datenanalyse oder -bearbeitung.

Interessante Fakten über HTML-Tabellen

Es gibt einige interessante Funktionen von HTML-Tabellen, die du vielleicht nicht kennst. Zum Beispiel kannst du die <colgroup> und <col> Elemente verwenden, um eine Gruppe von Spalten zu formatieren, anstatt jede einzelne Zelle zu bearbeiten. Mit dem border-spacing-Attribut kannst du den Abstand zwischen den Zellen einstellen, und mit dem border-collapse-Attribut kannst du steuern, wie die Ränder von Zellen und Tabellen miteinander verschmelzen.