SELFHTML

Gestaltung einer Tabelle

Informationsseite

nach unten Zellenabstand und Zelleninnenabstand
nach unten Regeln f�r den Au�enrahmen
nach unten Regeln f�r Gitternetzlinien
nach unten Breiten- und H�henangaben
nach unten Zeilenumbruch in Zellen verhindern
nach unten Ausrichtung von Zellen
nach unten Hintergrundfarben und Hintergrundbilder
nach unten Farben f�r Rand und Gitternetzlinien (Microsoft)
nach unten Tabellen mit CSS gestalten
nach unten Weitere Informationen

 nach unten 

HTML 3.2XHTML 1.0MS IE 2.0Netscape 1.1Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 Zellenabstand und Zelleninnenabstand

Sie k�nnen den Abstand zwischen den Zeilen und Spalten einer Tabelle in Pixeln bestimmen. Ferner k�nnen Sie den Abstand zwischen Zellenrand und Zelleninhalt bestimmen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zellenabstand und Zelleninnenabstand in Tabellen</title>
</head>
<body>

<h1>Weit auseinander</h1>

<table border="8" cellspacing="10" cellpadding="20">
  <tr>
    <th>Berlin</th>
    <th>Hamburg</th>
    <th>M&uuml;nchen</th>
  </tr>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

</body>
</html>

Erl�uterung:

Die folgende Grafik zeigt die Wirkungsweise der Attribute im einleitenden <table>-Tag:

cellspacing und cellpadding

Mit cellpadding bestimmen Sie den Innenabstand einer Zelle, also den Abstand zwischen Zellenrand und Zelleninhalt in Pixeln (cellpadding = Zelleninnenabstand). Mit cellspacing bestimmen Sie den Abstand der Zellen untereinander in Pixeln (cellspacing = Zellenabstand). Wenn Sie mit border einen sichtbaren Rahmen und sichtbare Gitternetzlinien in der Tabelle erzeugen, ist die Wirkungsweise von cellpadding und cellspacing besser nachvollziehbar. Bei blinden Tabellen erzeugen beide Attribute optisch gesehen einfach nur "Abstand".

nach obennach unten

HTML 4.0XHTML 1.0MS IE 4.0Netscape 6.0Opera 7.20Mozilla Firefox 1Safari WebKit (Entwicklerversion) Regeln f�r den Au�enrahmen

Wenn Sie mit border einen sichtbaren Tabellenrahmen erzeugen, erhalten automatisch alle Seiten einen Rahmen. Sie k�nnen aber auch genau bestimmen, welche Seiten eines Au�enrahmens angezeigt werden und welche nicht.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Regeln f&uuml;r den Au&szlig;enrahmen bei Tabellen</title>
</head>
<body>

<h1>Rahmenvereinbarung</h1>

<table border="3" frame="void">
  <tr>
    <td><b>Assoziation 1</b></td>
    <td><b>Assoziation 2</b></td>
    <td><b>Assoziation 3</b></td>
  </tr>
  <tr>
    <td>Berlin</td>
    <td>Hamburg</td>
    <td>M&uuml;nchen</td>
  </tr>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

</body>
</html>

Erl�uterung:

Voraussetzung f�r all diese Angaben ist das Attribut border im einleitenden <table>-Tag. Dadurch wird ein Au�enrahmen angezeigt.

Mit dem Attribut frame k�nnen Sie dann bestimmen, an welchen Seiten der Tabellenrahmen gezogen werden soll (frame = Rahmen).

Mit frame="box" (box = Rechteck) erreichen Sie, dass der Tabellenrahmen oben, links, rechts und unten sichtbar dargestellt wird (die Angabe ist identisch mit dem, was die Angabe border bewirkt - auch frame="border" ist erlaubt und bewirkt das Gleiche).
Folgende andere Angaben sind m�glich:
Mit frame="void" (void = nichts) wird �berhaupt kein Tabellenrahmen angezeigt. Wenn Sie border angeben, werden jedoch die Gitternetzlinien der Tabelle sichtbar angezeigt. Die Tabelle sieht dann also aus wie ein an allen Seiten offenes Gitter (das obige Beispiel benutzt diese Variante).
Mit frame="above" (above = oberhalb) wird nur am oberen Rand der Tabelle eine Rahmenlinie angezeigt.
Mit frame="below" (below = unterhalb) wird nur am unteren Rand der Tabelle eine Rahmenlinie angezeigt.
Mit frame="hsides" (hsides = horizontal sides = horizontale Seiten) wird nur am oberen und am unteren Rand der Tabelle eine Rahmenlinie angezeigt.
Mit frame="vsides" (vsides = vertical sides = vertikale Seiten) wird nur am linken und am rechten Rand der Tabelle eine Rahmenlinie angezeigt.
Mit frame="lhs" (lhs = left hand side = links) wird nur am linken Rand der Tabelle eine Rahmenlinie angezeigt.
Mit frame="rhs" (rhs = right hand side = rechts) wird nur am rechten Rand der Tabelle eine Rahmenlinie angezeigt.

Beachten Sie:

Netscape 4.x und Konqueror interpretieren diese Angaben noch nicht.

nach obennach unten

HTML 4.0XHTML 1.0MS IE 4.0Netscape 6.0Opera 7.20Mozilla Firefox 1 Regeln f�r Gitternetzlinien

Sie k�nnen Regeln aufstellen, welche Gitternetzlinien einer Tabelle angezeigt werden sollen und welche nicht.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Regeln f&uuml;r Gitternetzlinien bei Tabellen</title>
</head>
<body>

<h1>Gruppendynamik</h1>

<table border="1" rules="groups">
  <thead>
    <tr>
      <th>Assoziation 1</th>
      <th>Assoziation 2</th>
      <th>Assoziation 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td><i>betroffen:<br>4 Mio. Menschen</i></td>
      <td><i>betroffen:<br>2 Mio. Menschen</i></td>
      <td><i>betroffen:<br>1 Mio. Menschen</i></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>M&uuml;nchen</td>
    </tr>
    <tr>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr>
    <tr>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Erl�uterung:

Voraussetzung f�r all diese Angaben ist das Attribut border im einleitenden <table>-Tag. Dadurch werden Gitternetzlinien angezeigt.

Mit rules k�nnen Sie im einleitenden <table>-Tag Regeln f�r die Gitternetzlinien bestimmen (rules = Regeln).

Folgende Angaben sind dabei m�glich:
Mit rules="none" (none = keine) werden �berhaupt keine Linien gezogen, der Au�enrahmen der Tabelle wird jedoch angezeigt.
Mit rules="rows" (rows = Reihen) werden Linien zwischen allen Tabellenzeilen gezogen, nicht jedoch zwischen den Spalten der Tabelle.
Mit rules="cols" (cols = columns = Spalten) werden Linien zwischen allen Tabellenspalten gezogen, nicht jedoch zwischen den Zeilen der Tabelle.
Mit rules="groups" (groups = Gruppen) werden Linien zwischen Kopf, K�rper und Fu� einer Tabelle gezogen (siehe Seite Kopf, K�rper und Fu� einer Tabelle definieren - das obige Beispiel verwendet diese Angabe).
Mit rules="all" (all = alle) werden Linien zwischen allen Tabellenzellen gezogen (Voreinstellung).

Beachten Sie:

Netscape 4.x, Konqueror und Safari interpretieren diese Angaben noch nicht.

nach obennach unten

Breiten- und H�henangaben

Sie k�nnen f�r die gesamte Tabelle, sowie f�r einzelne Spalten und Zeilen geeignete Angaben zu Breite und H�he notieren. Dadurch schaffen Sie "Raum".

Breitenangaben werden durch das Attribut width notiert, H�henangaben durch das Attribut height (width = Breite, height = H�he). Bei allen Angaben sind absolute Zahlenangaben erlaubt, die Breite bzw. H�he als Anzahl Pixel bestimmen, sowie prozentuale Angaben, die am Ende ein Prozentzeichen (%) haben.

Die einzige von allen Angaben, die nach der HTML-Variante Strict erlaubt ist, ist die Gesamtbreite der Tabelle. Andere Angaben sind als deprecated gekennzeichnet und sollen k�nftig aus dem HTML-Standard entfallen. Solche Angaben sind auch mit Hilfe von Stylesheets m�glich. Und schlie�lich gibt es auch noch Angaben, die zwar von einigen Browsern interpretiert werden, aber nicht mal zum HTML-Standard in der Variante Transitional geh�ren. Die folgende Tabelle listet auf, welche Angaben m�glich sind, und welchen Status die Angabe in Bezug auf HTML-Standard und Browser-Kompatibilit�t hat.

Angabe (Notation) Status Bedeutung
<table width="..."> HTML 3.2XHTML 1.0MS IE 2.0Netscape 1.1Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0  Bestimmt die Breite der gesamten Tabelle in Bezug auf den verf�gbaren Raum im Elternelement. Das Elternelement kann das "Dokument" sein, also das body-Element, oder auch ein anderes Element, innerhalb dessen eine Tabelle vorkommen kann, z.B. ein div-Element oder eine Tabellenzelle einer �u�eren Tabelle.
<table height="..."> MS IE 2.0Netscape 1.1Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0  Bestimmt die H�he der gesamten Tabelle in Bezug auf das Anzeigefenster. Diese Angabe wird zwar von den Browsern schon lange unterst�tzt und wird in der Praxis h�ufig benutzt, geh�rte jedoch nie zum HTML-Standard.
<th width="..."> oder <td width="..."> HTML 3.2XHTML 1.0deprecated (missbilligt)MS IE 2.0Netscape 1.1Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0  Bestimmt die Breite einer Tabellenzelle und damit die Breite aller Zellen der gleichen Spalte. Als deprecated eingestuft. Ersetzbar durch CSS-Notationen wie <th style="width:100px">. Solche Angaben werden allerdings nur von neueren Browsern interpretiert.
<th height=> oder <td height=> HTML 3.2XHTML 1.0deprecated (missbilligt)MS IE 2.0Netscape 1.1Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0  Bestimmt die H�he einer Tabellenzelle und damit die H�he aller Zellen der gleichen Tabellenzeile. Als deprecated eingestuft. Ersetzbar durch CSS-Notationen wie <td style="height:100px">. Solche Angaben werden allerdings nur von neueren Browsern interpretiert.

Einige Browser interpretieren dar�ber hinaus weitere Angaben wie <tr height=>. Solche Angaben sind allesamt nicht HTML-Standard-konform und sollten nicht mehr verwendet werden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Breiten- und H&ouml;henangaben bei Tabellen</title>
</head>
<body>

<h1>Breit und hoch mit HTML</h1>

<table border="1" width="60%">
  <tr>
    <td width="50%" height="100">Berlin</td>
    <td>Hamburg</td>
    <td>M&uuml;nchen</td>
  </tr>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

<h1>Breit und hoch mit CSS</h1>

<table border="1" style="width:60%">
  <tr>
    <td style="width:50%; height:100px">Berlin</td>
    <td>Hamburg</td>
    <td>M&uuml;nchen</td>
  </tr>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

</body>
</html>

Erl�uterung:

Im Beispiel wird zweimal die gleiche Tabelle notiert - im ersten Fall kommen die HTML-Attribute width und height an erlaubten Stellen zum Einsatz - nach der HTML-Variante Transitional. Die zweite Tabelle benutzt entsprechende CSS-Eigenschaften zur Angabe von Breite und H�he und gen�gt damit auch den Anforderungen an die HTML-Variante Strict. Interpretiert wird die zweite Tabelle allerdings erst vom Internet Explorer ab Version 4.x und von Netscape ab Version 6.

Beachten Sie:

Die Angaben zu Breite und H�he sind nur wirksam, wenn der Tabellen- bzw. Zelleninhalt kleiner ist, sodass leerer Raum entsteht. Wenn der Tabelleninhalt gr��er ist, werden die Angaben zu Breite und H�he au�er Kraft gesetzt. Die Tabelle bzw. Zelle (und mit ihr Spalte und Zeile) werden dann so dimensioniert, dass der gesamte Inhalt angezeigt wird. Einige Browser - z.B. Netscape bis einschlie�lich Version 4.x - setzen Angaben zu Breite und H�he allerdings leider je nach Tabelleninhalt st�rker au�er Kraft als es n�tig w�re.

Da die Angabe zu width in einer Tabellenzelle spaltenweit gilt, brauchen Sie sie nur einmal pro Spalte zu notieren. Am sinnvollsten ist es, die Angabe in der ersten Zeile der Tabelle zu notieren. Ebenso ist es mit der Angabe zu height in einer Tabellenzelle. Da diese Angabe f�r die ganze zugeh�rige Tabellenzeile gilt, ist es am sinnvollsten, sie in der ersten Zelle der Zeile zu notieren. Im obigen Beispiel wird durch <td width="50%" height="100"> in der ersten Zelle also sowohl die Breite der ersten Spalte als auch die H�he der ersten Zeile definiert.

Verwenden Sie Pixelangaben und Prozentangaben immer so, dass keine Konflikte entstehen. Im obigen Beispiel werden etwa alle Breiten prozentual bestimmt, und nur die H�he wird mit Pixeln festgelegt. So kann der Browser im Beispiel f�r die gesamte Tabelle eine Breite von 60% Prozent zum Elternelement ermitteln und f�r die erste Spalte wiederum 50% davon. Die Angabe von 100 Pixeln Zeilenh�he kommt damit nicht in Konflikt.

Eine �bersichtlichere L�sung, die Breite von Tabellenspalten zu definieren, steht mit der M�glichkeit zur Verf�gung, Seite Spalten vorzudefinieren. Die hier beschriebene M�glichkeit hat dagegen den Vorteil, auch von �lteren Browsern interpretiert zu werden.

nach obennach unten

HTML 3.2XHTML 1.0deprecated (missbilligt)MS IE 3.0Netscape 1.1Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 Zeilenumbruch in Zellen verhindern

Sie k�nnen festlegen, dass beim Inhalt einer Zelle kein automatischer Zeilenumbruch erfolgen darf. Die Spalte der Tabelle wird bei der Anzeige entsprechend breit dimensioniert. Das entsprechende Attribut ist jedoch als deprecated eingestuft und soll k�nftig aus dem HTML-Standard entfallen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Zeilenumbruch in Tabellenzellen verhindern</title>
</head>
<body>

<h1>Lange N&auml;chte</h1>

<table border="1">
  <tr>
    <td nowrap>
    Die langen HTML-N&auml;chte von Berlin sind die l&auml;ngsten N&auml;chte &uuml;berhaupt.
    Die langen CSS-N&auml;chte von Berlin sind ebenfalls die l&auml;ngsten N&auml;chte und sogar
    noch l&auml;nger als die HTML-N&auml;chte.
    </td>
  </tr>
</table>

</body>
</html>

Erl�uterung:

Mit dem Attribut nowrap (ohne weitere Wertzuweisung) in einem einleitenden <th>- oder <td>-Tag verhindern Sie, dass der Text innerhalb der Zelle automatisch umbrochen wird. Die Zelle und damit ihre gesamte zugeh�rige Spalte wird so breit wie erforderlich.

Die entsprechende Eigenschaft in CSS lautet Seite white-space. Diese wird jedoch erst ab Internet Explorer 5.5 und Netscape 6 interpretiert.

Beachten Sie:

Wenn Sie XHTML-Standard-konform arbeiten, m�ssen Sie das nowrap-Attribut in der Form nowrap="nowrap" notieren.
Weitere Informationen dazu im Kapitel Kapitel XHTML und HTML.

nach obennach unten

HTML 3.2XHTML 1.0MS IE 2.0Netscape 1.1Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 Ausrichtung von Zellen

Zelleninhalte von Tabellen k�nnen aufgrund unterschiedlicher Inhalte oder durch Angaben zu Breite und H�he mehr Raum in Anspruch nehmen, als es ihr Inhalt erfordert. F�r diesen Fall k�nnen Sie Zelleninhalte sowohl horizontal (linksb�ndig, zentriert, rechtsb�ndig) als auch vertikal (obenb�ndig, mittig, untenb�ndig) am Zellenrand ausrichten. Die entsprechenden Angaben sind sowohl auf einzelne Zellen (also th- und td-Elemente) anwendbar, als auch auf Tabellenbereiche wie Tabellenzeilen (tr), Tabellenkopf (thead), Tabellenk�rper (tbody) und Tabellenfu� (tfoot). In diesem Fall gelten die Angaben f�r alle Zellen des jeweiligen Bereichs.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ausrichtung von Zelleninhalten</title>
</head>
<body>

<h1>Richtungsweisend</h1>

<table border="1">
  <tr>
    <th align="left"   valign="top" width="200" height="75">links oben</th>
    <th align="center" valign="top" width="200">zentriert oben</th>
    <th align="right"  valign="top" width="200">rechts oben</th>
  </tr>
  <tr>
    <td align="left"   valign="middle" height="75">links mittig</td>
    <td align="center" valign="middle">zentriert mittig</td>
    <td align="right"  valign="middle">rechts mittig </td>
  </tr>
  <tr>
    <td align="left"   valign="bottom" height="75">links unten</td>
    <td align="center" valign="bottom">zentriert unten</td>
    <td align="right"  valign="bottom">rechts unten</td>
  </tr>
  <tr align="center" valign="middle">
    <td height="75">alles ...</td>
    <td>... zentriert ...</td>
    <td>... mittig</td>
  </tr>
</table>

<h2>Auch am Dezimalzeichen?</h2>

<table border="1">
  <colgroup>
    <col>
    <col align="char" char=",">
  </colgroup>
  <tr>
    <th>Element</th>
    <th>Anteil in mg</th>
  </tr>
  <tr>
    <td>Nitrat</td>
    <td>0,117126</td>
  </tr>
  <tr>
    <td>Hydrogencarbonat</td>
    <td>330,0</td>
  </tr>
</table>

</body>
</html>

Erl�uterung:

Mit align="left" k�nnen Sie eine Kopfzelle in ihrem einleitenden <th>-Tag linksb�ndig ausrichten, mit align="right" rechtsb�ndig. Datenzellen k�nnen Sie in ihrem einleitenden <td>-Tag mit align="center" zentriert ausrichten und durch align="right" rechtsb�ndig. Die Angaben align="center" bei Kopfzellen und align="left" bei Datenzellen sind nat�rlich auch erlaubt, bewirken aber lediglich die Voreinstellung und sind deshalb nicht n�tig (align = Ausrichtung, left = links, center = zentriert, right = rechts). Diese Angaben k�nnen Sie auch in einleitenden <tr>-Tags, einleitenden <thead>-Tags, einleitenden <tbody>-Tags und <tfoot>-Tags notieren. Dann werden alle Zellen im entsprechenden Bereich so ausgerichtet wie angegeben. Widersprechende Angaben in einzelnen Zellen haben allerdings Vorrang vor bereichsweiten Angaben. Ab HTML 4.0 ist auch die Angabe align="justify" erlaubt. Dadurch erzwingen Sie einen Blocksatz innerhalb der Zelle.

Mit valign="top" k�nnen Sie eine Zelle in ihrem einleitenden Tag obenb�ndig ausrichten, durch die Angabe valign="bottom" untenb�ndig. Auch die Angabe valign="middle" (nicht "center"!) ist m�glich. Dies ist jedoch die Voreinstellung und deshalb nicht unbedingt n�tig (valign = vertical align = vertikale Ausrichtung, top = oben, bottom = unten, middle = mittig). Auch das valign-Attribut k�nnen Sie in einleitenden <tr>-Tags, einleitenden <thead>-Tags, einleitenden <tbody>-Tags und <tfoot>-Tags notieren. Ab HTML 4.0 ist auch die Angabe valign="baseline" erlaubt. Dann werden alle Zellen innerhalb einer Zeile, die diese Angaben erhalten, an einer gemeinsamen Basislinie ausgerichtet. Und zwar so, dass die erste Textzeile aller dieser Zellen immer auf gleicher H�he beginnt.

