Tabellen in HTML

Dementsprechend sind etliche Erweiterungen zum Standard im Umlauf, die in der Tat auch von vielen Browser unterstützt werden. Diese erweiterten Möglichkeiten gehen wiederum weit über das hinaus, was der Standard (bislang) zulässt.

Tabellen sind immer eigene Absätze, gehören damit zu den blockorientierten Gestaltungselementen.

• Grundlagen
• Rahmen und Gitternetz
• Blind Table
• Ausdehnung
• Ausrichtung
• Überspannung
• Rahmendicke
• Benutzerdefinierte Tabellengröße
• Festlegung von Spaltenbreiten und Zeilenhöhen
• Zellenabstände
• Ausrichtung von Zelleninhalten
• Farbe in Tabellen
• Hintergrundbilder in Tabellen

Grundlagen

Die gesamte Tabelle wird in HTML durch den table-Tag gekapselt, der eine Menge von Tabellenzeilen enthält. Diese Zeilen werden jeweils durch tr (table row) umschlossen, und bestehen ihrerseits aus einer Menge von Zellen. Die einzelne Zelle wird mit td (table cell) umschlossen.

Die allgemeine Form ist damit

<table>
  <tr>
    <td> Zeile 1 - Spalte 1 </td>
    <td> Zeile 1 - Spalte 2 </td>
    ...
    <td> Zeile 1 - Spalte n </td>
  </tr>
  <tr>
    <td> Zeile 2 - Spalte 1 </td>
    <td> Zeile 2 - Spalte 2 </td>
    ...
    <td> Zeile 2 - Spalte n </td>
  </tr>
  ...
  <tr>
    <td> Zeile m - Spalte 1 </td>
    <td> Zeile m - Spalte 2 </td>
    ...
    <td> Zeile m - Spalte n </td>
  </tr>
</table>

Verwenden Sie den th-Tag (table heading) anstelle von td, um Überschriften zu setzen.

Jede Zelle kann beliebige HTML-Elemente enthalten, insbesondere also wiederum Tabellen.

Rahmen und Gitternetz

Mit Hilfe des border Attributes kann ein Rahmen erzeugt werden. Nachteilig bei Rahmen ist die Tatsache, dass sie mit einem 3D-Effekt dargestellt werden, der sich nicht abschalten lässt, wie es etwa bei den horizontalen Trennlinien möglich ist.

Dies führt bei gewissen Hintergrundfarben, wie etwa Weiß, oder gewissen Hintergrundmustern zur sehr unschönen Ergebnissen. (Für den beschriebenen Effekt bei Hintergrundmustern müssen Sie noch wissen, dass Browser i.a. nur die raising und die falling line zeichnen (etwa in weiß und schwarz), um den 3D-Effekt zu erzeugen.

Das Mittelfeld wird freigelassen, wo dann das Muster sichtbar ist.)

Bei den Erweiterungen zum Rahmen und Gitternetz werden wir eine Möglichkeit kennenlernen, mit der sich dieser Effekt vermeiden lässt.

Beispiel: "Eine einfache Tabelle mit Rahmen"

<table border="1">
  <tr>
    <td> Zeile 1 - Spalte 1 </td> <td> Zeile 1 - Spalte 2 </td>
  </tr>
  <tr>
    <td> Zeile 2 - Spalte 1 </td> <td> Zeile 2 - Spalte 2 </td>
  </tr>
</table>

liefert

Blind Table

Lassen wir im Beispiel border weg, so erhalten wir eine sog. blind table oder hidden table (weil man nicht notwendig sieht, dass es sich um eine Tabelle handelt).

Ausdehnung

Die Breite der Tabelle passt sich automatisch dem Inhalt an, wobei meist so kompakt wie möglich dargestellt wird. Mit dem width Attribut kann die Breite prozentual zur zur Verfügung stehenden Breite angegeben werden.

Beispiel:

<table border="2" width="100%">
  <tr>
    <td> Zeile 1 - Spalte 1 </td> <td> Zeile 1 - Spalte 2 </td>
  </tr>
  <tr>
    <td> Zeile 2 - Spalte 1 </td> <td> Zeile 2 - Spalte 2 </td>
  </tr>
</table>

liefert

Die Tabelle erstreckt sich also über die gesamte Breite (100%). Geben wir nun einmal weniger Platz:

