HTML-Tabellen erstellen – so funktioniert’s

Sie können in HTML mit dem <table>-Tag an beliebiger Stelle auf Ihren Webseiten Tabellen für die übersichtliche Strukturierung von Informationen einbinden. Durch die konkrete Angabe von Kopfzellen, Zeilen und Datenzellen legen Sie individuell fest, wie diese aufgebaut sind.

Was ist eine HTML-Tabelle und wofür verwendet man sie?

Eine HTML-Tabelle ist ein strukturiertes HTML-Element, das dazu verwendet wird, Daten und Texte in einem tabellarischen Format darzustellen. Um eine Tabelle zu definieren und zu strukturieren, ist der Einsatz mehrerer HTML-Tags erforderlich. Die grafische Gestaltung der Tabellen, das HTML Table Styling, erledigen Sie separat mithilfe der entsprechenden CSS-Anweisungen.

HTML-Tabellen bieten die Möglichkeiten klassischer Tabellen: Sie gliedern die darzustellenden Informationen in Zeilen (waagerecht) und Spalten (senkrecht). Aus diesem Grund sind Tabellen in HTML-Dokumenten als Alternative für Listen vor allem für die Präsentation folgender Inhalte prädestiniert:

• Kalender
• Kontaktdaten
• Ranglisten
• Fahrpläne
• Preislisten
• Produktvergleiche
• Statistiken

Welche Tags benötigt man für eine HTML-Tabelle?

Um eine HTML-Tabelle zu erstellen, benötigen Sie immer mindestens drei verschiedene Tags. Mit dem <th>-Tag für HTML Table Headings (Tabellenköpfe) kommt ein optionales Tag hinzu. Die Tags im Überblick:

• <table>: Das HTML-<table>-Tag ist das wichtigste Element für die Kreation einer Tabelle. Mit einem einleitenden <table> wird der Start der HTML-Tabelle markiert, ein schließendes </table> kennzeichnet das Ende.
• <tr>: Um eine neue Zeile zu erzeugen, verwendet man das Tag <tr>, das für „Table Row“, also Tabellenzeile steht. Für jede Zeile wird ein einleitendes und ein schließendes Tag benötigt.
• <td>: Das Tag <td> steht für „Table Data“, also für die eigentlichen Tabellendaten. Für jedes eingefügte <td>-Element wird automatisch eine Tabellenzelle und damit auch eine Spalte generiert. Die gewünschten Informationen trägt man zwischen dem einleitenden <td> und dem schließenden </td> ein.
• <th>: Das bereits genannte <th>-Tag ist im Prinzip eine spezielle Form des Tabellenzellen-Tags <td>. Es wird typischerweise genutzt, um die Kopfzellen („Table Heading“) hervorzuheben, kann jedoch auch für die Hervorhebung des initialen Eintrags einer Zeile verwendet werden.

Beispiel für eine einfache HTML-Tabelle

Um die Möglichkeiten der Tabellen-Tags zu verdeutlichen, wollen wir nachfolgend ein einfaches HTML-Tabellen-Beispiel festhalten. Exemplarisch werden Beschreibungen und Preise für drei Gerichte präsentiert. In der Kopfzeile definieren wir die drei Spaltenüberschriften „Gericht“, „Beschreibung“ und „Preis“. Es folgen drei weitere Zeilen, in denen die Informationen geliefert werden. Insgesamt hat die HTML-Tabelle also vier Zeilen und drei Spalten:

<table>
	<tr>
		<th>Gericht</th>
		<th>Beschreibung</th>
		<th>Preis</th>
	</tr>
	<tr>
		<td>Spaghetti Bolognese</td>
		<td>Hausgemachte Nudeln mit Hackfleischsoße</td>
		<td>9,50 €</td>
	</tr>
	<tr>
		<td>Margherita Pizza</td>
		<td>Pizza mit Tomatensoße, Mozzarella und frischem Basilikum</td>
		<td>9,00 €</td>
	</tr>
	<tr>
		<td>Caesar Salad</td>
		<td>Salat, Hähnchenbrust, Croutons, Caesar-Dressing</td>
		<td>8,50 €</td>
	</tr>
</table>

Auf der betreffenden Webseite sieht die Tabelle in etwa wie folgt aus:

HTML-Tabellen: Typische Probleme und die passenden Lösungen

Bei der Erstellung von HTML-Tabellen gibt es einige typische Probleme, die immer wieder auftreten, größtenteils aber vermieden werden können, indem man sauber und sorgfältig arbeitet. Wir haben die größten Baustellen für Sie zusammengefasst:

• Lesbarkeit: Tabellen sind schwer für User und Screenreader zu lesen, wenn Sie keine klare Struktur festlegen. Verzichten Sie also nur auf Kopfzeilen, wenn diese für die Aufnahme der Informationen absolut irrelevant sind.
• Darstellung auf Mobilgeräten: Auf Smartphones und Tablets sind gewöhnliche HTML-Tabellen häufig schlecht dargestellt. Damit eingebundene Tabellen auch auf Mobilgeräten betrachtet werden können, sollten Sie daher entsprechende CSS-Anweisungen für ein responsives Design treffen.
• Tabellen als Layout-Element: Früher wurden HTML-Tabellen oft für die grafische Gestaltung von Webseiten verwendet. Von dieser Vorgehensweise sollten Sie heutzutage unbedingt absehen und das Layout ausschließlich über Ihre CSS-Sheets regeln.
• Fehlende bzw. inkonsistente Einheiten: Wenn Sie eine Tabelle mit numerischen Werten einbinden, passiert es schnell, dass bei einzelnen Einträgen falsche oder gar keine Einheiten verwendet werden. Sorgen Sie hier unbedingt für Einheitlichkeit, um Verwirrungen zu vermeiden.

Ein weiteres Problem bei der HTML-Tabellen-Erstellung betrifft die Darstellung von Sonderzeichen. Da sie in HTML eine besondere Bedeutung erfüllen, sorgen die Zeichen <, >, &, " und ' zum Beispiel sehr häufig für eine fehlerhafte Darstellung von Tabellen. Die Lösung besteht in diesem Fall darin, auf die entsprechenden HTML Entities zurückzugreifen. Kommt eines der aufgezählten Zeichen in Ihrer geplanten Tabelle vor, ersetzen Sie es also durch die jeweils passende Zeichenfolge. Um welche es sich dabei handelt, zeigt unsere Übersicht: