SELFHTML: HTML/XHTML / Tabellen / Tabellen als Mittel für Web-Seiten-Layouts

SELFHTML/Navigationshilfen HTML/XHTML Tabellen
	Tabellen als Mittel für Web-Seiten-Layouts
	Allgemeines zu Tabellen für Web-Seiten-Layouts Beispiel eines typischen Tabellen-Layouts

Allgemeines zu Tabellen für Web-Seiten-Layouts

Wenn Sie bei Web-Seiten auf sauber ausgerichtete, aber relativ frei verteilte Elemente mit meist farbigen Flächen stoßen, wurde in vielen Fällen mit der Technik der "blinden Tabellen" gearbeitet. Blinde Tabellen haben keine sichtbaren Gitternetzlinien. Dadurch merkt der Betrachter gar nicht, dass es sich in Wirklichkeit um eine Tabelle handelt.

Einen Nachteil sollten Sie jedoch beachten, wenn Sie beabsichtigen, den gesamten anzuzeigenden Inhalt einer Web-Seite mit Hilfe einer blinden Tabelle anzuordnen: Tabellen werden vom Web-Browser erst angezeigt, nachdem ihr kompletter Inhalt eingelesen wurde bzw. erst in dem Augenblick, wo der Web-Browser genau weiß, wie groß und wie breit die Tabelle angezeigt werden muss. Das bedeutet bei der Datenübertragung aus dem Web, dass ein Anwender am Bildschirm länger wartet, bis überhaupt etwas angezeigt wird. Es sei denn, Sie benutzen die Möglichkeit, um Spalten vorzudefinieren.

Ein weiteres Problem besteht darin, dass Browser mit gewünschten Breiten- und Höhenangaben nicht unbedingt so umgehen, wie Sie es wünschen. Inhalte werden dann plötzlich gestaucht, auseinandergezogen usw. Dies hat zur Erfindung des so genannten "blinden Pixels" geführt, einer kleinen GIF-Grafik, die nur aus einer einfarbigen Fläche besteht, deren Farbe wiederum als transparent definiert ist. Zusammen mit der Möglichkeit, Breite und Höhe einer Grafik in HTML unabhängig von der tatsächlichen Größe der Grafik anzugeben, lässt sich eine solche Grafik scheinbar unsichtbar und unauffällig einbauen. So lassen sich vor allem feste Mindestbreiten für einzelne Spalten einer Tabelle erzwingen, und der Browser kann die Inhalte darin nicht mehr stauchen. Diese Technik gilt einerseits als unsaubere Trickserei, ist aber andererseits Ausdruck für fehlende Formatiermöglichkeiten. Mittlerweile stellen Stylesheets solche Möglichkeiten zwar bereit (vgl. die CSS-Eigenschaft min-width), doch das nutzt nicht viel, solange die weit verbreiteten Browser noch keine Unterstützung dafür anbieten.

In diesem Abschnitt wird anhand eines Beispiels gezeigt, wie Seiten-Layouts mit blinden Tabellen im Prinzip funktionieren. Auf die Technik des blinden Pixels wird hier verzichtet. Doch eine andere, typische Technik kommt zum Einsatz: das Verschachteln von Tabellen. Denn meistens lassen sich saubere Tabellenlayouts nur erreichen, wenn man mit Tabellen innerhalb von Tabellen arbeitet.

Beispiel eines typischen Tabellen-Layouts

Das folgende Beispiel zeigt ein Layout, wie man es auf vielen Web-Seiten findet: oben eine farbige Fläche, wo die Seitenüberschrift steht und andere Elemente wie Grafiken für Logos, Banner oder dergleichen Platz haben, unterhalb davon links eine gleichfarbige, direkt angeschlossene, schmale Fläche für Navigationsverweise innerhalb des Web-Projekts, und rechts davon eine breite Fläche für den eigentlichen Inhalt der Seite.

Das Beispiel ist gültiges HTML 4.0, benutzt aber diverse Attribute, die als deprecated gekennzeichnet sind, weshalb als HTML-Variante "Transitional" gewählt werden muss.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body bgcolor="#FFFFFF" link="#FFFF00" vlink="#FFCC00" alink="#FFFFFF" text="#000000">

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#A050A0">
 <colgroup>
  <col width="200">
  <col>
 </colgroup>
 <tr>
  <td colspan="2">
   <table border="0" cellpadding="10" cellspacing="0">
    <tr>
     <td>
      <h1 style="color:#FFFFFF">Willkommen</h1>
     </td>
    </tr>
   </table>
  </td>
 </tr><tr>
  <td valign="top" width="200">
   <table border="0" cellpadding="10" cellspacing="0">
    <tr>
     <td>
      <h3 style="color:#FFFFFF">Navigation</h3>
      <p><a href="table_tr_th_td.htm"><b>Tabelle</b></a><br>
      <a href="bgcolor.htm"><b>Hintergrund</b></a><br>
      <a href="colspan.htm"><b>Zellen verbinden</b></a><br>
      <a href="width_height.htm"><b>Breite und H&ouml;he</b></a></p>
      <h3 style="color:#FFFFFF">News</h3>
      <p style="color:#FFFFFF">Die Neuigkeiten stehen stets an dieser Stelle.
      Viel Neues gibt es nicht. Nur so viel: diese Seite ist neu.</p>
     </td>
    </tr>
   </table>
  </td>
  <td valign="top" bgcolor="#FFFFFF">
   <table border="0" cellpadding="10" cellspacing="0">
    <tr>
     <td>
       <h2>Worum geht es hier eigentlich?</h2>
       <p>Ach, um Web-Design, halt das &Uuml;bliche. viel Inhalt viel Inhalt viel Inhalt
       viel Inhalt viel Inhalt viel Inhalt viel Inhalt.</p>
       <p>viel Inhalt</p><p>viel Inhalt</p><p>viel Inhalt</p>
       <p>viel Inhalt</p><p>viel Inhalt</p>
       <p>viel Inhalt</p><p>viel Inhalt</p><p>viel Inhalt</p>
       <p>viel Inhalt</p><p>viel Inhalt</p>
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>

</body>
</html>

Erläuterung:

Das Beispiel bestimmt im einleitenden <body>-Tag zunächst dateiweite Farben für Hintergrund, Text und Verweise.

Innerhalb des Dateikörpers wird die übergeordnete Tabelle definiert. Sie erhält die Attribute border="0", damit kein Rahmen und keine Gitternetzlinien angezeigt werden, sowie cellpadding="0" und cellspacing="0", damit sich die einzelnen Zellen der Tabelle nahtlos aneinanderfügen. Das ist wichtig, damit zwischen den Farbflächen keine sichtbaren Lücken entstehen.

Weil es sich um eine die ganze Seite überspannende Tabelle handelt, werden für Browser, die das verstehen, die gewünschten Spalten mit <col>-Tags vordefiniert. Die Tabelle soll zwei Spalten haben, wobei die erste eine Breite von 200 Pixeln haben soll. Das soll die Spalte für Navigationsverweise werden. Die zweite Spalte soll den Rest des verfügbaren Platzes in Anspruch nehmen. Die gesamte Tabelle soll sich über die volle verfügbare Breite erstrecken - angegeben durch width="100%" im einleitenden <table>-Tag der übergeordneten Tabelle.

Die gesamte übergeordnete Tabelle bekommt ferner mit Hilfe von bgcolor="#A050A0" einen matt-violetten Hintergrund zugewiesen. Damit erhalten erst mal alle ihre Inhalte diese Hintergrundfarbe. Um andersfarbige Flächen innerhalb der Tabelle zu erzeugen, sind bei den einzelnen Zellen weitere Angaben zur Hintergrundfarbe erforderlich, die dann diese globale Hintergrundfarbe überschreiben.

Die erste Zelle der ersten Zeile der übergeordneten Tabelle ist zugleich die einzige Zelle in dieser Zeile, da durch das Attribut colspan="2" erreicht wird, dass sich die Zelle über zwei Spalten erstreckt. Der Inhalt dieser Zelle steht nun für für den Überschriftenteil zur Verfügung. Da mit cellpadding="0" und cellspacing="0" gearbeitet wird, würde der Inhalt allerdings ganz am Außenrand der Tabelle kleben, was unsauber aussieht. Deshalb kommt bereits bei der Überschrift zum ersten Mal die Technik der Tabelle in der Tabelle zum Einsatz:
<table border="0" cellpadding="10" cellspacing="0"> definiert innerhalb der über zwei Spalten gestreckten Tabellenzelle eine weitere Tabelle. Auch diese ist wiederum rahmenlos (border="0"). Durch cellpadding="10" wird jedoch ein Innenabstand von 10 Pixeln zum Zellenrand erzwungen. Diese Angabe ist der eigentliche Grund, warum die innere Tabelle definiert wird. Denn die innere Tabelle hat nur eine einzige Zeile mit einer einzigen Spalte, also nur eine Zelle, und darin ist die h1-Überschrift für die Seite notiert (Willkommen). Die Überschrift erhält mit Hilfe der CSS-Eigenschaft color: eine weiße Farbe, um sich ordentlich von dem violetten Hintergrund der Tabelle abzuheben.

In der zweiten Zeile der übergeordneten Tabelle werden für beide definierten Spalten je eine Zelle definiert. Die erste (linke) Zelle ist dann der Behälter für die gesamte linke Spalte - also für die Spalte, in der die Navigationsverweise stehen. Die zweite (rechte) Zelle ist der Behälter für den gesamten Inhalt des Hauptbereichs, also des Bereichs für den eigentlichen Seiteninhalt. Die zweite Zelle, also die für den Hauptbereich, erhält mit bgcolor="#FFFFFF" als Hintergrundfarbe weiß zugewiesen. So entsteht letztlich der optische Eindruck, als ob die Seite nur oben und links einen farbigen Balken enthalten würde, während der gesamte Rest der Seite einen weißen Hintergrund hat.

In beiden Zellen der zweiten Zeile der übergeordneten Tabelle wird auch wieder je eine innere Tabelle definiert, die mit den gleichen Attributen wie im Fall der Überschrift für saubere Abstände zum Rand sorgt. So werden auch alle Inhalte ordentlich auf einer Höhe ausgerichtet. Mit valign="top" wird in beiden Zellen dafür gesorgt, dass die Inhalte, die ja unterschiedlich groß sein können, auf jeden Fall obenbündig ausgerichtet werden.

Die Verweise in der linken Spalte heben sich durch ihre dateiweit definierten Farben gut von dem violetten Hintergrund ab. Normaler Text, der in der linken Spalte steht, also Überschriften, Textabsätze usw., erhalten im Beispiel wieder mit Hilfe von CSS eine weiße Textfarbe, um sich vom Hintergrund abzuheben.

Beachten Sie:

Sie können Stylesheets noch wesentlich konsequenter einsetzen, als es im obigen Beispiel der Fall ist. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften:
Schriftformatierung
Ausrichtung und Absatzkontrolle
Außenrand und Abstand
Innenabstand
Rahmen
Hintergrundfarben und -bilder
Positionierung und Anzeige von Elementen


	Tabellen und nicht-visuelle Medien
	Tabellenbeschriftung und Tabellenausrichtung

SELFHTML/Navigationshilfen HTML/XHTML Tabellen