Eine Tabelle wird mit dem Tag  <table>...</table> angelegt, welches den Container für alle weiteren, die Tabelle füllenden Befehle bildet. Wenn die Tabelle als solche mit dem öffnenden <table>-Tag angelegt ist,
  werden die einzelnen Zeilen mit dem Tag <tr>...</tr> (von Table Row) definiert
  innerhalb jeder Zeile wird mit dem Zellen-Tag <td>...</td> (von Table Data) die Aufteilung vorgenommen und die Tabelle zellenweise mit Inhalt gefüllt
  für die Kennzeichnung von Überschriftenzellen gibt es ein spezielles Tag <th>...</th> (von Table Head) welches (natürlich) entfallen kann
  Die definierende Zeile enthält zwei Attribute, die anschließend erläutert werden.
  Der etwas umständliche Bau einer Tabelle hat den großen Vorteil, daß Tabellen in jedem lächerlichen Browser, anders als in den besten Schreibprogrammen der Welt, geschachtelt werden können. Das gezeigte Beispiel ist eine geschachtelte Tabelle. Eine unsichtbare große Tabelle dient als Hilfe zur Anordnung beider Blöcke.
  Unten in der rechten Ecke sieht es unter Umständen doof aus. Einige Browser mögen keine leeren Tabellenzellen. Mindesteintrag ist ein geschütztes Leerzeichen.

<table border width="100%"> <tr> <td>Zelle 11</td> <td>Zelle 12</td> </tr> <tr> <td>Zelle 21</td> <td>Zelle 22</td> </tr> <tr> <td>&nbsp;</td> <td></td> </tr> </table>

Zelle 11

Zelle 12

Zelle 21

Zelle 22

Die Festlegung der Tabelleneigenschaften erfolgt mit Hilfe von Attributen zu den definierenden Tags. Dabei erfolgen die Festlegungen so allgemein wie möglich: Was die ganze Tabelle betrifft, wird im <table>-Tag festgelegt, was die Zeile betrift im <tr>-Tag usw.

 Der Code, der die abgebildete Tabelle definiert, lautet komplett:
<table align=center border=3 bordercolor="blue" cellspacing=5 cellpadding=10 width="100%" bgcolor="#ff0000" >
Eine besondere Erläuterung ist zur Tabellengröße erforderlich. Diese muß gar nicht angegeben werden. Die Browser bemessen die Tabelle nach den Inhalten. Man spricht von variablen Tabellen. Wenn die Größenangaben erfolgen, sie können prozentual auf die Fenstergröße bezogen sein oder sogar pixelgenau festgelegt werden, kann man meinen, nun seien die Tabellen genau bemessen, zumal sie oft "absolute Tabellen" heißen. So kann man sich irren!
  Wie geht es genau? Die Angaben zur Breite werden zunächst realisiert. Wenn allerdings der Tabelleninhalt zu groß wird (z. B. durch vorformatierten Text oder Bilder), dann dehnt sich die Tabelle gummiartig aus. Die angegeben Breite ist also nur die untere Grenze der angezeigten Breite.
  Noch anders geht es mit der Höhe. Nach längerer Beobachtung glaube ich, daß zumindest meine Browser sich einen Dreck um die Höhenangaben für die ganze Tabelle scheren. Die Tabelle wird in vertikaler Richtung immer als variabel verwaltet. Anders dagegen, wenn die Höhenangabe für Zellen erfolgt. Dann wird sie eingehalten. Um also eine Tabelle wirklich "absolut" zu machen, muß die Größe jeder Zelle einzeln festgeschrieben werden.

 Wie die folgende Tabelle zeigt, werden nicht alle zulässigen Attribute von allen Browsern umgesetzt. Der Explorer will kein Hintergrundbild für die Zeile; die vertikale Ausrichtung funktioniert bei beiden Großbrowsern nur teilweise und generell besser, wenn die Ausrichtungsattribute zu <td> vergeben werden.

es gelten die Attribute des <tr>-Tags,

align="left/center/right/justify"	Ausrichtung der Einträge, hier rechts
background="pfad/filename"	Hintergrundbild
bgcolor="farbname/code"	Hintergrundfarbe, hier #00AAAA
height="n/m%"	Zeilenhöhe in Pixeln oder Prozent des Fensters, hier sind 150 Pixel eingesetzt
valign="top/middle/bottom/baseline"	vertikale Ausrichtung in der Zelle, hier "baseline"

