HTML-Tabellen erstellen – so funk­tio­niert’s

Sie können in HTML mit dem <table>-Tag an be­lie­bi­ger Stelle auf Ihren Webseiten Tabellen für die über­sicht­li­che Struk­tu­rie­rung von In­for­ma­tio­nen einbinden. Durch die konkrete Angabe von Kopf­zel­len, Zeilen und Da­ten­zel­len legen Sie in­di­vi­du­ell fest, wie diese aufgebaut sind.

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

Eine HTML-Tabelle ist ein struk­tu­rier­tes HTML-Element, das dazu verwendet wird, Daten und Texte in einem ta­bel­la­ri­schen Format dar­zu­stel­len. Um eine Tabelle zu de­fi­nie­ren und zu struk­tu­rie­ren, ist der Einsatz mehrerer HTML-Tags er­for­der­lich. Die grafische Ge­stal­tung der Tabellen, das HTML Table Styling, erledigen Sie separat mithilfe der ent­spre­chen­den CSS-An­wei­sun­gen.

HTML-Tabellen bieten die Mög­lich­kei­ten klas­si­scher Tabellen: Sie gliedern die dar­zu­stel­len­den In­for­ma­tio­nen in Zeilen (waa­ge­recht) und Spalten (senkrecht). Aus diesem Grund sind Tabellen in HTML-Do­ku­men­ten als Al­ter­na­ti­ve für Listen vor allem für die Prä­sen­ta­ti­on folgender Inhalte prä­de­sti­niert:

• Kalender
• Kon­takt­da­ten
• Rang­lis­ten
• Fahrpläne
• Preis­lis­ten
• Pro­dukt­ver­glei­che
• Sta­tis­ti­ken

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

Um eine HTML-Tabelle zu erstellen, benötigen Sie immer min­des­tens drei ver­schie­de­ne Tags. Mit dem <th>-Tag für HTML Table Headings (Ta­bel­len­köp­fe) kommt ein op­tio­na­les Tag hinzu. Die Tags im Überblick:

• <table>: Das HTML-<table>-Tag ist das wich­tigs­te Element für die Kreation einer Tabelle. Mit einem ein­lei­ten­den <table> wird der Start der HTML-Tabelle markiert, ein schlie­ßen­des </table> kenn­zeich­net das Ende.
• <tr>: Um eine neue Zeile zu erzeugen, verwendet man das Tag <tr>, das für „Table Row“, also Ta­bel­len­zei­le steht. Für jede Zeile wird ein ein­lei­ten­des und ein schlie­ßen­des Tag benötigt.
• <td>: Das Tag <td> steht für „Table Data“, also für die ei­gent­li­chen Ta­bel­len­da­ten. Für jedes ein­ge­füg­te <td>-Element wird au­to­ma­tisch eine Ta­bel­len­zel­le und damit auch eine Spalte generiert. Die ge­wünsch­ten In­for­ma­tio­nen trägt man zwischen dem ein­lei­ten­den <td> und dem schlie­ßen­den </td> ein.
• <th>: Das bereits genannte <th>-Tag ist im Prinzip eine spezielle Form des Ta­bel­len­zel­len-Tags <td>. Es wird ty­pi­scher­wei­se genutzt, um die Kopf­zel­len („Table Heading“) her­vor­zu­he­ben, kann jedoch auch für die Her­vor­he­bung des initialen Eintrags einer Zeile verwendet werden.

Beispiel für eine einfache HTML-Tabelle

Um die Mög­lich­kei­ten der Tabellen-Tags zu ver­deut­li­chen, wollen wir nach­fol­gend ein einfaches HTML-Tabellen-Beispiel fest­hal­ten. Ex­em­pla­risch werden Be­schrei­bun­gen und Preise für drei Gerichte prä­sen­tiert. In der Kopfzeile de­fi­nie­ren wir die drei Spal­ten­über­schrif­ten „Gericht“, „Be­schrei­bung“ und „Preis“. Es folgen drei weitere Zeilen, in denen die In­for­ma­tio­nen 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 be­tref­fen­den Webseite sieht die Tabelle in etwa wie folgt aus:

Close

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

Bei der Er­stel­lung von HTML-Tabellen gibt es einige typische Probleme, die immer wieder auftreten, größ­ten­teils aber vermieden werden können, indem man sauber und sorg­fäl­tig arbeitet. Wir haben die größten Bau­stel­len für Sie zu­sam­men­ge­fasst:

• Les­bar­keit: Tabellen sind schwer für User und Screen­rea­der zu lesen, wenn Sie keine klare Struktur festlegen. Ver­zich­ten Sie also nur auf Kopf­zei­len, wenn diese für die Aufnahme der In­for­ma­tio­nen absolut ir­rele­vant sind.
• Dar­stel­lung auf Mo­bil­ge­rä­ten: Auf Smart­phones und Tablets sind ge­wöhn­li­che HTML-Tabellen häufig schlecht dar­ge­stellt. Damit ein­ge­bun­de­ne Tabellen auch auf Mo­bil­ge­rä­ten be­trach­tet werden können, sollten Sie daher ent­spre­chen­de CSS-An­wei­sun­gen für ein re­spon­si­ves Design treffen.
• Tabellen als Layout-Element: Früher wurden HTML-Tabellen oft für die grafische Ge­stal­tung von Webseiten verwendet. Von dieser Vor­ge­hens­wei­se sollten Sie heut­zu­ta­ge unbedingt absehen und das Layout aus­schließ­lich über Ihre CSS-Sheets regeln.
• Fehlende bzw. in­kon­sis­ten­te Einheiten: Wenn Sie eine Tabelle mit nu­me­ri­schen Werten einbinden, passiert es schnell, dass bei einzelnen Einträgen falsche oder gar keine Einheiten verwendet werden. Sorgen Sie hier unbedingt für Ein­heit­lich­keit, um Ver­wir­run­gen zu vermeiden.

Ein weiteres Problem bei der HTML-Tabellen-Er­stel­lung betrifft die Dar­stel­lung von Son­der­zei­chen. Da sie in HTML eine besondere Bedeutung erfüllen, sorgen die Zeichen <, >, &, " und ' zum Beispiel sehr häufig für eine feh­ler­haf­te Dar­stel­lung von Tabellen. Die Lösung besteht in diesem Fall darin, auf die ent­spre­chen­den HTML Entities zu­rück­zu­grei­fen. Kommt eines der auf­ge­zähl­ten Zeichen in Ihrer geplanten Tabelle vor, ersetzen Sie es also durch die jeweils passende Zei­chen­fol­ge. Um welche es sich dabei handelt, zeigt unsere Übersicht: