Tabellen

Themen: Grundaufbau einer Tabelle
Festlegung der Tabelleneigenschaften
Gestaltung der Tabelle

Grundaufbau einer Tabelle

  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> </td> <td></td> </tr> </table>`
Zelle 11	Zelle 12
Zelle 21	Zelle 22

Eigenschaften der Tabelle 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.

Attribute zum <table>-Tag:

align="left/center/right" (alternativ und besser die Tags <left>...</left>, <center>...</center> etc. die dann das table-Tag einschließen müssen)	Tabellenanordnung auf dem Browserfenster, align wird von einigen Browsern ignoriert, die Klammerung mit dem Anordnungtag ist sicherer.
bgcolor="farbname/code"	Hintergrundfarbe der ganzen Tabelle, hier "red"
background="pfad/filename"	Bild wird in jede einzelne Zelle geladen
border=n	Rahmenbreite in Pixeln, Breite 0 = kein Rahmen, hier n=3
bordercolor="farbname/code"	Farbe der äußeren Begrenzung, hier rein blau (#0000FF)
cellpadding=n	Abstand des Tabelleninhalts zum Rahmen in Pixeln, hier sind 10 eingestellt
cellspacing=n	Raum zwischen Tabellenelementen in Pixeln, hier n=5
cols=n	Spaltenzahl
width=n oder width="m%"	Tabellenbreite, in Pixeln oder in % der Fenstergröße, hier 100%, weil die Tabelle selber in einer Tabellenzelle steckt
height=n oder height="m%"	Tabellenhöhe, in Pixeln oder in % der Fenstergröße, hat meist keine Wirkung!

  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.

Attribute zum <tr>-Tag:

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.

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 30% eingesetzt
valign="top/middle/bottom/baseline"	vertikale Ausrichtung in der Zeile, hier "middle"

Attribute zum <td>-Tag:

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

Sonstige Tabellentags 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!

Gestaltung der Tabelle 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.

Zellen verbinden

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.

	text
XX

Farbe

Die Möglichkeit, den Tabellenhintergrund insgesamt farbig zu gestalten, war schon erwähnt worden. Natürlich geht das auch zellenweise, das entsprechende Attribut bgcolor kann für jede einzelne Zelle vergeben werden. Oft wird es nötig, dabei auch die Schriftfarbe zu ändern, auch das ist innerhalb des <td> bzw. des <th>-Tags mit Hilfe des <font>-Tags möglich.

links

mittig

rechts

Bilder

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!

Text	steht	über
dem	Hinter-	grund

absolute Tabelle 150*150 Pixel

absolute Tabelle 150*150 Pixel

variable Tabelle 50%/80%

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

ö

Ränder Für Anlage und Breite der Außenberandung ist das Attribut border zuständig. Fehlt es oder erhält es den Wert 0 dann erscheinen weder Außen- noch Binnengrenzen. Werte border>0 setzt die Breite der Außengrenze fest. Es ist auch das einzige Attribut, das für die Randgestaltung vom Navigator akzeptiert wird. Bei HTML 4 gibt es noch: Das Attribut frame, nicht zu verwechseln mit dem <frame>-Tag; es ermöglicht, Tabellenränder individuell zu umrahmen. Für das Tabelleninnere übernimmt das Attribut rules die entsprechenden Aufgabe. Leider haben die meisten Browser (bzw. ihre Programmierer) davon noch nichts gehört. Vergessen wir sie.