Beispiel:

<table border="2" width="50%">
  <tr>
    <td> Zeile 1 - Spalte 1 </td> <td> Zeile 1 - Spalte 2 </td>
  </tr>
  <tr>
    <td> Zeile 2 - Spalte 1 </td> <td> Zeile 2 - Spalte 2 </td>
  </tr>
</table>

liefert

und noch weniger

Beispiel:

<table border="2" width="25%">
  <tr>
    <td> Zeile 1 - Spalte 1 </td> <td> Zeile 1 - Spalte 2 </td>
  </tr>
  <tr>
    <td> Zeile 2 - Spalte 1 </td> <td> Zeile 2 - Spalte 2 </td>
  </tr>
</table>

liefert

Wir sehen, dass der Browser unsere Wünsche so gut es eben geht erfüllt, Zelleninhalte werden entsprechend umgebrochen (an Leerzeichen, manchmal auch an Bindestrichen).

Die natürliche Grenze liegt bei der Breite des längsten Wortes, welche damit die Mindestbreite der Spalte bestimmt. (Dies ist auch günstiger, als wenn der Browser mit dem Wort umbrechen würde.)

Beispiel:

<table border="2" width="1%">
  <tr>
    <td> Zeile 1 - Spalte 1 </td> <td> Zeile 1 - Spalte 2 </td>
  </tr>
  <tr>
    <td> Zeile 2 - Spalte 1 </td> <td> Zeile 2 - Spalte 2 </td>
  </tr>
</table>

liefert

Ausrichtung

Die gesamte Tabelle wird üblicherweise links ausgerichtet. Genauer wird sie als eigener Absatz linksbündig gesetzt.

Mit dem align Attribut des Tags table kann die Tabelle anders ausgerichtet werden. Mögliche Werte sind left, right und center.

<table align="center">
...
</table>

Beachten Sie bitte, dass Sie sie auch links und rechts ausrichten können, wobei dies eine zu Grafiken analoge Bedeutung hat, d.h. die Tabelle wird dann aus dem Fließtext herausgenommem und der Fließtext 'umfließt' die Tabelle, so wie er Grafiken umfließen kann. Damit sind interessante Dinge möglich.

Besonders kompatibel zentrieren Sie eine Tabelle durch Kapselung mit center:

<center>
  <table>
    ...
  </table>
</center>

bzw. div:

<div align="center">
  <table>
    ...
  </table>
</div>

Überspannung

Des weiteren besteht die Möglichkeit Zellen zu definieren, die mehrere Spalten und/oder Zeilen überspannen. Hierbei kommen die Attribute colspan und rowspan von Tag td bzw. Tag th zum Einsatz.

Beispiel:

<table border="1">
  <tr>
    <td> Zeile 1 - Spalte 1 </td> <td> Zeile 1 - Spalte 2 </td>
    <td> Zeile 1 - Spalte 3 </td> <td> Zeile 1 - Spalte 4 </td>
  </tr>
  <tr>
    <td> Zeile 2 - Spalte 1 </td> <td colspan="2"> Zeile 2 - Spalte 2/3 </td>
    <td> Zeile 2 - Spalte 4 </td>
  </tr>
  <tr>
    <td> Zeile 3 - Spalte 1 </td> <td rowspan="2"> Zeile 3/4 - Spalte 2 </td>
    <td> Zeile 3 - Spalte 3 </td> <td> Zeile 3 - Spalte 4 </td>
  </tr>
  <tr>
    <td> Zeile 4 - Spalte 1 </td>
    <td> Zeile 4 - Spalte 3 </td> <td> Zeile 4 - Spalte 4 </td>
  </tr>
</table>

liefert

Rahmendicke

Mit Attributen des Tags table passen Sie die Tabelle Ihren Bedürfnissen an.

Zunächst kann die Rahmendicke eingestellt werden, indem sie als Parameter angegeben wird, etwa border="5".

Wird ein Rahmen aktiviert, so werden damit auch innere Trennlinien, die sog. Gitternetzlinien erzeugt.

Mit Hilfe des cellspacing-Attributes wird der Abstand der Zellen untereinander angegeben. Dies hat insbesondere den Effekt, dass die Dicke der der Gitternetzlinien angepasst wird.

Beispiel: "Eine einfache Tabelle mit Rahmen"

<table border="5" cellspacing="1">
  <tr>
    <td> Zeile 1 - Spalte 1 </td> <td> Zeile 1 - Spalte 2 </td>
  </tr>
  <tr>
    <td> Zeile 2 - Spalte 1 </td> <td> Zeile 2 - Spalte 2 </td>
  </tr>
</table>

liefert

Benutzerdefinierte Tabellengröße

Der Standard definiert die Festlegung der Breite durch das Attribut width, wobei die Angabe in Prozent zur verfügbaren Breite erfolgt. Eine Erweiterung besteht in der absoluten Angabe in Pixel, etwa width="250".

Darüber hinaus lässt sich die Höhe festlegen, wofür das Attribut height verwendet wird. Seine Anwendung entspricht der von width.

Ausgesprochen beliebt ist das Attribut width und hierbei insbesondere width="100%", wodurch eine Tabelle über die gesamte, zur Verfügung stehende Bildschirmbreite erzeugt wird.

Dies kann günstiger als absolute Werte sein, da sich die Tabellen nicht zuletzt den jeweiligen Einstellungen des zur Betrachtung benutzten Browsers, also wiederum den Vorlieben des Betrachters, anpassen.

Betrachten wir einige Beispiele:

Beispiel: "Eine dimensionierte Tabelle - I" Diesmal setzen wir einen dickeren Rahmen.

<table border="5">
  <tr>
    <td> Zeile 1 - Spalte 1 </td> <td> Zeile 1 - Spalte 2 </td>
  </tr>
  <tr>
    <td> Zeile 2 - Spalte 1 </td> <td> Zeile 2 - Spalte 2 </td>
  </tr>
</table>

liefert

Der Browser wird - wenn ihm wie hier die Wahl bleibt - beide Spalten gleich breit wählen. Dies muss nicht so sein:

Beispiel: "Eine dimensionierte Tabelle - II" mit einem dünnen Rahmen.

<table width="50%" border="1">
  <tr>
    <td> Zeile 1 </td> <td> Zeile 1 - Spalte 2 </td>
  </tr>
  <tr>
    <td> Zeile 2 </td> <td> Zeile 2 - Spalte 2 </td>
  </tr>
</table>

liefert

In jeder Zelle kann Beliebiges stehen, insbesondere auch beliebig langer Text. Bei undimensionierten Tabellen bleibt es dem Browser überlassen, ob er Tabellen über den darstellbaren Bereich dehnt. Der Benutzer muss dann scrollen. Bei dimensionierten Tabellen richtet sich der Browser nach Möglichkeit nach den Wünschen des Autors.

Dies ist jedoch nicht immer möglich, z.B. wenn Grafiken in den Zellen angezeigt werden. Gleiches gilt auch, wenn vorformatierter Text oder Formulare eingesetzt werden. Wir schließen die Ausführungen zu dimensionierten Tabellen mit einem Beispiel:

Beispiel: "Eine dimensionierte Tabelle - III" Diesmal lassen wir den Rahmen weg.

<table width="50%" border="0">
  <tr>
    <td> In jeder Zelle kann Beliebiges stehen, insbesondere auch beliebig langer
Text. Bei undimensionierten Tabellen bleibt es dem Browser &uuml;berlassen,
ob er Tabellen &uuml;ber den darstellbaren Bereich dehnt. Der Benutzer
hat dann aber die M&ouml;glichkeit, den Bildschirmausschnitt nach links und
rechts zu verschieben. </td>
<td> Bei dimensionierten Tabellen richtet sich
der Browser nach M&ouml;glichkeit nach den W&uuml;nschen des Autors.
</td>
  </tr>
</table>

liefert

Solche Tabellen ohne Rahmen werden als blind tables (auch: hidden tables) bezeichnet. Dieses einfache Beispiel zeigt beispielsweise, wie eine Art von zweispaltigem Text erzeugt werden kann. Bei geschicktem Einsatz lassen sich allein damit schon recht "hübsche" Effekte und Dokumente erzeugen.

Das eben betrachtete Beispiel liefert kein allzu tolles Ergebnis. Als störend fällt zumindest auf, dass

1. die Spalten nicht gleich breit sind,
2. die Spalten recht eng nebeneinander stehen,
3. der Text der beiden Spalten nicht auf selber Höhe beginnt.

