Kommentare

Das Beispiel am Ende des letzten Abschnittes hat deutlich gezeigt, dass der Code von Tabellen schnell so umfangreich wird, dass man den Überblick verliert. So lange man sich mit dem Aufbau einer Tabelle beschäftigt, ist das normalerweise noch kein Problem. Problematisch wird es jedoch spätestens dann, wenn man eine Tabelle überarbeiten möchte und sich nicht mehr daran erinnert, woran man dachte, während man „im Thema steckte“.

Um solchen Schwierigkeiten vorzubeugen, sollten Sie sich selbst einen Gefallen tun und die Quelltexte Ihrer Seiten an geeigneten Stellen mit entsprechenden Kommentaren versehen.

Kommentare beginnen mit

<!--

und enden mit

-->

Alles, was zwischen diesen Marken steht, wird bei der Darstellung einer Seite vom Browser ignoriert und ist für den Besucher nur dann sichtbar, wenn er sich den Quelltext ansieht. Ein Beispiel:

<!-- Dies ist ein Kommentar -->

Praktisch ist, dass das, was sich zwischen diesen Marken befindet, quasi beliebig lang sein kann. Und das bedeutet:

<!--
     Kommentare
     können sich
     auch über mehrere
     Zeilen erstrecken
 -->

Tipp: Eine äußerst nützliche Funktion von Kommentaren ist die Möglichkeit, Teile des Codes „ausblenden“ zu können. Wenn Sie beispielsweise möchten, dass ein Absatz oder eine Tabelle von einer Seite verschwindet, diesen Teil aber nicht dauerhaft löschen wollen, dann fassen Sie die betreffenden Zeilen zwischen Kommentarmarken. Sollten Sie Ihre Meinung zu einem späteren Zeitpunkt ändern, löschen Sie die Kommentarmarken einfach wieder.

Tipp: Gewöhnen Sie sich einheitliche Kommentare an. Wenn Sie beispielsweise die „eigentlichen Inhalte“ Ihrer Seiten in immer gleich lautende Kommentare fassen, können diese bei Bedarf leicht automatisiert verarbeitet werden.

Tipp: Kennzeichnen Sie das Ende Ihrer Dateien (z. B. mit „<!-- eof -->“). Sollte dieser Kommentar einmal fehlen, wissen Sie, dass bei einer Übertragung etwas schief gelaufen und die Datei nicht vollständig ist.

Tabellen als Gestaltungsmittel

In den ersten Jahren des Internets wurden Webseiten häufig von Menschen gestaltet, die einen Hintergrund als Gestalter von Drucksachen hatten. Diese waren zumeist gewohnt, bei der Definition des Erscheinungsbildes (des „Layouts“) einer Drucksache mit Angaben wie „Seitenrand“ oder „Spaltenabstand“ zu arbeiten und Inhalte durch die Angabe von Koordinaten zu positionieren. Entsprechend groß war der Wunsch, bei der Gestaltung von Internetseiten vergleichbar vorgehen zu können.

Da reines HTML über keine geeigneten Mittel hierzu verfügt, musste man sich anders helfen und entdeckte schnell, dass Tabellen ein flexibles und leistungsfähiges Werkzeug hierfür darstellen. Eine der praktischen Eigenschaften von Tabellen ist, dass sie sich schachteln lassen – man kann in einer Tabelle nicht nur Texte und Bilder sondern ebenso weitere Tabellen unterbringen.

Es liegt also nahe, das Layout einer Seite zunächst mit einer Tabelle festzulegen und die Seiteninhalte in dieser Tabelle unterzubringen. Eine der großen Stärken von HTML-Tabellen, die dynamische Anpassung an Inhalt und Fenstergröße, erweist sich dabei häufig als eine gedankliche Hürde, die einiges Kopfzerbrechen bereiten kann. Wenn man sich jedoch erst einmal an die Besonderheiten eines dynamischen Layouts gewöhnt hat, kann der Umgang damit ein echter Spaßbringer sein.

Zunächst ein paar Informationen darüber, wie ein Browser bei der Darstellung von Tabellen üblicherweise vorgeht:

• Eine unformatierte Tabelle – eine Tabelle, die keinerlei Vorgaben für die Maße ihrer Elemente enthält – wird üblicherweise so aufgebaut, dass ihr Inhalt vollständig dargestellt wird. Umbrüche werden möglichst nur dort vorgenommen, wo es sinnvoll ist. Dabei wird außerdem darauf geachtet, dass die Tabelle nicht mehr Platz in Anspruch nimmt, als nötig.
• Wird das Browserfenster skaliert, ändert sich oft die Breite einer Tabelle. Darin enthaltener Text wird neu umbrochen, wodurch sich fast immer die vertikale Ausdehnung der betroffenen Zelle(n) ändert.
• Die minimale Breite einer Zelle wird durch das größte, nicht teilbare Element darin bestimmt – wobei zu beachten ist, dass Text als eine Folge von Zeichen gesehen wird und ohne Zwischenraum aufeinander folgende Buchstaben nicht anders behandelt werden, als Leerschritte. Zwar werden Leerschritte beim Umbruch bevorzugt, aber Text kann im Extremfall nicht nur dort umbrochen werden, wo sich ein Zwischenraum befindet, sondern grundsätzlich zwischen zwei beliebigen Zeichen. Es kann also passieren, dass lange Worte an beliebigen Stellen getrennt und auf zwei oder mehr Zeilen verteilt werden. Silbentrennung und automatisches Einfügen von Trennstrichen finden dabei normalerweise nicht statt.
• Bilder werden grundsätzlich als nicht teilbare Einheit behandelt und vollständig dargestellt.
• Breite und Höhe einer Spalte bzw. Zeile werden durch die größte enthaltene Zelle bestimmt.
• Die Elemente einer Tabelle können Vorgaben zu deren Maßen enthalten. Diese Angaben werden im Extremfall jedoch übergangen und sind somit nur eingeschränkt für die Definition eines Layouts geeignet.

Aus dem gerade Ausgeführten folgt:

Bei der Verwendung von Tabellen zu Layoutzwecken sind zuerst die Angaben zu den horizontalen Werten (Gesamt- oder Spaltenbreite(n)) interessant. Die Höhe von Zellen bzw. Zeilen hängt von deren Inhalten ab.

Bilder sind die einzigen Dinge, die man dazu verwenden kann, Mindestbreite oder -höhe von Spalten bzw. Zeilen verlässlich vorzugeben bzw. vom Browser zu erzwingen. Die Beschränkung der horizontalen Ausdehnung einer Zelle (und somit der Spalte, in der sie enthalten ist) auf einen Maximalwert ist nur über einen Umweg möglich.

Die Option zur Formatierung der Breite von Tabellenelementen heißt width=. Sie akzeptiert sowohl absolute Werte in Pixeln (z. B. width="60") als auch Prozentangaben (z. B. width="30%"). Eine Prozentangabe bezieht sich dabei auf die Größe des übergeordneten Elements (z. B. des Browserfensters).

Eine Tabelle, deren Anfang so

<table width="50%">

aussieht, wird also mit der halben Breite des übergeordneten Elements angezeigt (sofern möglich).

Probieren Sie’s aus!

Bevor Sie den folgenden Abschnitt lesen, sollten Sie mit Tabellen experimentieren, die mit unterschiedlichen Werten für die Breite von Elementen versehen sind. Beobachten Sie, wie sich die Darstellung einer Tabelle und deren Elemente der Größe des Browserfensters anpasst. Probieren Sie auch, wie sich die Darstellung ändert, wenn eine Tabelle unterschiedlich viel Text oder Bilder enthält.

Weiter zu: Planen eines Layouts

Nach oben