zusätzlich aber:

colspan=n	Zelle läuft über n Spalten
nowrap	kein Zeilenumbruch in der Zelle
rowspan=n	Zelle läuft über n Zeilen
width="n/m%"	Zellenbreite in Pixeln oder Prozent des Fensters

 Zusätzlich kann die Tabelle eine Über- oder Unterschrift erhalten. Dazu gibt es soger zwei Tags. <th> für Headline und <caption>. Mit align="top/bottom" wird zwischen Über- und Unterschrift unterschieden. In jedem Falle werden sie mittig gesetzt. Theoretisch sollen sie mit align="left/center/right" auch horizontal einstellbar sein. Das geht beim Explorer, bei Netscape nicht. Hier erreicht man mit <div align=right>...</div> noch die rechtsbündige Ausrichtung. Nach links geht es nicht.
  Eine Reihe weiterer Tags für die Tabellenbeschreibung sind eigentlich in HTML vorgesehen, werden aber entweder nur vom Explorer oder auch gar nicht genutzt. Dazu gehören: <col> für die Adressierung einer Spalte zu Formatierungszwecken, <colgroup> dasselbe für mehrere Spalten sowie <thead>, <tbody>, <tfoot> für die Adressierung unterschiedlicher Tabellenbereiche.
Gleich in ein paar Jahren noch einmal probieren!

 Die nackte Tabelle kann vielfältig abgewandelt, angepaßt, wenn man will auch verschönert oder verhunzt werden. Zu beachten ist, daß bei Tabellen, speziell bei der Behandlung von Begrenzungen die Unterschiede der Browser besonders groß sind. Deshalb kann man von aufwendiger Gestaltungsarbeit an Tabellen eigentlich nur abraten.

Die Beispiel-Tabelle enthält verbundene Zellen. Um die Zusammenhänge klar zu machen, wurde zeilenweise eingefärbt. Der Code für die zweite Zelle lautet: <td colspan=4>text</td>, weitere Zellcodes entfallen dann für diese Zeile.
Die erste Zelle der zweiten Reihe wird mit <td rowspan=4>XX</td> definiert. Es folgen in dieser Reihe weitere vier Zellen. In den folgenden Zeilen gibt es dann nur jeweils vier Zellen.

Bilder lassen sich wie bei Seiten als Hintergründe einfügen. Bloß leider passiert dabei einiges, was der Nutzer evtl. so nicht wollte. Versuchen Sie, die folgenden Bilder mit Netscape und mit Explorer anzusehen. Sie werden staunen!

Ganz anders das Ergebnis, wenn das gleiche Bild als Zellinhalt geladen wird. Nun ist es natürlich nicht mehr überschreibbar. Die Tabellenformatierungen der oberen Reihe ergeben nun (Bilder zentriert):

die Tabelle wird beim Einfügen verzerrt, später erzwingen die Bilder eine Ausweitung über das festgelegte Maß hinaus

die Tabelle paßt sich in der Höhe den Bildern an

Eine Tabelle über einem Bild wäre ja evtl. ganz reizvoll. Beim Explorer kein Problem, Netscape ziert sich.
Eine sichere Lösung ist, das Hintergrundbild zellenweise zu zerschneiden und zellenweise zu laden. Das wird gerne gemacht, um größere Grafikseiten aufzubauen.
Aber HTML und die Internetprogrammiersprachen verlangen nach Improvisation. Versuchen wir noch einen anderen Weg: Die Methode Kunze-Knorr, die -mit viel Glück- in beiden Groß-Browsern funktioniert:

Text

  Man muß zu einer zweiten Tabelle greifen. Die Hintergrundtabelle besitzt nur eine Zelle, ist rahmenlos und enthält das Hintergrundbild in originaler Größe. Sie enthält die eigentliche Tabelle mit gleich angegebenen Pixelwerten. Die eingebaute Tabelle erhält, ohne Angabe von 'background' wieder in jeder Zelle das Hintergrundbild. Erst wenn 'background=""' ergänzt wird, erreicht(e) man das gewünschte Ergebnis. (Anmerkung bei der Nachkontrolle, die Sache lief seinerzeit mit einem Netscape 4.x gut, mein zufällig installierter Netscape 4.y macht sie nicht mehr mit. Netscape 6 dagegen braucht diesen Quatsch nicht!)

Testbild zum Vergleich

Zurück

Inhaltsverzeichnis

Nächste

Diplomarbeiten zum Runterladen: