Web-Seite mit Hilfe von Tabellen aufteilen

Warum Tabellen?

Die Lesbarkeit auf einem Bildschirm kann mühsam werden, wenn sich der Text über die ganze Bildschirm-Breite erstreckt. Spalten bieten eine gute Lösung für dieses Problem. Nur - die Spalten dürfen auch nicht so lang sein, wie z.B. in einer Zeitung; man müsste beim Lesen mehrmals rauf und runter scrollen.
Sehr angenehm ist es, wenn sich der Text gut überblicken lässt. Mit einer Tabelle lässt sich die Bildschirm-Seite gut in Bereiche aufteilen. Es geht hier nicht um eine Tabellenkalkulation wie etwa bei Excel, sondern lediglich um das Aufteilen des Platzes. Für Berechnungen kommen hier andere Mittel zur Anwendung.
Die Seite, die Sie gerade lesen, besteht auch aus Tabellen. Die Rahmen können natürlich ausgeblendet werden, dort wo sie das Erscheinungsbild stören würden. Ich habe die Rahmen eingefügt, um die Struktur der Seite sichtbar zu machen.

So sehen die Tags
einer Tabelle aus.

Eine Tabelle mit Spalten-Überschriften, drei Spalten und zwei Zeilen. Im Quellcode dieser Seite sehen Sie, dass jeweils noch Grössen-Angaben stehen, wie etwa:
<td width="30%">Text A1</td>
Die Definitionen der Formate sind auf unterschiedliche Art und Weise möglich. Ein guter Web-Editor hilft bereits beim Erstellen der Tabelle, diese Angaben korrekt zu schreiben.
Dieses Beispiel zeigt die minimalen Tags einer Tabelle.

<table>Beginn der Tabelle

<tr>Tabellen-Zeile

<th></th>Überschrift Spalte 1

<th></th>Überschrift Spalte 2

<th></th>Überschrift Spalte 3

</tr>Ende der Überschriften-Zeile

<tr>Tabellen-Zeile

<td></td>Anfang und Ende des ersten Tabellen-Spalten-Feldes

<td></td>Ein weiteres Tabellen-Spalten-Feld

<td></td>Und ein drittes Tabellen-Spalten-Feld

</tr>Ende der ersten Tabellen-Zeile

<tr>Eine weitere Tabellen-Zeile

<td></td>1. Spalten-Feld

<td></td>2. Spalten-Feld

<td></td>3. Spalte-Feld

</tr>Ende der zweiten Tabellen-Zeile

</table>Ende der Tabelle

Und so weiter...

Klicken Sie hier, um das Beispiel anzuschauen.

Überschrift A	Überschrift B	Überschrift C
Tabellen-Daten A1	Tabellen-Daten B1	Tabellen-Daten C1
Tabellen-Daten A2	Tabellen-Daten B2	Tabellen-Daten C2

Nachtrag

Sie sehen im obigen Beispiel, dass Tabellen auch verschachtelt werden können. Die erste Tabelle ist 90% breit (des ganzen Bildschirmes) und besteht aus einer 25% Spalte und einer 75% Spalte.
In der rechten Spalte ist die zweite Tabelle integriert. Diese ist wieder 90%, dieses Mal aber nicht 90% des ganzen Bildschirmes, sondern 90% der rechten Spalte der ersten Tabelle.
Die drei Spalten haben je eine Breite von 30% (3 x 30 = 90).
Die Höhe der Zeilen entseht automatisch, sobald Sie Daten in die Felder einfügen.

Beispiel-Tabelle

Gesetzter Wert, um den Rahmen zu beeinflussen:
border="5"

<table align="center" width="90%" border="5">

xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx

Beispiel-Tabelle

Gesetzter Wert, um den Abstand vom Text zum Rahmen zu bestimmen:
cellpadding="5"

<table align="center" width="90%" border="5" cellpadding="5">

Beispiel-Tabelle

Gesetzter Wert, um den Abstand zwischen den Tabellenfeldern einzustellen:
cellspacing="10"

<table align="center" width="90%" border="5" cellpadding="5" cellspacing="10">

Zurück zur Startseite