Tabelle mit HTML und dem table-Tag aufbauen

Datentabelle in der Webseite

Der table-Tag ist der Beginn einer Tabelle in einer HTML-Anwendung und zeigt dem Browser, dass hier an dieser Stelle eine Tabelle beginnt. Die Tabelle besteht in der minimalen Ausführung aus dem table-Tag, den Zeilen (tr-Tag) und den Zellen oder Spalten (td-Tag). Die Grundlage wird mit dem table-Tag hergestellt, weil hier etwa auch die Breite festgelegt werden kann.

Die Tabelle ist eine wichtige Informationsquelle für verschiedene Fakten, aber sie sollte nur dann verwendet werden, wenn es Sinn macht. Hat man nur kurze Fakten in einer Übersicht anzubringen, wäre die Aufzählungsliste die bessere Lösung, bei mehrspaltiger Darstellung macht hingegen der Einsatz einer Tabelle absolut Sinn.

Tabelle für die Informationsaufbereitung per table-Tag

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

ergibt:

Erste Zelle	Zweite Zelle
Das ist die erste Zelle	Das ist die zweite Zelle

Das Beispiel zeigt eine simple Tabelle, die aus zwei Zeilen mit zwei Spalten besteht. Jede Zeile wird mit dem tr-Tag begonnen und abgeschlossen, darin befinden sich die Zellen, die die Funktion der Spalten übernehmen.

Wie das Beispiel zeigt, ist es nicht nötig, der Tabelle eine Breite mit auf den Weg zu geben, denn sie passt sich den Gegebenheiten an. Es zeigt sich auch, dass die Spalten sich am längsten Text orientieren. Aber in vielen Fällen will man konkreter die Tabelle steuern, um ein bestimmtes Layout sicherzustellen und dann sind Angabe von Breite und Höhe sinnvoll.

Hierbei kann man mit thead und tfoot eine schnellere Lösung andenken.

Noch besser mit CSS

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

Auch der table-Tag selbst kann mit CSS gesteuert werden, beispielsweise kann es sein, dass man die Tabelle zentrieren möchte, um sie in die Mitte der HTML-Seite zu rücken, damit ihr mehr Nachdruck verliehen wird. Vor allem kann man aber auch die Hintergrundfarben aller Zeilen festlegen und eine abwechselnde Farbe ohne jeglicher Programmierung erreichen oder die Zeilenhöhe und die Abstände zu den Rändern festlegen. Somit sind viele gestalterische Optionen für die eigentlich sperrig wirkende Tabelle möglich und ein feines Layout ohne großen Aufwand herzustellen.

Mit den reinen HTML-Hausmitteln ist das nicht so einfach zu erreichen.

Lesen Sie auch

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

Startseite HTML-Grundlagen

Tabelle mit HTML und dem table-Tag aufbauen

Datentabelle in der Webseite

Tabelle für die Informationsaufbereitung per table-Tag

Noch besser mit CSS

Lesen Sie auch

Diesen Artikel teilen

Infos zum Artikel

Kategorien

Interner Bereich