HTML » Tabellen

Tabellen sind vielseitig anwendbar. Insbesondere für das Layout von Texten sind sie sehr nützlich.
Wie bei jedem Element in HTML gibt es auch bei Tabellen bestimmte Tags:
Sie werden mit einem [sode]<table>[/scode]-Tag eingeleitet und enden mit ihm.

Ergebnis:

Name	Alter
Markus	35 Jahre

Zeilen und Spalten werden folgendermaßen angelegt:
Mit der Abkürzung <tr> wird eine neue Zeile eingeleitet.
Innerhalb dieser Zeile können dann beliebig viele Spalten mit Hilfe eines <td> eingeleitet werden.
Alle Tags werden natürlich auch wieder geschlossen, so wie im Beispiel.
Nach einer Zeile kann dann wieder eine neue angelegt werden.
Um Kopfzeilen zu erstellen, kann anstelle von <td> der Tag <th> verwendet werden, der zu Folge hat, dass der in ihm enthaltene Text fett formatiert wird.

Kommen wir jetzt zu etwas komplexeren Tabellen, d.h. Tabellen, in denen mehrere Spalten oder auch Zeilen verbunden werden. Dies ist mit dem Befehl rowspan="" für Zeilen oder colspan="" für Spalten möglich.
Innerhalb der Anführungstriche kommt dann die Anzahl der zu verbindenden Zeilen oder Spalten.

Ergebnis:

Name	Alter
Markus	35 Jahre
	32 Jahre
Keine Angabe

Nachdem wir nun die Struktur von Tabellen kennengelernt haben, kommen jetzt noch zu ein paar Gestaltungsmöglichkeiten mit CSS.
Es gibt zwar auch HTML Attribute, da diese aber veraltet und nicht XHTML 1.0 valid sind, machen wir das besser mit CSS.
Als erstes kommen die Höhen- und Breitenangaben. Es kann sowohl die Höhe- und Breite der gesamten Tabelle als auch die von einzelnen Spalten angepasst werden.
Dazu werden einfach die CSS Attribute height="" und width="" verwendet.
Diese werden dann mit den entsprechenden Werten den jeweiligen Tags zugeordnet.
Es können sowohl Pixelangaben wie auch Prozentangaben gemacht werden.

Weiter geht es mit ein bisschen Farbe. Natürlich kann auch das Aussehen einer Tabelle über CSS verändert werden.
Fangen wir mit dem Rahmen an. Für das Attribut border: gibt es insgesamt drei Angaben. Die erste gibt die Breite des Rahmens (z.B. in Pixeln) an. Danach kommt die Rahmenart, also durchgezogen ("solid", gepunktet ("dotted"), gestrichelt ("dashed"), etc. Als letztes wird dann die Farbe des Rahmens angegeben.
Hier ein kleines Beispiel:

Ein weiteres CSS Attribut, das nützlich sein kann, ist das Attribut padding:. Dieses gibt den Abstand der Tabelleninhalte vom jeweiligen Spaltenrand an. Der Wert kann wieder in Pixeln angegeben werden.

Als letztes kommt noch der Hintergrund. Dazu wird das CSS Attribut background-color: benutzt. Die Farbe kann dann beispielsweise als Hexadezimalcode angegeben werden.

Das waren die wichtigsten CSS Attribute für den Anfang. Es lassen sich aber fast alle Standardattribute von CSS auf Tabellen anwenden. Mehr dazu findest du auf css4you.de.

· zurück zur Übersicht