BHAK & BHAS Bludenz

Grundkurs HTML & CSS

Breitenangaben in Tabellen


Die Breite einer Tabelle kann auf zwei Arten festgelegt werden: absolut in Pixeln und relativ in Prozent der Bildschirmbreite bzw. der Browserfensterbreite, die ja auch kleiner als die Bildschirmbreite sein kann. Die beiden Methoden haben ihre spezifischen Vor- und Nachteile:

  1. Absolute Breite in Pixeln
    1. Vorteil
      • absolute Kontrolle über das Layout (vor allem Positionierungen, aber auch Erscheinungsbild)
    1. Nachteil
      • Surfer, die eine andere Monitorgröße und/oder Bildschirmauflösung als der Webdesigner haben, müssen unter Umständen horizontal scrollen. Das ist alles andere als erfreulich.
  1. Relative Breite in %
    1. Vorteil
      • Die Tabelle passt sich in ihrer Breite automatisch an Bildschirmauflösung und Browserfensterbreite an. Horizontales Scrollen entfällt.
    1. Nachteil
      • Das Layout wird "beweglich", d.h., absolute Positionierungen von Elementen via Tabellen entfallen als Gestaltungsmöglichkeit.

Das nachstehende Beispiel zeigt eine Tabelle, die zentriert wurde, drei Zeilen und drei Spalten enthält und 450 Pixel breit ist.

     
     
     

Als weiteres Schmankerl wurde in der zweiten Spalte eine andere Hintergrundfarbe definiert.

Wenn in einer Zelle kein Text steht, sollte stattdessen immer ein absoluter Leerschritt eingefügt werden. Dies macht man mit dem HTML-Sonderzeichen & n b s p ;, das im Code ohne Leerschritte zu schreiben ist.

Das nächste Beispiel präsentiert dieselbe Tabelle, nur ist diesmal eine relative Breite von 60% definiert. Was das bedeutet, zeigt sich, wenn man das Browserfenster kurzfristig verkleinert.

     
     
     

Aufgabe 20

Öffne im Windows-Editor die Datei geruest.htm und füge eine Tabelle aus vier Spalten und fünf Zeilen mit einer Breite von 400 Pixeln ein. Definiere mittels CSS tabellen- und zellenweise unterschiedliche Hintergrundfarben. Speichere die Datei mit dem <title> Tabelle 5 unter uebung13.htm ab.