Grundaufbau einer 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.

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.

  
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.

 Attribute zum <td>-Tag: 

Attribute zum <td>-Tag: 

  
zusätzlich aber:

 
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.

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.

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.