STARTSEITE | FEEDBACK

ARTIKEL

TUTORIALS

WEBSTUFF

SCRIPTS

NETLIFE

COMMUNITY

Tabellen gestalten leicht gemacht

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.

Wir betrachten in diesem Abschnitt, was der Standard zum Thema Tabellen sagt, und in den folgenden, welche gängigen Erweiterungen existieren. Beachten Sie bitte, dass diese Erweiterungen visueller Natur sind, die Verwendung bei Lesern mit diese Erweiterung nicht unterstützenden Browsern also lediglich eine weniger hübsche Darstellung, nicht jedoch Datenverlust bedeuten.

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

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 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 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, daß sie mit einem 3D-Effekt dargestellt werden, der sich nicht abschalten läßt, 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, daß 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äßt.

Beispiel: "Eine einfache Tabelle mit Rahmen"

<table border>
  <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 der im Beispiel border weg, so erhalten wir eine sog. blind table oder hidden table (weil man nicht notwendig sieht, daß es sich um eine Tabelle handelt).

Ausdehnung

Die Breite der Tabelle paßt 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 width="100%">
  ... (wie oben)
  </table>

liefert

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

Beispiel:

<table border width="50%">
... (wie oben)
</table>

liefert

und noch weniger

Beispiel:

  <table border width="25%">
  ... (wie oben)
  </table>

liefert

Wir sehen, daß 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 width="1%">
... (wie oben)
</table>

liefert

Ausrichtung

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

Mit dem align Attribut mit den möglichen Werte left, right und center kann die Tabelle anders ausgerichtet werden.

<table align=center">

Beachten Sie bitte, daß 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 bzw. div align=center.

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

oder

<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 zum Einsatz.

Beispiel:

<table border>
  <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

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, daß die Dicke der der Gitternetzlinien angepaßt 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äßt 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 width="100%" 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 muß 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 muß 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> (Text1 siehe Ausgabe) </td>
    <td> (Text2 siehe Ausgabe) </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, daß

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 immerfundiert, d.h. sie beruht lediglich auf den Beobachtungen des Autors. Es wird sich zeigen, daß diese Darstellung eine direkte Folge der Voreinstellungen für Tabellen ist und daß 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, daß 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, daß 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, daß in etwa beide (oder allgemeiner) alle Spalten, nahezu die gleiche Anzahl von Zeilen haben.

Festlegung von Spaltenbreiten und Zeilenhöhen

Wir hatten gesehen, daß mit Hilfe der Attribute width und height 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 diese Attribute aus.

Sie können bei jeder Zeilen- oder Zellendefinition Breite und Höhe angeben. Beachten Sie, daß diese Definitionen mittels width- und height-Attribut 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, daß jeweils die maximalen Werte gelten. Wir verdeutlichen dies an einigen Beispielen:

Wir geben der mittlere Zeile 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 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, daß 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, daß ein Zelleninhalt "beim besten Willen" nicht in diese Ausdehnung passen, so wird die Ausdehnung angepaßt.

Unter Umstäden nützlich sind die parallele Verwendung von absoluten und prozentualen Angaben. Beachten Sie aber, daß 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, daß 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%"> (Text1 siehe Ausgabe) </td>
    <td> (Text2 siehe Ausgabe) </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 am besten 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:

Beispiel: "Eine einfache Tabelle mit Rahmen und Zellenabstand"

cellpadding=10, cellspacing=3:

<table border=2 cellpadding=10 cellspacing=3>
  <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>

cellpadding=10, cellspacing=10:

<table border=2 cellspacing=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>

cellpadding=3, cellspacing=10:

<table border=2 cellspacing=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, daß dieser Abstand auf alle Zellen angewendet wird, insbesondere auch auf die der linken Spalte, so daß 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, daß 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%"> (Text1 siehe Ausgabe) </td>
      <td> (Text2 siehe Ausgabe) </td>
    </tr>
  </table>
</div>

liefert

Die Tabellen- bzw. Zellenbreiten müssen nicht angepaßt werden.

Ausrichtung von Zelleninhalten

Einige Leser werden am Anfang der Ausführungen zu Tabellen bei "Grundlagen" bemerkt haben, daß 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, daß es kein center gibt. Wenn valign nicht angegeben wird, so gilt die Voreinstellung "zentriert".

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

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

<table width="100%" border=1>
  <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.

<center>
  <table width="50%" border=0 cellpadding=10>
    <tr valign=top>
      <td width="50%"> (Text1 siehe Ausgabe) </td>
      <td> (Text2 siehe Ausgabe) </td>
    </tr>
  </table>
</center>

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 noch eher die Ausnahme.

<table bordercolor="#rrggbb">

Rahmenfarbe

<table bordercolorlight="#rrggbb"> bzw.
<table bordercolordark="#rrggbb">

Farbe für steigenden bzw. fallenden Teil des Rahmen

<table bgcolor="#rrggbb">

Hintergrundfarbe tabellenweit

<tr bgcolor="#rrggbb">

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

<td bgcolor="#rrggbb"> bzw.
<td bgcolor="#rrggbb">

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

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

Beispiel: "Tabelle mit Farbe"

<table border=1 cellspacing=0 bgcolor="#ffffcc">
  <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>
</table>

liefert

Die Farbkodierung hatten wir im Anhang Farben des HTML-Kurses besprochen.

Hintergrundbilder in Tabellen

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

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

Ein Bild kann auch eingeschränkt für eine Zelle oder Zeile gesetzt werden. In diesem Falle ist background bei <td> oder <tr> anzuwenden.

Damit beenden wir unsere Betrachtungen der Tabellen in HTML. Viel Erfolg bei der Verwendung von Tabellen wünscht Ihnen der Autor