01.02.2009, 07:24 Uhr

Tabellenmodell für beliebige Inhalte

Der CSS-Befehl display ist ein komplettes Tabellenmodell für beliebige Inhalte. Diese Funktion eignet sich beispielweise zur Darstellung von XML-Inhalten und Ähnlichem. Und so geht es: Grundlage sind in Tabellenform angelegte Tags, die beliebig heißen können. Folgendes Beispiel verwendet sprechende Namen und vergibt für die untere Zeile noch eine gelbe Hintergrundfarbe:
Der CSS-Befehl display ist ein komplettes Tabellenmodell für beliebige Inhalte. Diese Funktion eignet sich beispielweise zur Darstellung von XML-Inhalten und Ähnlichem. Und so geht es: Grundlage sind in Tabellenform angelegte Tags, die beliebig heißen können. Folgendes Beispiel verwendet sprechende Namen und vergibt für die untere Zeile noch eine gelbe Hintergrundfarbe:
<tabelle>
<zeile>
<zelle>Zelle 1</zelle>
<zelle>Zelle 2</zelle>
</zeile>
<zeile style="background-color: yellow">
<zelle>Zelle 3</zelle>
<zelle>Zelle 4</zelle>
</zeile>
</tabelle>
Sie müssen nun zuerst das äußerste Tag formatieren. Es erhält für display den Wert table. Mit border-spacing erzeugen Sie einen Abstand zwischen Tabelle und Inhalt. Den Rahmen außen um die Tabelle herum ziehen Sie mit dem normalen border-Attribut. Die Breite und die Höhe können Sie ebenso über die entsprechenden CSS-Angaben steuern:
tabelle {
display: table;
border: black solid 5px;
border-spacing: 5px;
font-size: 20px;
background-color: blue;
width: 200px;
height: 100px
}
Für die Zeile ist table-row zuständig, die Zelle besitzt dann den Wert table-cell:
zeile {
display: table-row
}
zelle {
display: table-cell;
padding: 5px
}




Das könnte Sie auch interessieren