Sie sind hier: Startseite -> HTML-Grundlagen -> Tabelle

HTML Tabelle für die Webseite

Informationen in Tabellenform anbieten

Die Tabelle hatte seit jeher in der HTML-Programmierung für Webseiten eine große Rolle gespielt, eigentlich eine noch größere Rolle, als es in der Gegenwart der Fall ist. Denn die Tabelle hatte zwei Funktionen eingenommen: einmal gab es die Layouttabelle, mit der die ganze Seite aufgebaut wurde und dann gab es die Datentabelle, mit der Informationen aufbereitet wurden.

Tabelle als Layout-Hilfsmittel missbraucht

Während die Datentabelle weiterhin ein Thema ist und bleibt, sollte auf die Layouttabelle verzichtet werden. Es handelt sich dabei um eine simple Tabelle, wie sie für Daten auch verwendet wird, die als Gerüst für die Webseite dient. Das bedeutet aber auch, dass man es mit einer unflexiblen und den Quellcode unnötig aufblasenden Struktur zu tun hat, die durch CSS längst ersetzt wurde. Zudem ist CSS wesentlich eleganter zu steuern.


Webhosting mit viel Software bei Alfahosting (Affiliate-Link)


Mit Hilfe der Div´s kann man responsiv für jedes Gerät eine Struktur aufbauen, die sich anpassen kann und das ist mit der Tabelle nur schwer bis fast gar nicht möglich. Außerdem war für sehbehinderte Personen die Tabelle ein großes Hindernis. Also ist das Thema durch und die Layouttabelle gestorben - die Systeme wie CMS arbeiten gar nicht mehr mit diesem Ansatz und man nutzt CSS als Gestaltungsmöglichkeit und das ist auch gut so.

Tabelle dient der Informationsweitergabe

Damit ist die Funktion der Tabelle auf die Daten beschränkt und bietet verschiedenste Fakten in übersichtlicher Form an. Ob es nun eine Fußballtabelle ist oder eine Datentabelle über Forschungsarbeiten spielt dabei keine Rolle. Es gibt die Überschrift, die Zeilen mit den Daten, die wiederum in Zellen unterteilt sind, die zugleich die Spalten repräsentieren.

Tabellen können sehr umfangreich werden und sie sind durch CSS flexibel formatierbar, sodass man schöne Lösungen anbieten kann. Das reicht in der Zwischenzeit soweit, dass man auch die Hintergrundfarbe ohne großer Programmierung festlegen kann. HTML bietet das Grundgerüst für die Tabelle, CSS kümmert sich um die Gestaltung.

Wann nutze ich eine Tabelle?

Die Tabelle macht dann Sinn, wenn es viele Informationen gibt, die in Tabellenform einfach übersichtlicher angeboten werden können. Hat man nur eine kurze Liste an Fakten zur Verfügung, wäre die Aufzählungsliste die bessere Lösung. Hat man aber eine X/Y-Situation mit verschiedenen Aussagen und Werten, dann ist die Tabelle die bessere Option.

Lesen Sie auch


Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)


So wie in normalen Texten kommt die Tabelle auch auf Internetseiten sehr oft vor und ist daher ein wichtiges Thema im Webdesign. Zum einen soll sie übersichtlich sein, zum anderen soll sie auch gefällig sein, wofür vor allem moderne CSS-Möglichkeiten Pate stehen. Die Grundstruktur sieht den table-Tag als Platzhalter vor und mit dem tr-Tag gibt es die Zeilen und mit dem td-Tag die Zellen.

Außerdem besteht die Möglichkeit, mit dem thead und tfoot Kopfzeile als Überschrift und Fußzeile als Abschluss einzubauen. Man kann die Spalten auch mit dem colgroup-Tag vorweg definiert, speziell in Sachen Breite.

Wichtige Funktionen können gefragt sein, wenn man nicht die übliche Tabelle braucht, sondern bestimmte Zeilen zusammenführen muss oder auch Spalten zusammengehören.

Themenseiten

Diesen Artikel teilen

Infos zum Artikel

Tabelle in HTMLArtikel-Thema: HTML Tabelle für die Webseite
Beschreibung: 🌍 Tabellen sind auf Webseiten wichtige Informationsträger, sollten aber ✅ Mehrwert mit Informationen enthalten und Sinn machen.

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel