Tipps und Tricks » kleine webmaster FAQ

ID #1818

Tabelle mit DIV-Tags und CSS erzeugen (demos)

Hallo,

möchte man eine Tabelle mit CSS erstellen, so benötigt man als erstes ein stabiles layout.

wrapperdas Grundlayout besteht aus 3 DIV-Containern

<div class="twrapper">

<div class="ttable>

<div class="tbody">

</div>

</div>

</div>

tbody enthält dann die Reihen und Spalten, einen Header für die Zusammenfassung und einen footer für Erklärungen.

tbody

<div class="twrapper">


<div class="ttable>

<div class="tbody">

<div class="theader"></div>

<div class="trow"></div>

<div class="trow></div>

<div class="tfooter"</div>

</div>

</div>

</div>

In trow platzieren wir dann die einzelnen Zellen, am Ende sieht es dann so aus:

Header und footer werden jeweils mit clear:both befestigt, Reihen und Zellen mit float:left eingereiht. Das sollte mit gängigen browsern funktionieren.

In den Demos sind im Stylesheet first-child und last-child zu finden, welches die Formatierung wesentlich erleichtert.

Demo einzelne Tabelle

Demo mehrere Tabellen im Fließtext

Am besten beginnt man damit eine Reihe mit Zellen aufzubauen und die richtige Größe zu testen, dann kopiert man die Reihen einfach in das Grundlayout.

.
.
 

Tags: CSS, DIV, erzeugen, HTML, Programmieren, Tabelle, webmaster

Verwandte Artikel:

Letzte Änderung des Tests: 2017-05-15 16:48
Autor: pipe

Leser: 8555 (14.9 pro Tag )


Revision: 1.0

Artikel bewerten

bisher bewertet
3.75 (44 ×)

1 2 3 4 5

Kommentar schreiben


Spam Schutz

..