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.
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ünchen</th> </tr> <tr> <td>Miljöh</td> <td>Kiez</td> <td>Bierdampf</td> </tr> <tr> <td>Buletten</td> <td>Frikadellen</td> <td>Fleischpflanzerl</td> </tr> </table> </body> </html>
Die folgende Grafik zeigt die Wirkungsweise der Attribute im einleitenden <table>
-Tag:
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".
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.
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ür den Auß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ünchen</td> </tr> <tr> <td>Miljöh</td> <td>Kiez</td> <td>Bierdampf</td> </tr> <tr> <td>Buletten</td> <td>Frikadellen</td> <td>Fleischpflanzerl</td> </tr> </table> </body> </html>
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.
Netscape 4.x und Konqueror interpretieren diese Angaben noch nicht.
Sie k�nnen Regeln aufstellen, welche Gitternetzlinien einer Tabelle angezeigt werden sollen und welche nicht.
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ü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ünchen</td> </tr> <tr> <td>Miljöh</td> <td>Kiez</td> <td>Bierdampf</td> </tr> <tr> <td>Buletten</td> <td>Frikadellen</td> <td>Fleischpflanzerl</td> </tr> </tbody> </table> </body> </html>
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 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).
Netscape 4.x, Konqueror und Safari interpretieren diese Angaben noch nicht.
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="..."> |
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
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="..."> |
![]() ![]() ![]() ![]() ![]() ![]() ![]() |
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="..."> |
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
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=> |
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
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.
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ö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ünchen</td> </tr> <tr> <td>Miljö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ünchen</td> </tr> <tr> <td>Miljöh</td> <td>Kiez</td> <td>Bierdampf</td> </tr> <tr> <td>Buletten</td> <td>Frikadellen</td> <td>Fleischpflanzerl</td> </tr> </table> </body> </html>
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.
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, Spalten vorzudefinieren. Die hier beschriebene M�glichkeit hat dagegen den Vorteil, auch von �lteren Browsern interpretiert zu werden.
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.
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ächte</h1> <table border="1"> <tr> <td nowrap> Die langen HTML-Nächte von Berlin sind die längsten Nächte überhaupt. Die langen CSS-Nächte von Berlin sind ebenfalls die längsten Nächte und sogar noch länger als die HTML-Nächte. </td> </tr> </table> </body> </html>
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 white-space. Diese wird jedoch erst ab Internet Explorer 5.5 und Netscape 6 interpretiert.
Wenn Sie XHTML-Standard-konform arbeiten, m�ssen Sie das nowrap
-Attribut in der Form nowrap="nowrap"
notieren.
Weitere Informationen dazu im Kapitel XHTML und HTML.
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.
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>
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 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.
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.
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ß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ß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>
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 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.
Wenn Sie eine Hintergrundfarbe definieren oder eine Hintergrundgrafik einbinden, sollten Sie f�r den Text eine geeignete Kontrastfarbe definieren.
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 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
.
Gerade bei Tabellen sind 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
CSS-Formate definieren kann. Anschlie�end sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Ma�geblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:
Tabellenformatierung
Schriftformatierung
Ausrichtung und Absatzkontrolle
Au�enrand und Abstand
Innenabstand
Rahmen
Hintergrundfarben und -bilder
Positionierung und Anzeige von Elementen
In der HTML-Referenz finden Sie Angaben dar�ber, welche der hier beschriebenen Attribute wo genau vorkommen k�nnen:
Attribut-Referenz f�r Tabellen (
<table>...</table>
)
Attribut-Referenz f�r Tabellenzeilen (
<tr>...</tr>
)
Attribut-Referenz f�r Kopfzellen (
<th>...</th>
)
Attribut-Referenz f�r Datenzellen (
<td>...</td>
)
Attribut-Referenz f�r Tabellenkopf (
<thead>...</thead>
)
Attribut-Referenz f�r Tabellenk�rper (
<tbody>...</tbody>
)
Attribut-Referenz f�r Tabellenfu� (
<tfoot>...</tfoot>
)
![]() | |
![]() |
![]() |
![]() |
![]() |
![]() ![]() ![]() |
© 2007 Impressum