Wir werden diese Mägel noch betrachten und jeweils eine kurze Erläuterung geben, warum der Browser so ungünstig darstellt. Diese Erläuterung ist nicht immer fundiert, d.h. sie beruht lediglich auf den Beobachtungen des Autors.

Es wird sich zeigen, dass diese Darstellung eine direkte Folge der Voreinstellungen für Tabellen ist und dass die gefundenen Begründungen nach Meinung des Autors einleuchtend sind. Wir werden dann besprechen, mit welchen Attributen wir das Ergebnis ansprechender gestalten können.

Warum also sind die Spalten nicht gleich breit? Dies liegt (wahrscheinlich) am dem default-Verhalten, dass der Browser bemüht ist, eine Tabelle so kompakt wie möglich darzustellen. D.h. die Breiten werden in gewissem Maße optimal gewählt, was i.a. sicher ein Vorteil ist. In der linken Spalte haben wir deutlich mehr Text, als in der rechten.

Der Browser wählt die Breiten in gewissen Grenzen aber so, dass die von den Texten benötigte Zeilenhöhe nahezu gleich ist. In unserem Fall folgt die Spaltenbreite der rechten Spalte wesentlich aus "dimensionierten", da HTML-Browser keine Silbentrennung durchführen (können).

D.h. die Breiten werden so gewählt, dass in etwa beide (oder allgemeiner) alle Spalten, nahezu die gleiche Anzahl von Zeilen haben.

Festlegung von Spaltenbreiten und Zeilenhöhen

Wir hatten gesehen, dass mit Hilfe der Attribute width und height des Tags table die Tabellenbreite- und -höhe festgelegt werden kann. Darüber hinaus lassen sich jedoch, und das mit verschiedenen Methoden, die einzelnen gewünschten Spaltenbreiten und Zeilenhöhen exakt wählen. Leider werten bei weitem nicht alle Browser dieses Attribute aus.

Sie können bei jeder Zeilen- oder Zellendefinition Breite und Höhe angeben. Beachten Sie, dass diese Definitionen mittels width und height zwar lokal gemacht werden, aber globale Auswirkungen haben.

Fordern Sie beispielsweise für irgendeine Zelle die Breite x und die Höhe y, so haben die Spalte bzw. die Zeile, in der sich die Zelle befindet, mindestens die Breite x bzw. die Höhe y. "Mindestens" heißt, dass jeweils die maximalen Werte gelten. Wir verdeutlichen dies an einigen Beispielen:

Wir geben der mittleren Zeile mit dem height-Attribut des tr-Tags eine Höhe von 100 Pixeln:

<table>
  <tr> ... </tr>
  <tr height="100"> ... </tr>
  <tr> ... </tr>
</table>

Hier hat die mittlere Zeile eine Höhe von 150 Pixel:

<table>
  <tr> ... </tr>
  <tr height="100"> ... <td height="150"> ... </td> ... </tr>
  <tr> ... </tr>
</table>

da eine td-Zelle mit Höhe 150 Pixel definiert wurde. Analog für Breiten: eine Spaltenbreitenfestlegung

<table>
  <tr> ... </tr>
  <tr> ... <td width="100"> ... </td> ... </tr>
  <tr> ... </tr>
</table>

kann durch eine andere sozusagen "überstimmt" werden

<table>
  <tr> ... </tr>
  <tr> ... <td width="100"> ... </td> ... </tr>
  <tr> ... </tr>
  ...
  <tr> ... <td width="150"> ... </td> ... </tr>
</table>

was hier zu einer Spaltenbreite von 150 Pixeln führt.

Beachten Sie, dass sich alle Zellen der Spalte oder Zeile an die schließlich durch den Browser gewählten Ausdehnungen halten. Auch hier gilt: sofern dies möglich ist. Sind z.B. Höhe und Breite so gesetzt, dass ein Zelleninhalt "beim besten Willen" nicht in diese Ausdehnung passen, so wird die Ausdehnung angepasst.

Unter Umstäden nützlich sind die parallele Verwendung von absoluten und prozentualen Angaben. Beachten Sie aber, dass diese für verschiedene Zellen gemacht werden müssen. Machen Sie die Angaben in ein und derselben Zelle, so wählt der Browser eine von diesen aus und ignoriert die andere.

