Tabellen

Der allgemeine Aufbau

So siehts aus:
Spalte 1 Spalte 2

TD: gibt die Spaltenanzahl (von links nach rechts) an
TR: gibt die Zeilenanzahl (von oben nach unten)an

Styling

Mit Hilfe verschiedener Attribute könnt ihr schon im HTML Code das Styling eurer Tabellen beeinflussen.

width + height: Breite und Höhe der Tabelle, in Pixel angegeben.
border: Der Rahmen der Tabelle in Zahlen angegeben.
bordercolor: Die Rahmenfarbe, angegeben mit Hexcode.
border-style: hier könnt ihr "dotted" für gepunkteten Rahmen oder "dashed" für gestrichelten Rahmen angeben
bgcolor: Die Hintergrundfarbe der Tabelle, angegeben mit Hexcode.

Etwas schöner sieht es jedoch aus, wenn ihr eure Tabelle mit Hilfe eines CSS Codes definiert.

So sieht die gestylte Tabelle aus dem Beispiel aus.
Spalte 1 Spalte 2

Geändert habe ich in dem Beispiel folgendes.
color: Schriftfarbe
font-size: Schriftgröße
background-color: Hintergrundfarbe
border: Rahmenfarbe, Art (dashed, dotted, double, solid sind möglich), Dicke

Es ist auch ganz einfach möglich nur die Spalten oder Zeilen zu definieren. Dafür setzt ihr lediglich ein "tr." oder "td." vor eure ID.

Damit eure Tabelle nun die gewünschten Eigenschaften annimmt, müsst ihr der Tabelle im HTML Code die ID eures CSS Codes "tabeispiel" zuweisen.

Rahmen

Ihr habt bereits etwas zu den Möglichkeiten euren Rahmen zu stylen gelernt, doch es ist ebenfalls möglich nur eine bestimmte Gruppen von Rahmen anzeigen zu lassen. Beispielsweise also nur den äußeren Rahmen! Dafür weist ihr dem HTML Code eurer Tabelle einfach eines der folgenden Attribute zu.

rules="none" Es werden gar keine Linien gezogen.
rules="rows" Es werden Linien zwischen den Zeilen gezogen.
rules="cols" Es werden Linien zwischen den Spalten gezogen.
rules="groups" Es werden nur die äußeren Linien gezogen.

In diesem Beispiel werden nur die äußeren Linien gezogen:

Beispiel
Spalte 1 Spalte 2

Abstände

Durch kleine Zusatzangaben könnt ihr die Abstände innerhalb der Zellen und zum Rahmen bestimmen.

Cellspacing gibt den Abstand zum Rahmen an, Cellpadding den innerhalb der Zellen. In dem Beispiel beträgt er 5px, die Angaben könnt ihr aber natürlich beliebig ändern.

Zwei Tabellen nebeneinander

Mit dem "float"-Befehl könnt ihr die Tabelle ausrichten und so zwei Tabellen nebeneinander anzeigen lassen.

Hier ein Beispiel:
Spalte 1 Spalte 2
Spalte 1 Spalte 2