Du bist hier::--Gestalten mit CSS – Tabellen (Grundlagen)

Gestalten mit CSS – Tabellen (Grundlagen)

In diesem Tipp geht es um das Verwenden von Tabellen beim Erstellen von Webseiten mit HTML (Hypertext Markup Language). Tabellen können in zweierlei Hinsicht benutzt werden, einmal klassisch zur Darstellung von Daten, sowie zum Gestalten des Layouts der Seite. Letzteres gilt aber inzwischen als veraltet und wird mit Hilfe von CSS (Cascading Style Sheets) erledigt.[imgr=CSS-cascading-style-sheets2-200.gif]CSS-cascading-style-sheets2-200.gif?nocache=1311965653914[/imgr]

Dieser Tipp gilt als Grundlage für den Artikel Praxis mit CSS – Tabellen.

Tabellenaufbau

Eine Tabelle besteht aus drei Elementen, der eigentlichen Tabelle sowie ihren Zeilen und Spalten. Beim Verwenden von HTML besteht die Tabelle aus den drei folgenden tags: „table“, „tr“ und „td“

Das tag „table“ dient zur Kennzeichnung der Tabelle im Allgemeinem. Eine Tabelle ist im HTML Code zeilenweise Aufgebaut. Das tag „tr“ steht für table row (engl. für Tabellenzeile) und das tag „td“ steht für table data (engl. für Tabellenzelle). Die Gitternetzlinien lassen sich mit Hilfe des „border“ Attributes darstellen. Beim Aufbau der Tabelle wird empfohlen die Gitternetzlinien mit anzuzeigen, damit Fehler sofort auffallen.

Eine Angabe der Gesamtbreite ist im „table“ tag möglich. Die Breite lässt sich in Pixel oder in Prozent, relativ zum Elternelement angeben.

(Zur Darstellung in Originalgröße Abbildungen anklicken)

01-tabellen-mit-html-aufbau-470.png?nocache=1311965746976

Tabelleneigenschaften

Man kann mit dem „caption“ tag der gesamten Tabelle eine Überschrift zuordnen. Diese wird automatisch zentriert und fett formatiert.

Das Verbinden von Zellen und Zeilen ist auch mit HTML möglich. Für das Verbinden von Zeilen wird das Attribut „rowspan“ verwendet. Eine ganze Zahlenangabe bestimmt die Anzahl der zu verbindenden Zeilen. Die Zellen können mit Hilfe des „colspan“ Attributes verbunden werden. Auch hier erfolgt die Angabe der zu verbindenden Zellen mit Hilfe einer Zahl. Es besteht auch die Möglichkeit beide Attribute zu kombinieren.

Eine Tabelle lässt sich mit HTML auch in sogenannte Gruppen einteilen. Die tags lauten „thead“, „tfoot“ und „tbody“. Die Einteilung bringt keine optischen Veränderungen mit sich, hilft aber bei der nachträglichen Gestaltung mit Hilfe von CSS. Das Einhalten der Reihenfolge sollte eingehalten werden, das „tfoot“ Attribut wird automatisch ans Ende gesetzt, auf die Ergebnisleiste angewandt.

Zur besseren Strukturierung der Tabelle lassen sich die Breiten der einzelnen Spalten einzeln bestimmen. Es werden zwei tags verwendet: Einmal das „colgroup“ tag, welches den Abschnitt im HTML Code markiert und das „col“ tag, in welches die Breite eingetragen wird. Dies kann in Pixel oder Prozent erfolgen. Die Spalten werden von links nach rechts angesprochen.

02-tabellen-mit-html-eigenschaften-470.png?nocache=1311965789928

Gitternetzlinien

Zum Anzeigen der Gitternetzlinien gibt es zwei Attribute. Das Attribut „frame“ dient zur Beschreibung der Außenrahmen, das „rules“ Attribut zur Beschreibung der Gitternetzlinien zwischen den Spalten und Zeilen.

Für das Frame Attribut gibt es folgende Möglichkeiten:

    [*]Void: kein Außenrahmen[/*][*]Above: oben[/*][*]Below: unten[/*][*]Hside: oben und unten[/*][*]Vside: links und rechts[/*][*]Lhs: links[/*][*]Rhs: rechts[/*][*]Box: überall[/*][*]Beim Attribut rules gibt es folgende Möglichkeiten:[/*][*]Rows: Linien zwischen den Zeilen[/*][*]Cols: Linien zwischen den Spalten[/*][*]Groups: Linien zwischen den Gruppen[/*]

03-tabellen-mit-html-gitternetzlinien-470.png?nocache=1311965835391

Weitere Gestaltungsmöglichkeiten

Mit dem Attribut „cellpadding“ lassen sich die Abstände zwischen den Zellinhalten und den jeweiligen Zellrändern bestimmen. Das Attribut „cellspacing“ ist für die Abstände zwischen den einzelnen Zellen zuständig.

Das Attribut „bgcolor“ legt die Hintergrundfarbe von den jeweiligen Zellen und Zeilen fest. Die gesamte Tabelle lässt sich auch mit einer Hintergrundfarbe gestalten.

Mit dem „align“ Attribut lassen sich die Inhalte ausrichten. Wird das Attribut in den „table“ tag geschrieben, so wird die gesamte Tabelle ausgerichtet. Es kann auch in die einzelnen Zellen geschrieben werden und richtet somit individuell die Inhalte aus.

Die vertikale Ausrichtung geschieht über „valign“. Es können die Werte „top“ für oben, „bottom“ für unten und „middle“ für die Mitte verwendet werden.

04-tabellen-mit-html-weitere-moeglichkeiten-470.png?nocache=1311965862503

Wie Sie anhand der vielen Gestaltungsmöglichkeiten erkennen können ist eine HTML Tabelle gar nicht so leicht zu entziffern. Aus diesem Grund ist ein sauberes schreiben im Quellcode wichtig, damit mögliche Fehler einfach gefunden werden können.

zurück zur Übersicht:Themenübersicht – Webdesign mit CSS

Von |2018-07-25T14:17:39+00:00August 1st, 2011|Kategorien: Webseiten/HTML|0 Kommentare

Über den Autor:

Hinterlassen Sie einen Kommentar