<table>
  <tr> ... </tr>
  <tr> ... <td width="50"> ... </td> ... </tr>
  <tr> ... </tr>
  ...
  <tr> ... <td width="50%"> ... </td> ... </tr>
</table>

Hier nimmt die Spalte 50% der Gesamtbreite, mindestens aber 50 Pixel ein.

Beachten Sie, dass lokale Definitionen, d.h. Höhen- und Breitenangaben, sich stets auf die Gesamtbreite der Tabelle beziehen. Ist die Tabelle insgesamt zum Beispiel 50% der möglichen Gesamtausdehnung breit, so ist eine zum Beispiel wiederum 50% breite Zelle, 50% von 50%, also 25% der möglichen Gesamtausdehnung breit.

Erstes Zwischenergebnis:

Beispiel: "Eine dimensionierte Tabelle - IV" Festlegung der Spaltenbreite

<table width="50%" border="0">
  <tr>
    <td width="50%" bgcolor="#ffffee">In jeder Zelle kann Beliebiges stehen,
insbesondere auch beliebig langer Text. Bei undimensionierten Tabellen bleibt
es dem Browser &uuml;berlassen, ob er Tabellen &uuml;ber den darstellbaren
Bereich dehnt. Der Benutzer hat dann aber die M&ouml;glichkeit, den
Bildschirmausschnitt nach links und rechts zu verschieben. </td>
    <td bgcolor="#eeeeff"> Bei dimensionierten Tabellen richtet sich
der Browser nach M&ouml;glichkeit nach den W&uuml;nschen des Autors.
    </td>
  </tr>
</table>

liefert

Wenn das Ergebnis nicht wie erwartet ist, verarbeitet Ihr Browser das width-Attribut nicht.

Ansonsten nimmt die gesamte Tabelle die Hälfte der möglichen Breite ein. Beide Spalten wiederum nehmen etwa Hälfte dieser Tabellenbreite ein. Somit ist jede Spalte beträgt die Breite jeder Spalte etwa 25% der möglichen Breite ein. Zur Verdeutlichung wurden die Zellen farblich hinterlegt.

Zellenabstände

Es gibt zwei. Zum einen den Abstand der Zelle vom Rahmen (ob dieser nun dargestellt wird, ist natürlich egal). Und zum anderen den Abstand des Zelleninhaltes vom Zellenrand.

Stellen Sie sich eine HTML-Zelle einfach so vor: Die Zellen sind mit einer (unsichtbaren) Gitternetzlinie umrandet. Der erste Abstand, der cellspacing genannt wird, ist der Abstand zwischen dem border und der Gitternetzlinie. Der zweite Abstand, der cellpadding genannt wird, ist der Abstand zwischen Gitternetzlinie und Zelleninhalt.

<table border="2">
  <tr>
    <td> Zeile 1 - Spalte 1 </td> <td> Zeile 1 - Spalte 2 </td>
  </tr>
  <tr>
    <td> Zeile 2 - Spalte 1 </td> <td> Zeile 2 - Spalte 2 </td>
  </tr>
</table>

liefert

Setzen wir nun einen gewissen, zum Zwecke der Demonstration verhältnismäßig großen Abstand mit Attributen des table-Tags:

Beispiel: "Eine einfache Tabelle mit Rahmen und Zellenabstand"

<p>cellpadding="10", cellspacing="3":</p>

<table border="2" cellspacing="3" cellpadding="10">
  <tr>
    <td> Zeile 1 - Spalte 1 </td> <td> Zeile 1 - Spalte 2 </td>
  </tr>
  <tr>
    <td> Zeile 2 - Spalte 1 </td> <td> Zeile 2 - Spalte 2 </td>
  </tr>
</table>

<p>cellpadding="10", cellspacing="10":</p>

<table border="2" cellpadding="10" cellspacing="10">
  <tr>
    <td> Zeile 1 - Spalte 1 </td> <td> Zeile 1 - Spalte 2 </td>
  </tr>
  <tr>
    <td> Zeile 2 - Spalte 1 </td> <td> Zeile 2 - Spalte 2 </td>
  </tr>
</table>

<p>cellpadding="3", cellspacing="10":</p>

<table border="2" cellpadding="3" cellspacing="10">
  <tr>
    <td> Zeile 1 - Spalte 1 </td> <td> Zeile 1 - Spalte 2 </td>
  </tr>
  <tr>
    <td> Zeile 2 - Spalte 1 </td> <td> Zeile 2 - Spalte 2 </td>
  </tr>
