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.
| 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 Ausrichtungin der Zeile,hier „middle“ |
Attribute zum <td>-Tag:
| 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 Ausrichtungin der Zelle, hier „baseline“ |
Attribute zum <td>-Tag:
| 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 Ausrichtungin 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.
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 |
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.