Table to CSS

Beispiel 1

Tabelle mit 2 Spalten und einer beliebigen Anzahl von Reihen.

Alle folgenden Beispiele für Tabellen werden in einen Div-Tag eingeschlossen, mit ID Selektor namens "content". Durch margin auto wird dieser mittig auf der Seite platziert. Durch overflow visible, wird der Inhalt auch angezeigt, wenn die definierte Höhe des div überschritten wird.

#content {
position:static;
left:50px;
top:150px;
width:800px;
height:350px;
z-index:1;
margin: auto;
overflow: visible;
}

Die Div Tags haben alle den gleichen Klassen-Selektor namens "zweierSpalte" und eine Breite von 50% minus padding right und padding left, welche in Prozent definiert ist.

.zweierSpalte {
float: left;
width: 46%;
padding-right: 2%;
padding-left: 2%;
}

 

 

---

Beispiel 2

Tabelle mit 3 Spalten

Dieses Beispiel wird im gleichen Div namens "content" eingefügt. Das Prinzip ist das gleiche, wir nehmen eine Breite von 33.33 Prozent und ziehen davon die padding rechts und padding links ab, welches auch in Prozent angegeben sein muss.

.dreierSpalte {
float: left;
width: 29.33%;
padding-right: 2%;
padding-left: 2%;
}

Reihe 1 Spalte 2

 

 

---

Beispiel 3

Tabelle mit rowspan

Hier gibt es zwei Stylesheetdefinitionen mit Class-Selektor "ersteRowspan" und "zweiteRowspan". Wie bei den vorigen Beispielen muss eine Reihe 100 Prozent ergeben, wobei dann jeweils das rechte und linke prozentuale Padding von der prozentualen Breite abgezogen wird.

Will man das floating abbrechen oder verhindern, kann man das mit dem CSS ".clearfloat" machen, beispielsweise in einem BR Tag

.ersteRowspan {
padding: 2%;
float: left;
width: 26%;
}
.zweiteRowspan {
padding: 2%;
float: left;
width: 66%;
}

.clearfloat { font-size: 1px; line-height: 0px; margin: 0px; clear: both; height: 0px; }

Alternativ könnte man auch die Spalten in der zweiten Reihe folgendermaßen definieren:

.zweiteRowspan {
padding: 2%;
float: none;
right: 5px;
}

Neue Reihe nach clearfloat.

---

Beispiel 4

Reihen

Die vorigen Beispiele habe ich so gebaut, damit man mit möglichst geringen Anzahl von Div-Tags, Verschachtelungen und Style-Definitionen auskomme. Dazu habe ich die Float Eigenschaft und die prozentuale Breite eingesetzt.

Im folgenden Beispiel gehe ich einen anderen Weg. Hier werden nun die Reihen einer Tabelle definiert, in denen man dann eine beliebige Anzahl von Spalten einfügen kann. Als Spalten habe ich die oben definierten CSS Stile benutzt.

.reihe {
float: left;
width: 100%;
}