Ferner ist seit HTML 4.0 die Angabe align="char" in Verbindung mit den Attributen char und charoff erlaubt. Mit align="char" k�nnen Sie erzwingen, dass die Spalteninhalte an einem Dezimalzeichen ausgerichtet werden. Au�erdem ben�tigen Sie noch das Attribut char (char = character = Zeichen). Diesem weisen Sie als Wert ein Zeichen zu, das Sie als Dezimalzeichen verwenden. Die Ausrichtung erfolgt dann so, dass das Dezimalzeichen immer an der gleichen Stelle steht. Neben dem Attribut char zur Bestimmung des Dezimalzeichens k�nnen Sie zus�tzlich noch das Attribut charoff angeben (charoff = character offset = Zeichenposition). Damit k�nnen Sie angeben, an welcher Position das Zeichen fr�hestens vorkommen kann. Im obigen Beispiel wird ein Komma als Dezimalzeichen definiert. Die Werte der betreffenden - im Beispiel Seite vordefinierten Spalten - werden dann so ausgerichtet, dass das Dezimalzeichen immer an der gleichen Stelle steht. Die HTML-Spezifikation gibt jedoch an, dass die Unterst�tzung der Dezimalzeichenausrichtung durch Browser freiwillig ist. Und tats�chlich interpretiert auch keiner der weit verbreiteten Browser diese Angaben.

nach obennach unten

HTML 4.0XHTML 1.0MS IE 2.0Netscape 1.1Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 Hintergrundfarben und Hintergrundbilder

Sie k�nnen sowohl f�r eine gesamte Tabelle als auch f�r einzelne Zeilen oder Zellen eine Hintergrundfarbe definieren. Die verbreiteten Web-Browser unterst�tzen auch die Angabe von Hintergrundbildern mit Wallpaper-Effekt, doch diese Angaben geh�rten nie zum HTML-Standard. Auch die Angaben zur Hintergrundfarbe sind als deprecated gekennzeichnet und sollen k�nftig aus dem HTML-Standard entfallen. Sowohl das Definieren von Hintergrundfarben als auch das von Hintergrundbildern ist mit Stylesheets m�glich.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hintergrundfarben und Hintergrundbilder</title>
</head>
<body text="#000099">

<h1>Gro&szlig;e Worte mit HTML</h1>

<table border="1" bgcolor="#FFFF00">
  <tr>
    <td width="200" height="100"><h2>Traum</h2></td>
    <td width="200" bgcolor="#00FFFF"><h2>Zeit</h2></td>
    <td width="200"><h2>Luft</h2></td>
  </tr>
  <tr bgcolor="#FF00FF">
    <td height="100"><h2>Licht</h2></td>
    <td><h2>Himmel</h2></td>
    <td><h2>Leben</h2></td>
  </tr>
</table>

<h1>Gro&szlig;e Worte mit CSS</h1>

<table border="1" style="background-color:#FFFF00">
  <tr>
    <td width="200" height="100"><h2>Traum</h2></td>
    <td width="200" style="background-color:#00FFFF"><h2>Zeit</h2></td>
    <td width="200"><h2>Luft</h2></td>
  </tr>
  <tr style="background-color:#FF00FF">
    <td height="100"><h2>Licht</h2></td>
    <td><h2>Himmel</h2></td>
    <td style="background-image:url(background.jpg)"><h2>Leben</h2></td>
  </tr>
</table>

</body>
</html>

Erl�uterung:

Durch das Attribut bgcolor im einleitenden Tag der Tabelle k�nnen Sie eine Hintergrundfarbe f�r die gesamte Tabelle bestimmen (bgcolor = background-color = Hintergrundfarbe). Beim Angeben der Farbe gelten die Regeln zum Seite Definieren von Farben in HTML. Ebenso k�nnen Sie das Attribut bgcolor im einleitenden Tag einer Tabellenzeile (<tr>) notieren, um die Hintergrundfarbe f�r alle Zellen in dieser Zeile zu bestimmen. Wenn Sie bgcolor im einleitenden Tag einer Datenzelle (<td>) oder einer Kopfzelle (<th>) angeben, gilt die Hintergrundfarbe f�r diese eine Zelle. Im Konfliktfall hat die Farbangabe in einzelnen Zellen Vorrang vor der Angabe f�r ganze Zeilen oder Tabellen. Die Angabe f�r eine Zeile hat im Konfliktfall Vorrang vor der Angabe f�r die ganze Tabelle.

Das Gleiche ist mit dem Attribut background m�glich, um eine Hintergrundgrafik f�r die Tabelle oder einzelne Zellen einzubinden. Dieses Attribut ist jedoch im Zusammenhang mit Tabellen nicht HTML-Standard-konform und kommt im obigen Beispiel auch nicht vor. Die zweite im Beispiel notierte Tabelle zeigt, wie es HTML-Standard-konform gemacht wird. Dagegen spricht eigentlich nur noch die Existenz von Netscape 4.x, der keine CSS-Angaben bei Tabellen interpretiert.
Im obigen Beispiel wird angenommen, dass sich die Grafik background.jpg im gleichen Verzeichnis befindet. Sie k�nnen jedoch auch Grafiken aus anderen Verzeichnissen (z.B. /daten/grafik/hintergrund/background.gif oder ../gif/back.gif) oder von entfernten URIs (z.B. http://www.mein-anderer-server.de/grafik/back.jpg) angeben.

Beachten Sie:

Wenn Sie eine Hintergrundfarbe definieren oder eine Hintergrundgrafik einbinden, sollten Sie f�r den Text eine geeignete Kontrastfarbe definieren.

nach obennach unten

MS IE 3.0Netscape 4.0Mozilla Firefox 1Konqueror 3.1Safari 1.0 Farben f�r Rand und Gitternetzlinien (Microsoft)

Sie k�nnen auch f�r Rahmen und Gitternetzlinien Farbangaben machen. Diese Angaben sind jedoch Microsoft-Syntax und geh�ren nicht zum HTML-Standard. Benutzen Sie stattdessen nach unten CSS zur Gestaltung der Rahmen.

Durch das Attribut bordercolor im einleitenden <table>-Tag der Tabelle k�nnen Sie eine einheitliche Farbe f�r den Tabellenrahmen und die Gitternetzlinien bestimmen (bordercolor = Randfarbe).

Anstelle der einfachen Rahmenfarbe k�nnen Sie auch einen Schattier-Effekt in den Rahmen bringen, indem Sie zwei verschiedene Farben definieren - eine dunklere und eine hellere. Dazu notieren Sie im einleitenden Tag der Tabelle die beiden Attribute bordercolordark (bordercolordark = dunkle Randfarbe) und bordercolorlight (bordercolorlight = helle Randfarbe).

Netscape, Firefox, Konqueror und Safari interpretieren nur das Attribut bordercolor.

nach obennach unten

HTML 4.0XHTML 1.0MS IE 4.0Netscape 6.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 Tabellen mit CSS gestalten

Gerade bei Tabellen sind Kapitel Stylesheets eine gro�e Hilfe zur Gestaltung. Denn mit CSS k�nnen Sie alle Elemente einer Tabelle nach Wunsch formatieren - sei es einzeln oder gruppenweise. Dazu kommen ausgereifte CSS-Eigenschaften f�r Tabellenrahmen. Bei Verwendung von Stylesheets m�ssen Sie zun�chst wissen, wie man Kapitel CSS-Formate definieren kann. Anschlie�end sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Ma�geblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:
Seite Tabellenformatierung
Seite Schriftformatierung
Seite Ausrichtung und Absatzkontrolle
Seite Au�enrand und Abstand
Seite Innenabstand
Seite Rahmen
Seite Hintergrundfarben und -bilder
Seite Positionierung und Anzeige von Elementen

nach obennach unten

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben dar�ber, welche der hier beschriebenen Attribute wo genau vorkommen k�nnen:
Seite Attribut-Referenz f�r Tabellen (<table>...</table>)
Seite Attribut-Referenz f�r Tabellenzeilen (<tr>...</tr>)
Seite Attribut-Referenz f�r Kopfzellen (<th>...</th>)
Seite Attribut-Referenz f�r Datenzellen (<td>...</td>)
Seite Attribut-Referenz f�r Tabellenkopf (<thead>...</thead>)
Seite Attribut-Referenz f�r Tabellenk�rper (<tbody>...</tbody>)
Seite Attribut-Referenz f�r Tabellenfu� (<tfoot>...</tfoot>)

 nach oben
weiter Seite Zellen verbinden
zur�ck Seite Aufbau einer Tabelle
 

© 2007 Seite Impressum