</table>

liefert

Man sieht sofort den Unterschied und die Bedeutung der einzelnen Werte. Sie können hier die Gitternetzlinie sehen, da die Tabelle einen sichtbaren border hat.

Ein Nachteil bei dieser Vorgehensweise ist, dass dieser Abstand auf alle Zellen angewendet wird, insbesondere auch auf die der linken Spalte, so dass eine deutliche Einrückung gegenüber dem Fließtext auftritt, die vor allem dann auffällt, wenn wir mehrspaltigen Text simulieren wollen.

Man kann diesen Effekt im Moment noch nicht umgehen. Man kann in aber so verschleiern, dass er nicht mehr allzu stark auffällt.

Der Trick ist die Anwendung des center-Tag, den wir im Abschnitt Absatzausrichtung kennengelernt hatten, auf die gesamte Tabelle. Dadurch wird die gesamte Tabelle zentriert, was nicht weiter tragisch ist, da Tabellen sowieso stets eigene Absätze sind. Bei dieser Zentrierung kann man aber die zusätzliche Einrückung nicht mehr sehen.

Damit sind wir wieder einen ganzen Schritt weiter:

Beispiel: "Eine dimensionierte Tabelle - V" Festlegung des Zellabstandes

<div align="center">
  <table width="50%" border="0" cellpadding="10">
    <tr>
      <td width="50%"> In jeder Zelle kann Beliebiges stehen, insbesondere auch
beliebig langer Text. Bei undimensionierten Tabellen bleibt es dem Browser
&uuml;berlassen, ob er Tabellen &uuml;ber den darstellbaren Bereich dehnt. Der
Benutzer hat dann aber die M&ouml;glichkeit, den Bildschirmausschnitt nach links
und rechts zu verschieben.
      </td>
      <td> Bei dimensionierten Tabellen richtet sich der Browser nach
M&ouml;glichkeit nach den W&uuml;nschen des Autors.
      </td>
    </tr>
  </table>
</div>

liefert

Die Tabellen- bzw. Zellenbreiten müssen nicht angepasst werden.

Ausrichtung von Zelleninhalten

Einige Leser werden am Anfang der Ausführungen zu Tabellen (table) bei "Grundlagen" bemerkt haben, dass manche Zelleninhalte zentriert waren.

Das war kein Zufall.

Das Bestimmen von Ausrichtungen in horizontaler Richtung ist mit dem Attribut align, in vertikaler Richtung mit dem Attribut valign allgemein möglich.

Als zulässige Werte ergeben sich für

• horizontale Ausrichtung: left, right und center@, sowie justify.
  Wenn align nicht angegeben wird, so gilt in Überschriften (th) die Voreinstellung "zentriert", in normalen Zellen (td) die Voreinstellung "linksbündig". Von der Verwendung von justify rate ich ab. (Hinweis: Manche Browser akzeptieren halign mit analoger Semantik.)
• vertikale Ausrichtung: top und bottom.
  Beachten Sie, dass es kein center gibt. Wenn valign nicht angegeben wird, so gilt die Voreinstellung "zentriert".

Werden diese Attribute auf eine Zeile (tr) angewendet (z.B. <tr align=...>), so gilt die Einstellung für alle Zellen der Zeile, die ihrerseits keine anderen Einstellungen setzen. Richtet man mit diesem Attribut eine Zelle aus (z.B. <td align="...">), so hat diese Ausrichtung stets Vorrang. Für valign natürlich analog.

Beispiel: "Eine dimensionierte Tabelle - VI" Ausrichtung des Zelleninhaltes

<table border="1" width="100%">
  <tr valign="top">
    <td width="25%">!<br>!<br>!<br>!</td>
    <td align="left" width="25%">links</td>
    <td align="center" width="25%">Mitte</td>
    <td align="right" width="25%">rechts</td>
  </tr>
  <tr>
    <td>!<br>!<br>!<br>!</td>
    <td align="left">links</td>
    <td align="center">Mitte</td>
    <td align="right">rechts</td>
  </tr>
  <tr valign="bottom">
    <td>!<br>!<br>!<br>!</td>
    <td align="left">links</td>
    <td align="center">Mitte</td>
    <td align="right">rechts</td>
  </tr>
