BHAK & BHAS Bludenz

Grundkurs HTML & CSS

Breitenabgaben in Zellen


Wenn man einer Tabelle als ganzer eine bestimmte Breite zuweist und bei den einzelnen Zellen keine Angaben macht, so stellt der Browser die Breite abhängig vom Zelleninhalt dar. Die erste Tabelle hat keine fixierte Breite:

Einst lebte im Wald ein kleines Ungeheuer.
Es fraß mit Vorliebe arme Webdesigner.

Man sieht sehr gut, dass die Spaltenbreite jeweils von der Zelle mit dem längeren Text bestimmt wird. Die folgende Tabelle ist 420 Pixel breit, die Zellenbreiten sind nicht definiert.

Einst lebte im Wald ein kleines Ungeheuer.
Es fraß mit Vorliebe arme Webdesigner.

Man sieht wieder, dass die Spaltenbreite jeweils von der Zelle mit dem längeren Text bestimmt wird. Aufgrund der "Überbreite" ergeben sich leere Flächen in den Zellen. Im nächsten Beispiel sind alle Spalten jeweils 140 Pixel breit. Dies definiert man in der obersten Zelle jeder Spalte mittels des Attributs width="XXX".

Einst lebte im Wald ein kleines Ungeheuer.
Es fraß mit Vorliebe arme Webdesigner.

Das Beispiel birgt mehrere Lektionen:

  1. Die erste Tabelle brauchte nicht die gesamte Breite und wurde automatisch verkleinert.
  2. Bei fixierter Spaltenbreite wird der Text bei Bedarf automatisch in mehrere Zeilen umgebrochen.
  3. Die horizontale Ausrichtung des Textes in den Zellen der gleichen Zeile entspricht dem Attribut valign="middle".
  4. Die Spaltenbreite ist nicht wirklich gleichmäßig.

Nun wiederholen wir das Spielchen mit einer relativen Tabellenbreite von 60%, zuerst ohne Angabe der Spaltenbreite.

Einst lebte im Wald ein kleines Ungeheuer.
Es fraß mit Vorliebe arme Webdesigner.

Der Effekt ist derselbe wie bei einer fixen Tabellenbreite. Als nächstes wird den Spalten jeweils eine Breite von 33% zugewiesen.

Einst lebte im Wald ein kleines Ungeheuer.
Es fraß mit Vorliebe arme Webdesigner.

Diesmal ist die Spaltenbreite gleichmäßig. Man darf absolute und relative Spaltenbreiten laut HTML/XHTML-Spezifikationen nicht mischen. In der Praxis funktioniert es dennoch in den meisten modernen Browsern, weil sie relativ gutmütig sind. Ein Validator wird allerdings immer einen Fehler anzeigen. Diese unerlaubte Vorgehensweise ergibt dann Sinn, wenn die Tabellenbreite in Prozent angegeben wird, eine oder mehrere Spalten aber eine absolute Breite benötigen. Man sehe:

width="200" width="*" width="150"

Die mittels width="*" definierte Spalte bleibt flexibel, nimmt also - je nach Auflösung und Fensterbreite - einfach den verbleibenden Platz ein.


Aufgabe 21

Öffne im Windows-Editor die Datei geruest.htm und füge eine Tabelle aus fünf Spalten und drei Zeilen mit einer Breite von 400 Pixeln ein. Definiere spaltenweise unterschiedliche Breiten. Fülle soviel Text pro Zelle ein, dass mindestens eine Zelle dreizeilig umgebrochen wird. Speichere die Datei mit dem <title> Tabelle 6 unter uebung14.htm ab.