</table>

liefert

Die Spalte ganz links haben wir erzeugt, um den Zellen ohne Verwendung von height eine gewisse Höhe zu geben, damit wir die Funktion auch auf Browsern prüfen können, die das Attribut nicht unterstützen.

Damit haben wir alle unsere Mängel beseitigt:

Beispiel: "Eine dimensionierte Tabelle - VII" Festlegung des Zellenausrichtung.

<div align="center">
  <table width="50%" border="0" cellpadding="10">
    <tr valign="top">
      <td width="50%"> In jeder Zelle kann Beliebiges stehen, insbesondere auch
beliebig langer Text. Bei undimensionierten Tabellen bleibt es dem Browser
&uuml;berlassen, ob er Tabellen &uuml;ber den darstellbaren Bereich dehnt. Der
Benutzer hat dann aber die M&ouml;glichkeit, den Bildschirmausschnitt nach links
und rechts zu verschieben.
      </td>
      <td> Bei dimensionierten Tabellen richtet sich der Browser nach
M&ouml;glichkeit nach den W&uuml;nschen des Autors.
      </td>
    </tr>
  </table>
</div>

liefert

Farbe in Tabellen

Einige Browser ermöglichen Farben für Rahmen und Zellenhintergrund einzustellen. Während die Möglichkeit für den Hintergrund inzwischen sehr verbreited ist, ist die Kontrollierbarkeit der Rahmenfarbe von Tabellen (table) noch eher die Ausnahme.

Die Farbkodierung hatten wir im Anhang Farben von HTML für Einsteiger besprochen.

Rahmenfarbe

<table bordercolor="#rrggbb">

Farbe für steigenden Teil des Rahmen

<table bordercolorlight="#rrggbb">

Farbe für fallenden Teil des Rahmen

<table bordercolordark="#rrggbb">

Hintergrundfarbe tabellenweit

<table bgcolor="#rrggbb">

Hintergrundfarbe zeilenweit, überschreibt tabellenweite Farbe für diese Zeile

<tr bgcolor="#rrggbb">

Hintergrundfarbe zellenweit, überschreibt tabellenweite bzw. zeilenweite Farbe für diese Zelle

<td bgcolor="#rrggbb">

bzw.

<th bgcolor="#rrggbb">

Anstelle der Angabe als RGB können auch hier Farbnamen verwendet werden, wie in Farben in HTML beschrieben.

Beispiel: "Tabelle mit Farbe"

<table bgcolor="#ffffcc" border="1" cellspacing="0" cellpadding="5" width="75%" align="center">
  <tr>
    <td> Zeile 1 - Spalte 1 </td> <td> Zeile 1 - Spalte 2 </td>
  </tr>
  <tr bgcolor="#ffccff">
    <td> Zeile 2 - Spalte 1 </td> <td> Zeile 2 - Spalte 2 </td>
  </tr>
  <tr bgcolor="#ffccff">
    <td> Zeile 3 - Spalte 1 </td> <td bgcolor="#ccffff"> Zeile 3 - Spalte 2 </td>
  </tr>
  <tr>
    <td bgcolor="lightgreen"> Zeile 4 - Spalte 1 </td> <td> Zeile 4 - Spalte 2 </td>
  </tr>
</table>

liefert

Sie sehen die Hierarchie der Farbeinstellung.

• Die Tabelle wird im table auf einen gelben Hintergrund gestellt. Dieser gilt, wenn nicht überschrieben. Zum Beispiel in Zeile 1.
• Die Zeile 2 wird im tr auf lila gestellt.
• Zeile 3 auch, doch wirkt die Farbe nur in Spalte 1, weil dier Zelle in Spalte 2 im td selbst ein türkis bekommt.
• In Zeile 4 bekommt die erste Spalte einen hellgünen Hintergrund. In Spalte 2 wirkt das Gelb von table.

Hintergrundbilder in Tabellen

Browser können auch Tabellen mit Hintergrundbildern darstellen. Die Syntax entspricht der Festsetzung des Hintergrundbildes für das gesamte Dokument:

<table background="URL des Bildes">
...
</table>

Völlig analog zu den Farben kann ein Hintergrundbild auch an einer Zeile oder Zelle gesetzt werden und gilt dann entsprechend dort.