Eine Bemerkung zur Definition von Tabellen
Die Ausrichtung von Tabellen und Zellen
Zellen, die sich über mehrere Zeilen oder Spalten erstrecken
Tabellen- und Spaltenbreiten definieren
Andere Eigenschaften von Tabellen
Tag 7
Kapitel 13 - Tabellen
Tabellen sind ein erweitertes HTML-Konstrukt, mit dem Sie Text, Abbildungen und anderen HTML-Inhalt in Reihen und Spalten mit oder ohne Umrandungen arrangieren können. Tabellen waren der erste Teil von HTML 3.2, der das Web betroffen hat, und sie hatten einen enormen Einfluß auf das Design und die Konstruktionsweise von Webseiten. In diesem Kapitel werden Sie alles über Tabellen lernen, unter anderem:
Eine Bemerkung zur Definition von Tabellen
Tabellen gehörten zu den ersten Erweiterungen zu HTML, die als Teil von HTML 3.2 vorgeschlagen wurden. Anfang 1995 verwirklichten sowohl Netscape als auch Mosaic fast gleichzeitig eine einfache Version von HTML-3.2-Tabellen in ihren Browsern (wobei Netscape noch ein paar Extra-Merkmale hinzufügte). Tabellen führten fast sofort zu einer Revolution im Webseiten-Design, da sie nicht nur dazu verwendet werden können, Daten in Tabellenform darzustellen, sonder auch zum Seitenlayout und zur Kontrolle über die Plazierung verschiedener HTML-Elemente auf einer Seite. Tabellen haben so eine Beliebtheit erlangt, daß sie inzwischen von den meisten wichtigen Browsern unterstützt werden.
Zum Zeitpunkt, zu dem Tabellen ursprünglich in Netscape und Mosaic verwirklicht wurden, war die tatsächliche Definition von Tabellen in HTML noch ein Gegenstand beträchtllicher Diskussion, wie der größte Teil der HTML-3.0-Spezifikation. Obwohl die Definition der grundlegenden Tabelle, wie ich sie in diesem Kapitel beschreiben werde, inzwischen so ziemlich abgeschlossen ist und die meisten Browser, die Tabellen unterstützen, sich an diese Definition halten, werden Tabellen immer noch vom WWW-Konsortium und anderen interessierten Parteien diskutiert und verfeinert. Die neue Tabellen-Spezifikation enthält viele neue Merkmale, die ursprünglich von Netscape Navigator 3 bzw. dem Internet Explorer 3 eingeführt wurden. Selbst jetzt, wo die HTML-3.2-Spezifikation für Tabellen abgeschlossen ist, treiben Netscape Navigator 4 und der Internet Explorer 4 die Entwicklung mit neuen Features für Tabellen voran.
Behalten Sie die Tatsache, daß Tabellen sich immer noch verändern, im Hinterkopf, wenn Sie Ihre eigenen gestalten; obwohl es unwahrscheinlich ist, daß sich Ihr jetziges Design in der Zukunft komplett verändern wird, werden wahrscheinlich doch kleinere Änderungen vorgenommen werden.
Einfache Tabellen gestalten
Lassen Sie uns nach dieser kleinen Warnung gleich loslegen. Um in HTML Tabellen zu konstruieren, definieren Sie die Teile der Tabelle und legen fest, welche HTML-Elemente wohin gehören, und dann umgeben Sie sie mit HTML-Tabellen-kodierung. Danach verfeinern Sie die Erscheinung der Tabelle mit Ausrichtungen, Umrandungen und farbigen Zellen. In diesem Abschnitt werden Sie lernen, wie Sie eine einfache Tabelle mit Überschriften, Daten und Titel erzeugen.
Noch eine Bemerkung. Es macht wirklich keinen Spaß, Tabellen in HTML von Hand zu erstellen. Der Code für Tabellen wurde daraufhin konzipiert, leicht durch Programme erstellt werden zu können, nicht zur Bearbeitung von Hand und ist deshalb ziemlich verwirrend. Sie werden eine ganze Menge experimentieren, testen und zwischen dem Browser und Ihrem Code hin- und hergehen müssen, um die Tabelle richtig hinzukriegen. HTML-Editoren können dabei gute Dienste leisten, genauso wie der Tabellen-Editor eines Textverarbeitungsprogramms oder einer Tabellenkalkulation ihnen eine gute Grundidee darüber liefern können, was wohin gehört. Ich schlage aber vor, daß Sie zumindest die ersten Tabellen auf die harte Tour erstellen, so daß Sie eine Idee bekommen, wie die HTML-Tabellen funktionieren.
Tabellenkomponenten
Bevor wir den HTML-Code zum Erzeugen von Tabellen betrachten, hier einige Definitionen, so daß Sie wissen, wovon ich rede:
Abbildung 13.1 zeigt eine typische Tabelle und ihre Komponenten.
Abbildung 13.1: |
Um in HTML eine Tabelle zu erzeugen, verwenden Sie die Tags <TABLE>...</TABLE>, die den Code für eine Überschrift und den Inhalt der Tabelle selbst enthalten.
<TABLE>
... Tabelleninhalt ...
</TABLE>
Das gebräuchlichste Attribute für das TABLE-Tag ist BORDER. In HTML 2.0 bewirkt BORDER, daß die Tabelle mit einem Rahmen gezeichnet wird. Dabei kann es sich um einen speziellen, verrückten Rahmen aus einem grafischen Browser handeln oder einfach nur um eine Folge von Gedankenstrichen und Pipe-Zeichen (|) in einem textbasierten Browser (wenn einem textbasierten Browser Tabellen hinzugefügt werden).
Beginnt man bei HTML 3.2 ist die korrekte Verwendung des BORDER-Attributs ein bißchen anders: Es definiert die Breite des Rahmens in Pixeln. BORDER=0 bewirkt, daß der Rahmen keine Breite hat und damit auch nicht angezeigt wird. BORDER=1 erzeugt hingegen einen Rahmen mit einem Pixel Breite, BORDER=2 einen mit zwei Pixeln Breite usw. Es ist vorgesehen, daß Browser keinen Rahmen anzeigen (wie bei BORDER=0), wenn Sie das BORDER-Attribut weglassen. Wenn Sie die alte HTML-2.0-Form verwenden, also BORDER ohne einen Wert angeben (wie in <TABLE BORDER>), dann sollten HTML-3.2-Browser einen ein Pixel breiten Rahmen anzeigen (wie bei BORDER=1).
Rahmenlose Tabellen sind insbesondere sinnvoll, wenn Sie die Tabellenstruktur für Layoutzwecke nutzen, aber nicht unbedingt eine richtige Tabelle auf der Seite darstellen wollen.
Zeilen und Zellen
Innerhalb der <TABLE>...</TABLE>-Tags definieren Sie den eigentlichen Tabelleninhalt. Tabellen werden in HTML zeilenweise spezifiziert, und jede Zeilendefinition enthält wiederum weitere Definitionen für die einzelnen Zellen in dieser Zeile. Um also eine Tabelle zu definieren, beginnen Sie bei der obersten Zeile, definieren dort die einzelnen Zellen, definieren eine zweite Zeile und ihre Zellen usw. Die Spalten werden automatisch berechnet, basierend darauf, wie viele Zellen in den einzelnen Zeilen enthalten sind.
Jede Tabellenzeile wird durch das <TR>-(Tag Table Row = Tabellenreihe) gekennzeichnet und endet mit dem entsprechenden </TR>. Jede Tabellenzeile hat wiederum eine Anzahl von Tabellenzellen, die durch <TH>...</TH> (für Table Header = Tabellenüberschrift) und <TD>...</TD> (für Table Data = Tabellendaten, die eigentlichen Tabellenzellen) angezeigt werden. Sie können beliebig viele Zeilen und innerhalb jeder Zeile beliebig viele Zellen definieren. Achten Sie jedoch darauf, daß jede Zeile dieselbe Anzahl Zellen verwendet, so daß die Spalten übereinstimmen.
|
In den frühen Spezifikationen für Tabellen waren die Abschluß-Kennungen </TR>, </TH> und </TD> für jede Zeile und Zelle erforderlich. Seither ist die Tabellendefinition dahingehend verfeinert worden, daß jedes dieser Abschluß-Tags optional ist. Gleichzeitig erwarten aber viele Browser doch noch diese Kennungen, so daß eine Tabelle auseinanderfallen kann, wenn Sie diese Abschluß-Kennungen nicht eingefügt haben. Bis die Tabellen konsequent quer durch die Browser-Landschaft verwirklicht werden, ist es sicherer, die optionalen Abschluß-Kennungen weiterhin einzusetzen. Da es immer noch korrekt ist diese zu verwenden, gibt es keinen zwingenden Grund diese wegzulassen. |
Hier ein einfaches Beispiel: eine Tabelle mit einer Zeile, vier Zellen und einer Überschriftsspalte auf der linke Seite:
<TABLE>
<TR>
<TH>Überschrift</TH>
<TD>Daten</TD>
<TD>Daten</TD>
<TD>Daten</TD>
</TR>
</TABLE>
Das <TH>-Tag gibt an, daß eine der Zellen die Tabellenüberschrift abgibt. Das <TD>-Tag stellt eine reguläre Zelle innerhalb der Tabelle dar (TD steht für Table Data). Überschriften werden in der Regel anders dargestellt als Tabellenzellen, etwa fett. Sowohl <TH> als auch <TD> sollten mit den entsprechenden Tags </TH> bzw. </TD> abgeschlossen werden.
Wenn eine Überschrift an der oberen Kante einer Tabelle stehen soll, werden die <TH>-Tags für diese Überschrift in die erste Zeile aufgenommen. Der HTML-Code für eine Tabelle mit einer Überschriftenzeile oben und einer Zeile Daten sieht wie folgt aus:
<P>A Table with Headings Across the Top</P>
<TABLE BORDER>
<TR>
<TH>Drive Plate</TH>
<TH>Front Cover</TH>
</TR>
<TR>
<TD>39-49</TD>
<TD>19-23</TD>
</TR>
</TABLE>
Wenn die Überschrift an der linken Kante der Tabelle stehen soll, nehmen Sie in die erste Zelle jeder Zeile <TH> auf, etwa so:
<P>A Table with Headings Along the Side </P>
<TABLE BORDER>
<TR>
<TH>Drive Plate</TH>
<TD>39-49</TD>
</TR>
<TR>
<TH>Front Cover</TH>
<TD>19-23</TD>
</TR>
</TABLE>
Abbildung 13.2 zeigt das Ergebnis dieser Tabellen.
Abbildung 13.2: |
Sowohl die Überschriften als auch die Daten können beliebigen Text oder HTML-Code oder beides enthalten, auch Verknüpfungen, Listen, Formulare oder andere Tabellen.
Im folgenden Beispiel sehen Sie eine einfache Tabelle. Abbildung 13.3 zeigt das Ergebnis in Netscape.
<HTML>
<HEAD>
<TITLE>Empty</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<CAPTION>Soup of the Day</CAPTION>
<TR>
<TH>Monday</TH>
<TH>Tuesday</TH>
<TH>Wednesday</TH>
<TH>Thursday</TH>
<TH>Friday</TH>
</TR>
<TR>
<TD>Split Pea</TD>
<TD>New England<BR>Clam Chowder</TD>
<TD>Minestrone</TD>
<TD>Cream of<BR>Broccoli</TD>
<TD>Chowder</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Abbildung 13.3: |
Leere Zellen
Was machen Sie, wenn Sie eine Zelle ohne Inhalt brauchen? Ganz einfach. Definieren Sie eine Zelle mit einem <TH>- oder einem <TD>-Tag ohne Inhalt.
<TR>
<TD></TD>
<TD>10</TD>
<TD>20</TD>
</TR>
Manchmal werden solche Zellen auch so dargestellt, als ob sie gar nicht existierten (siehe Abbildung 13.4).
Abbildung 13.4: |
Wenn Sie eine wirklich leere Zelle erzwingen wollen, fügen Sie innerhalb der Zeile ein Break ein, jedoch ohne irgendwelchen Text (siehe Abbildung 13.5).
<TR>
<TD><BR></TD>
<TD>10</TD>
<TD>20</TD>
</TR>
Abbildung 13.5: |
Das folgende Beispiel erzeugt ein Muster leerer Zellen (siehe Abbildung 13.6).
<HTML>
<HEAD>
<TITLE>Empty</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TH></TH><TH><BR></TH><TH></TH><TH></TH>
<TH><BR></TH><TH></TH><TH><BR></TH><TH></TH>
<TH></TH><TH><BR></TH><TH></TH><TH></TH>
<TH><BR></TH><TH></TH><TH><BR></TH><TH></TH>
</TR>
<TR>
<TH></TH><TH><BR></TH><TH></TH><TH></TH>
<TH><BR></TH><TH></TH><TH><BR></TH><TH></TH>
<TH></TH><TH><BR></TH><TH></TH><TH></TH>
<TH><BR></TH><TH></TH><TH><BR></TH><TH></TH>
</TR>
</TABLE>
</BODY>
</HTML>
Abbildung 13.6: |
Überschriften
Tabellenüberschriften erklären dem Leser den Inhalt der Tabelle. Sie könnten auch einen normalen Absatz oder eine Überschrift für Ihre Tabelle verwenden, aber es gibt ein <CAPTION>-Tag genau für diesen Zweck. Da das <CAPTION>-Tag Überschriften als solche kennzeichnet, könnten Werkzeuge zur Verarbeitung von HTML-Dateien sie in eine separate Datei extrahieren, sie automatisch numerieren oder auf irgendeine andere spezielle Weise behandeln, einfach nur, weil es sich um Überschriften handelt.
Aber was, wenn Sie keine Überschrift wollen? Sie müssen nicht unbedingt eine verwenden. Überschriften sind optional. Wenn Sie einfach nur eine Tabelle ohne Überschrift brauchen, dann lassen Sie die Überschrift einfach weg.
Das <CAPTION>-Tag geht direkt von den Tabellenzeilen in das <TABLE>-Tag ein und enthält den Tabellentitel. Es wird mit dem </CAPTION>-Tag abgeschlossen.
<TABLE>
<CAPTION>Gekoepfte Tulpen in Virginia, 1960-1980</CAPTION>
<TR>
Das optionale Attribut ALIGN legt die Ausrichtung der Überschrift fest. Abhängig davon, welchen Browser Sie benutzen, haben Sie jedoch unterschiedliche Bedeutungen für ALIGN.
In den meisten Browsern nimmt ALIGN einen von zwei Werten an: TOP (oben) oder BOTTOM (unten). Dies stellt die korrekte Verwendung des ALIGN-Attributs dar. Standardmäßig wird die Überschrift oben angezeigt (ALIGN=TOP). Sie können das Attribut ALIGN=BOTTOM auf die Überschrift anwenden, wenn Sie sie unten darstellen wollen, etwa folgendermaßen:
<TABLE>
<CAPTION ALIGN=BOTTOM>Drehmomentbegrenzungen verschiedener Obstsorten</CAPTION>
Beim Internet Explorer sind die Tabellenüberschriften jedoch anders. Dort benutzen Sie das Attribut VALIGN, um die Überschrift nach oben oder unten auszurichten, und ALIGN hat drei verschiedene Werte: LEFT, RIGHT und CENTER, mit denen die Überschrift horizontal ausgerichtet wird.
Um ähnliche Ergebnisse im Netscape Navigator zu erzielen verwenden Sie und anschließend das <DIV>-Tag mit dessen ALIGN-Attribut, um den Text der Überschrift linksbündig, rechtsbündig oder zentriert auszurichten. Dies funktioniert auch im Internet Explorer 4.
|
In der vorgeschlagenen HTML-4.0-Spezifikation verfügt das <CAPTION>-Tag über das ALIGN-Attribut, das einen der vier Werte: top, bottom, left oder right annehmen kann. Das VALIGN-Attribut, das von Microsoft verwendet wird, hat immer noch nicht Eingang in das offizielle HTML gefunden. |
Wenn Sie z.B. eine Überschrift am unteren Rand einer Tabelle im Internet Explorer plazieren wollen, die rechtsbündig ausgerichtet ist, können Sie folgenden Code verwenden:
<CAPTION VALIGN=BOTTOM ALIGN=RIGHT>This is a caption</CAPTION>
oder Sie verwenden das <DIV>-Tag, das auch im Netscape Navigator funktioniert:
<CAPTION ALIGN=BOTTOM><DIV ALIGN=RIGHT>This is a caption</DIV></CAPTION>
Wenn Sie nicht gerade eine sehr kurze Tabelle erzeugen, dann sollten Sie Ihre Überschrift in der Standardposition lassen - zentriert, am oberen Tabellenrand - so daß Ihre Leser sie zuerst sehen und wissen, worum es geht. Warten Sie also nicht, bis die Leser die gesamte Tabelle schon durchgesehen haben (obwohl sie dann meist ohnehin schon wissen, um was es geht).
Übung 13.1: Erzeugen Sie eine einfache Tabelle
Damit haben Sie die wichtigsten Dinge kennengelernt, um selbst Tabellen zu erzeugen. Hier wollen wir es an einem einfachen Beispiel versuchen. Wir erzeugen eine Tabelle, die angibt, welche Farbe Sie erhalten, wenn Sie die drei Primärfarben mischen.
Abbildung 13.7 zeigt die Tabelle, die wir in dieser Übung erzeugen wollen.
Abbildung 13.7: |
Hier noch ein kurzer Hinweis für Ihre Arbeit mit Tabellen: Da HTML eine Tabelle auf zeilenweiser Basis definiert, kann es manchmal schwierig sein, die Spalten im Auge zu behalten, insbesondere bei sehr komplexen Tabellen. Bevor Sie beginnen, HTML-Code zu schreiben, sollten Sie sich eine Skizze Ihrer Tabelle anlegen, wo Sie festlegen, welche Überschriften verwendet werden und welche Werte in den Zellen enthalten sein sollen. Möglicherweise ist es dabei am einfachsten, ein Textverarbeitungsprogramm mit einem Tabelleneditor (etwa Microsoft Word) oder eine Tabellenkalkulation zu Hilfe zu nehmen, um ein zufriedenstellendes Layout für Ihre Tabellen zu entwerfen. Wenn das Layout und die Zellenwerte feststehen, schreiben Sie den HTML-Code für diese Tabelle, oder konvertieren die erstellte Datei in HTML. Dafür bieten die meisten Standardprogramme inzwischen entsprechende Möglichkeiten an.
Wir beginnen mit einem einfachen HTML-Konstrukt für eine Seite mit einer Tabelle. So wie alle HTML-Dateien können Sie auch diese in einem beliebigen Texteditor erzeugen.
<HTML><HEAD>
<TITLE>Colors</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
...hier koennen Sie noch mehr Zeilen und Zellen einfuegen...
</TABLE>
</BODY></HTML>
Beachten Sie, daß das <TABLE>-Tag das Attribut BORDER hat. Damit wird die Tabelle mit einem hervorgehobenen Rahmen versehen.
Nun fügen wir Zeilen innerhalb der <TABLE>-Kennungen ein (wo sich oben die Zeile mit »hier koennen Sie noch mehr Zeilen und Zellen einfuegen« befindet).
Die erste Zeile enthält die drei Überschriften oben in der Tabelle. Die Tabellenzeile wird durch </TR>, die einzelnen Zellen werden durch jeweils ein <TH>-Tag gekennzeichnet.
<TR>
<TH>Red</TH>
<TH>Yellow</TH>
<TH>Blue</TH>
</TR>
|
Sie können den HTML-Code beliebig formatieren. Der Browser ignoriert die meisten zusätzlichen Leerzeichen und Zeilenschaltungen. Ich verwende gerne diese Formatierung, wobei der Inhalt der einzelnen Zeilen eingerückt ist und die Zellen-Tags auf separaten Zeilen dargestellt werden, so daß ich Zeilen und Spalten auf Anhieb erkennen kann. |
Jetzt fügen wir die zweite Zeile ein. Die erste Zelle in der zweiten Zeile ist die Überschrift Red auf der linken Seite der Tabelle, damit also die erste Zelle in dieser Zeile, gefolgt von den Zellen mit den Tabellendaten:
<TR>
<TH>Red</TH>
<TD>Red</TD>
<TD>Orange</TD>
<TD>Purple</TD>
</TR>
Nun fügen wir die beiden restlichen Zeilen in die Tabelle ein. Sie tragen die Überschriften Yellow und Blue. Damit haben Sie bisher die folgende Tabelle erzeugt:
<TABLE BORDER>
<CAPTION><B>Table 1.1:</B> Mixing Colors</CAPTION>
<TR>
<TH>Red</TH>
<TH>Yellow</TH>
<TH>Blue</TH>
</TR>
<TR>
<TH>Red</TH>
<TD>Red</TD>
<TD>Orange</TD>
<TD>Purple</TD>
</TR>
<TR>
<TH>Yellow</TH>
<TD>Orange</TD>
<TD>Yellow</TD>
<TD>Green</TD>
</TR>
<TR>
<TH>Blue</TH>
<TD>Purple</TD>
<TD>Green</TD>
<TD>Blue</TD>
</TR>
</TABLE>
Schließlich fügen wir noch einen einfachen Titel ein. Das <CAPTION>-Tag folgt direkt nach dem <TABLE>-Tag und kommt unmittelbar vor dem ersten <TR>-Tag:
<TABLE BORDER>
<CAPTION><B>Table 1.1:</B> Mixing Colors</CAPTION>
<TR>
Mit diesem ersten Codekonzept testen Sie Ihre HTML-Datei in Ihrem Browser, der Tabellen unterstützt. Abbildung 13.8 zeigt, wie das in Netscape aussieht.
Abbildung 13.8: |
Hoppla! Was ist mit der obersten Zeile passiert? Die Überschriften sind völlig durcheinandergeraten. Die Antwort lautet natürlich, daß Sie am Anfang der ersten Zeile eine leere Zelle benötigen, um die Überschriften korrekt über den entsprechenden Spalten auszurichten. HTML erledigt nicht alles automatisch für Sie (das ist genau der Fehler, dem Sie am Anfang beim Testen Ihrer Tabellen begegnen werden).
Nun fügen wir eine leere Zelle in die erste Zeile ein (in diesem Fall wird das die Zeile <TH><BR></TH>):
<TR>
<TH><BR></TH>
<TH>Red</TH>
<TH>Yellow</TH>
<TH>Blue</TH>
</TR>
|
Ich habe hier <TH> verwendet, aber Sie könnten genausogut <TD> angeben. Da in der Zelle kein Wert enthalten ist, spielt die Formatierung keine Rolle. |
Wenn Sie es jetzt noch einmal versuchen, erhalten Sie ein korrektes Ergebnis, und alle Überschriften sind über den entsprechenden Spalten angeordnet.
Die Ausrichtung von Tabellen und Zellen
Sobald Sie Ihre Basistabelle mit Zeilen, Überschriften und Daten haben, können Sie damit anfangen, ihre Erscheinung zu verfeinern. Die erste Methode, dies zu tun, besteht darin, zuerst die Tabelle auf der Seite auszurichten und dann ebenfalls den Inhalt der Zellen innerhalb der Tabelle.
Tabellenausrichtung
Standardtabellen werden auf ihrer eigenen Zeile zum linken Seitenrand hin ausgerichtet, wobei der übrige Text über oder unter der Tabelle dargestellt wird.
Wenn Sie jedoch das ALIGN-Attribut einsetzen, können Sie Tabellen zum linken oder rechten Seitenrand hin ausrichten oder auch Text genauso herumfließen lassen, wie Sie das schon bei Abbildungen getan haben. ALIGN=LEFT richtet die Tabelle zum linken Seitenrand hin aus, und der der Tabelle folgende Text wird in den Freiraum zwischen der Tabelle und dem rechten Seitenrand gepackt. ALIGN=RIGHT tut das gleiche, wobei die Tabelle zum rechten Seitenrand hin ausgerichtet wird. Abbildung 13.9 zeigt ein Beispiel einer Tabelle, um die Text herumfließt.
Abbildung 13.9: |
Wenn Sie das Herumfließen des Textes unterbrechen möchten, können Sie das so wie bei Abbildungen tun, indem Sie die Zeilenumbruch-Kennung (<BR>) mit dem CLEAR-Attribut einsetzen.
Das Zentrieren von Tabellen ist etwas schwieriger. Bis auf den kürzlich erschienenen Internet Explorer 4 und den Netscape Navigator 4 gibt es keinen Browser, der ALIGN=CENTER bei Tabellen unterstützt. Sie können jedoch die <CENTER>- oder <DIV ALIGN=CENTER>-Kennungen verwenden, um Tabellen auf der Seite zu zentrieren (Sie haben diese beiden Tags schon in Kapitel 5, »Noch mehr Text-formatieren mit HTML«, kennengelernt). Mit den jüngsten Versionen der beiden Browser wird <TABLE ALIGN=CENTER> korrekt unterstützt.
Zellenausrichtung
Wenn Sie die Zeilen und Zellen an Ort und Stelle und die Tabelle auch richtig auf der Seite ausgerichtet haben, richten Sie die Daten innerhalb der Zellen so aus, wie es dem Tabelleninhalt am besten entspricht. HTML-Tabellen bieten mehrere Optionen für die Ausrichtung von Zellen, sowohl horizontal als auch vertikal. Abbildung 13.10 zeigt eine Tabelle (eine echte HTML-Tabelle!) mit den verschiedenen Möglichkeiten der Ausrichtung.
Abbildung 13.10: |
Die horizontale Ausrichtung (das Attribut ALIGN) definiert, ob die Daten innerhalb einer Zelle linksbündig (LEFT), rechtsbündig (RIGHT) oder zentriert (CENTER) dargestellt werden.
Die vertikale Ausrichtung (das Attribut VALIGN) definiert die vertikale Datenausrichtung innerhalb der Zellen, d.h. ob die Daten oben in der Zelle (TOP), unten (BOTTOM) oder vertikal zentriert (MIDDLE) angeordnet sind. Netscape Navigator implementiert auch VALIGN=BASELINE, welches so ähnlich wie VALIGN=TOP ist, außer daß es die Grundlinie der ersten Textzeile ausrichtet (abhängig vom Zelleninhalt kann das möglicherweise ein anderes Ergebnis als ALIGN=TOP bringen).
Standardmäßig werden die Überschriftszellen sowohl horizontal als auch vertikal ausgerichtet, und die Datenzellen werden vertikal zentriert aber linksbündig angezeigt.
Sie können die Standardwerte für jeweils eine ganze Zeile durch die Angabe der Attribute ALIGN oder VALIGN im Tag <TR> überschreiben, wie etwa im folgenden Beispiel:
<TR ALIGN=CENTER VALIGN=TOP>
Die Zeilenausrichtung einzelner Zellen überschreiben Sie durch die Angabe von ALIGN in den Tags <TD> oder <TH>:
<TR ALIGN=CENTER VALIGN=TOP>
<TD>14</TD>
<TD>16</TD>
<TD ALIGN=LEFT>No Data</TD>
<TD>15</TD>
</TR>
Das folgende Beispiel zeigt die verschiedenen Zellenausrichtungen und ihre Darstellung in Netscape (Abbildung 13.11).
<HTML>
<HEAD>
<TITLE>Cell Alignments</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TH></TH>
<TH>Left</TH>
<TH>Centered</TH>
<TH>Right</TH>
</TR>
<TR>
<TH>Top</TH>
<TD ALIGN=LEFT VALIGN=TOP><IMG SRC="button.gif"></TD>
<TD ALIGN=CENTER VALIGN=TOP><IMG SRC="button.gif"></TD>
<TD ALIGN=RIGHT VALIGN=TOP><IMG SRC="button.gif"></TD>
</TR>
<TR>
<TH>Centered</TH>
<TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="button.gif"></TD>
<TD ALIGN=CENTER VALIGN=MIDDLE><IMG SRC="button.gif"></TD>
<TD ALIGN=RIGHT VALIGN=MIDDLE><IMG SRC="button.gif"></TD>
</TR>
<TR>
<TH>Bottom</TH>
<TD ALIGN=LEFT VALIGN=BOTTOM><IMG SRC="button.gif"></TD>
<TD ALIGN=CENTER VALIGN=BOTTOM><IMG SRC="button.gif"></TD>
<TD ALIGN=RIGHT VALIGN=BOTTOM><IMG SRC="button.gif"></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Abbildung 13.11: |
Übung 2.2: Ein Plan für Gemüsegärtner
Tabellen sind sehr praktisch, wenn Sie viele Informationen verwalten wollen - insbesondere technische oder numerische Informationen -, die Sie dem Leser so präsentieren wollen, daß er bestimmte Informationen schnell und einfach finden kann. Vielleicht ist er ja nur an einem Teil der Informationen interessiert. Die Darstellung in einem Absatz oder einer Liste kann es Ihren Lesern erschweren, das Gesuchte auf den ersten Blick zu finden.
Angenommen, Sie wollen die Information für den Gemüseanbau zusammenfassen, wobei die Pflanzzeit angegeben wird, die Zeit bis zur Ernte, ob die Pflanzen umgetopft werden können, sowie bestimmte Sorten, die besonders schnell wachsen. Diese Information können Sie auch als Liste oder in Absätzen für jede einzelne Gemüsesorte darstellen. Da die Daten jedoch in ganz bestimmte Kategorien eingeteilt werden können, ist die Darstellung in einer Tabelle am besten geeignet.
Abbildung 13.12 zeigt die Tabelle für den Gemüseanbau, die Sie in dieser Übung erzeugen sollen. So wie auch schon im letzten Beispiel handelt es sich hier um eine relativ einfache Tabelle, die jedoch Verknüpfungen, Bilder und Listen innerhalb der Tabellenzellen einsetzt. Darüber hinaus nutzt sie die Vorteile einiger der Ausrichtungsmöglichkeiten, die ich im letzten Abschnitt beschrieben habe. In diesem Beispiel beginnen wir mit einem grundlegenden HTML-Konstrukt, entwerfen Zeilen und Spalten und sorgen dann für die Feineinstellung in der Ausrichtung der Daten innerhalb dieser Zeilen. Wenn Sie erst einmal Erfahrung mit Tabellen gesammelt haben, werden Sie erkennen, daß das die beste Strategie zum Erstellen einer Tabelle darstellt. Es kann zu verwirrend sein, wenn Sie sich schon beim Erzeugen der Tabelle um ihre Ausrichtung kümmern.
Abbildung 13.12: |
Und hier das Gerüst für die Tabelle, inklusive Überschrift:
<HTML>
<HEAD>
<TITLE>Vegetable Planting Schedule</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<CAPTION>Vegetable Planting Schedule</CAPTION>
</TABLE>
</BODY>
</HTML>
Die erste Zeile, die wir hinzufügen werden, ist die Überschrift der oberen Tabelle. Es handelt sich dabei um eine Zeile mit fünf Überschriftszellen, und wir werden sie der Tabelle direkt unterhalb der <CAPTION>-Kennung hinzufügen:
<TR>
<TH>Vegetable</TH>
<TH>Planting Time</TH>
<TH>Transplants OK?</TH>
<TH>Days to Maturity</TH>
<TH>Varieties</TH>
</TR>
Die restlichen Zeilen enthalten die Tabellendaten. Beachten Sie, daß Sie innerhalb einer Tabellenzelle (einem <TH>- oder <TD>-Tag) jede beliebige HTML-Markierung angeben können, unter anderem auch Verknüpfungen, Bilder, Formulare oder andere Tabellen. In diesem Beispiel haben wir für die Gemüsenamen Verknüpfungen verwendet (die auf weitere Informationen zeigen), ein Bild von einem Häkchen oder einem X für die Möglichkeit, das Gemüse umzupflanzen, und eine unsortierte Liste für die Sorten. Hier der Code für die Überschriften und die ersten drei Tabellenzeilen:
<TABLE BORDER>
<CAPTION>Vegetable Planting Schedule</CAPTION>
<TR>
<TH>Vegetable</TH>
<TH>Planting Time</TH>
<TH>Transplants OK?</TH>
<TH>Days to Maturity</TH>
<TH>Varieties</TH>
</TR>
<TR>
<TD ><A HREF="tomato.html">Tomato</A></TD>
<TD>May-June</TD>
<TD><IMG SRC="check.gif"></TD>
<TD>55-90</TD>
<TD>Many; the most popular include:
<UL>
<LI>Early Girl
<LI>Beefmaster
<LI>Celebrity
<LI>Roma
</UL>
</TD>
</TR>
<TR>
<TD><A HREF="carrot.html">Carrot</A></TD>
<TD>Mar-May</TD>
<TD><IMG SRC="ex.gif"></TD>
<TD>60-80</TD>
<TD><UL>
<LI>Gold-Pak
<LI>Hybrid Sweetness
</UL>
</TD>
</TR>
<TR>
<TD><A HREF="lettuce.html">Lettuce</A></TD>
<TD>Mar-May, Aug-Sep</TD>
<TD><IMG SRC="check.gif"></TD>
<TD>45,60</TD>
<TD><UL>
<LI>Salad Bowl
<LI>Black-Seeded Simpson
</UL>
</TD>
</TR>
</TABLE>
In Netscape gibt es eine Ausnahme für die Regel, daß Leerzeichen im Original-HTML-Code die endgültige Ausgabe nicht beeinflussen. Angenommen, Sie haben Ihren Code für Bilder in Zellen mit Hilfe des <IMG>-Tag in einer separaten Zeile formatiert, etwa wie folgt:
<TD>
<IMG SRC="check.gif">
</TD>
In diesem Code ist die Zeilenschaltung zwischen <TD> und <IMG> ganz wesentlich. Ihr Bild wird in der Zelle nicht an der richtigen Stelle angezeigt (das erkennen Sie insbesondere in zentrierten Zellen). Diese Spitzfindigkeit des Netscape Browser bleibt auch in der aktuellsten Version des Netscape Communicator bestehen. Um dieses Problem zu beheben, geben Sie <TD> und <IMG> in derselben Zeile ein:
<TD><IMG SRC="check.gif"></TD>
Abbildung 13.13 zeigt, wie die Tabelle bisher aussieht.
|
Je nachdem, welche Ausmaße Ihr Bildschirm und Ihr Browser-Fenster haben, sieht Ihre Tabelle vielleicht etwas anders aus. Browser formatieren Tabellen zur Fensterbreite hin um, wie sie es auch mit anderen HTML-Elementen tun. Sie werden mehr über die Festlegung der Tabellenbreite später in diesem Kapitel, »Die Breite von Tabellen und Spalten festlegen«, erfahren. |
Abbildung 13.13: |
So weit, so gut. Die Spalten würden jedoch zentriert besser aussehen. Das können wir global realisieren, indem wir jedem <TR>-Tag das Attribut ALIGN=CENTER hinzufügen. (Beachten Sie, daß das nur für die Datenzeilen erforderlich ist. Die Überschriften sind bereits zentriert.)
<TR ALIGN=CENTER>
<TD ><A HREF="tomato.html">Tomato</A></TD>
<TD>May-June</TD>
....
Abbildung 13.14 zeigt die neue Tabelle, wobei die Zellinhalte jetzt zentriert dargestellt sind.
Abbildung 13.14: |
Damit sieht die Tabelle schon sehr viel besser aus, bis auf die Aufzählungszeichen in der Spalte mit den Gemüsesorten (Varieties). Sie wurden ebenfalls zentriert, deshalb sind sie nicht mehr untereinander ausgerichtet. Das ist aber nicht so schlimm. Wir fügen einfach dem <TD>-Tag in jeder Zeile das Attribut ALIGN=LEFT mit folgendem Code hinzu (siehe Abbildung 13.15).
<TD ALIGN=LEFT>Many; the most popular include:
<UL>
<LI>Early Girl
...
Abbildung 13.15: |
|
Sie hätten auch die Standardausrichtung für die einzelnen Zeilen beibehalten und dann jeder der zu zentrierenden Zellen das Attribut ALIGN=CENTER hinzufügen können. Das wäre jedoch mit sehr viel mehr Aufwand verbunden gewesen. Normalerweise ist es einfacher, als Standard-Zeilenausrichtung die in der Tabelle am häufigsten verwendete Ausrichtung zu benutzen, und dann für einzelne Zellen diese Einstellung zu ändern. |
Damit kommen wir dem Ganzen schon näher, aber wir wollen noch etwas ausprobieren. Bis jetzt sind alle Zellen vertikal zentriert. Wir fügen nun jeder Datenzeile das Attribut VALIGN=TOP hinzu (neben ALIGN=CENTER), so daß sie oben in den Zellen angeordnet werden.
<TR ALIGN=CENTER VALIGN=TOP>
<TD ><A HREF="tomato.html">Tomato</A></TD>
<TD>May-June</TD>
Das war alles! Hier der endgültige HTML-Text für das Beispiel:
<HTML>
<HEAD>
<TITLE>Vegetable Planting Schedule</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<CAPTION>Vegetable Planting Schedule</CAPTION>
<TR ALIGN=CENTER>
<TH>Vegetable</TH>
<TH>Planting Time</TH>
<TH>Transplants OK?</TH>
<TH>Days to Maturity</TH>
<TH>Varieties</TH>
</TR>
<TR ALIGN=CENTER VALIGN=TOP>
<TD ><A HREF="tomato.html">Tomato</A></TD>
<TD>May-June</TD>
<TD><IMG SRC="check.gif"></TD>
<TD>55-90</TD>
<TD ALIGN=LEFT>Many; the most popular include:<UL>
<LI>Early Girl
<LI>Beefmaster
<LI>Celebrity
<LI>Roma
</UL>
</TD>
</TR>
<TR ALIGN=CENTER VALIGN=TOP>
<TD><A HREF="carrot.html">Carrot</A></TD>
<TD>Mar-May</TD>
<TD><IMG SRC="ex.gif"></TD>
<TD>60-80</TD>
<TD ALIGN=LEFT><UL>
<LI>Gold-Pak
<LI>Hybrid Sweetness
</UL>
</TD>
</TR>
<TR ALIGN=CENTER VALIGN=TOP>
<TD><A HREF="lettuce.html">Lettuce</A></TD>
<TD>Mar-May, Aug-Sep</TD>
<TD><IMG SRC="check.gif"></TD>
<TD>45,60</TD>
<TD ALIGN=LEFT>
<UL>
<LI>Salad Bowl
<LI>Black-Seeded Simpson
</UL>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Zellen, die sich über mehrere Zeilen oder Spalten erstrecken
Die Tabellen, die wir bisher erzeugt haben, zeigten alle einen Wert pro Zelle an und enthielten zum Teil auch leere Zellen. Sie können jedoch auch Zellen erzeugen, die sich über mehrere Zeilen oder Spalten in der Tabelle erstrecken. Diese Zellen können Überschriften enthalten, die Unterüberschriften in der nächsten Zeile oder Spalte anzeigen. Sie können auf diese Weise aber z.B. auch spezielle Effekte innerhalb des Tabellenlayouts erzeugen. Abbildung 13.16 zeigt eine Tabelle mit Beispielen für Zellen, die sich über mehrere Spalten und Zeilen erstrecken.
Abbildung 13.16: |
Um eine Zelle zu erzeugen, die sich über mehrere Zeilen oder Spalten erstreckt, fügen Sie den Tags <TH> oder <TD> die Attribute ROWSPAN oder COLSPAN hinzu, zusammen mit der entsprechenden Anzahl der Zeilen oder Spalten. Die Daten innerhalb dieser Zellen werden dann über die gesamte Breite oder Länge der kombinierten Zellen angezeigt, wie im folgenden Beispiel gezeigt:
<TR>
<TH COLSPAN=2>Gender
</TR>
<TR>
<TH>Male</TH>
<TH>Female</TH>
</TR>
<TR>
<TD>15</TD>
<TD>23</TD>
</TR>
Abbildung 13.17 zeigt, wie diese Tabelle aussehen könnte.
Abbildung 13.17: |
Beachten Sie, daß Sie die Zelle in den nächsten Zeilen nicht erneut als leer definieren müssen, wenn sie sich über mehrere Zeilen erstreckt. Ignorieren Sie das einfach, und gehen Sie weiter zur nächsten Zelle in der Zeile. Die Anordnung wird automatisch angepaßt.
Zellen erstrecken sich immer nach unten und nach rechts. Um also eine Zelle über mehrere Spalten zu erzeugen, fügen Sie der Zelle ganz links das Attribut COLSPAN hinzu, und für Zeilen, die sich über Zeilen erstrecken, das Attribut ROWSPAN zur obersten Zelle.
Das folgende Beispiel für Ein- und Ausgaben zeigt eine Zelle, die sich über mehrere Zeilen erstreckt (die Zelle mit dem Wort »Piston«). Abbildung 13.18 zeigt das Ergebnis in Netscape.
<HTML>
<HEAD>
<TITLE>Ring Clearance</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TH COLSPAN=2></TH>
<TH>Ring<BR>Clearance</TH>
</TR>
<TR ALIGN=CENTER>
<TH ROWSPAN=2>Piston</TH>
<TH>Upper</TH>
<TD>3mm</TD>
</TR>
<TR ALIGN=CENTER>
<TH>Lower</TH>
<TD>3.2mm</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Abbildung 13.18: |
Übung 2.3: Eine Tabelle mit Kundendienst-Spezifikationen
Haben Sie schon genug von Tabellen? Wir wollen noch ein letztes Beispiel betrachten, das alle Features anwendet, die Sie bisher kennengelernt haben: Tabellen mit Überschriften und normalen Zellen, Ausrichtungen und Zellen, die sich über mehrere Zeilen oder Spalten erstrecken. Dabei handelt es sich um eine sehr komplexe Tabelle, deshalb werden wir schrittweise erklären, wie sie erzeugt wird.
Abbildung 13.19 zeigt eine Tabelle, die Kundendienst- und Reparatur-Spezifikationen aus dem Service-Handbuch für ein Auto darstellt.
Abbildung 13.19: |
Diese Tabelle enthält fünf Zeilen und Spalten. Können Sie sie erkennen? Einige Zellen erstrecken sich über mehrere Zeilen und Spalten. Abbildung 13.20 zeigt dieselbe Tabelle, dargestellt in einem Raster, so daß Sie die Zeilen und Spalten besser erkennen.
Abbildung 13.20: |
Bei solchen Tabellen ist es sinnvoll, ein Raster anzuzeigen, um sich besser vorstellen zu können, welche Zellen sich über mehrere Spalten und Zeilen erstrecken und in welche Zeile sie ursprünglich gehören. Sie wissen ja, die Zellen erstrecken sich von oben nach unten und von links nach rechts.
Fertig? Wir wollen mit dem Gerüst für das Programm beginnen, wie Sie es aus diesem Kapitel bereits kennen:
<HTML>
<HEAD>
<TITLE>Service Data</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<CAPTION>Drive Belt Deflection</CAPTION>
</TABLE>
</BODY>
</HTML>
Jetzt erzeugen Sie die erste Zeile. Anhand des Rasters erkennen Sie, daß die erste Zelle leer ist und sich über zwei Zeilen und zwei Spalten erstreckt (siehe Abbildung 13.21). Der HTML-Code für diese Zelle würde damit folgendermaßen aussehen:
<TR>
<TH ROWSPAN=2 COLSPAN=2></TH>
Abbildung 13.21: |
Die zweite Zelle in dieser Zeile ist die Überschrift Used Belt Deflection, die sich über zwei Spalten erstreckt (für die beiden Zellen, die darunter angezeigt werden). Der Code für diese Zelle sieht also wie folgt aus:
<TH COLSPAN=2>Used Belt Deflection</TH>
Damit haben Sie zwei Zellen, die sich über je zwei Spalten erstrecken, und in dieser Zeile ist nur noch eine Spalte übrig. Diese jedoch erstreckt sich in die darunterliegende Zeile:
<TH ROWSPAN=2>Set deflection of new belt</TH>
</TR>
Jetzt gehen wir weiter zur zweiten Zeile. Das ist aber nicht diejenige, die mit der Überschrift Alternator beginnt. Beachten Sie, daß die erste Zelle in der ersten Zeile die Attribute ROWSPAN und COLSPAN mit einem Wert von 2 verwendet. Das bedeutet, daß sie in dieser zweiten Zeile fortgesetzt wird und zwei Zellen aufnimmt. Für diese Zeile muß also keine Neudefinition erfolgen. Gehen Sie einfach weiter zur nächsten Zelle im Raster. Die erste Zelle in dieser Zeile trägt die Überschrift Limit, die zweite Zelle Adjust Deflection.
<TR>
<TH>Limit</TH>
<TH>Adjust Deflection</TH>
</TR>
Aber was ist mit der letzten Zelle? So wie die erste Zelle hatte die Zelle in der darüberliegenden Zeile den ROWSPAN-Wert zwei und nimmt jetzt den Platz in dieser Zeile ein. Die einzigen Werte, die Sie für diese Zeile benötigen, sind also bereits definiert.
Haben Sie mir folgen können? Sie sollten jetzt einfach alles mit Ihrem Browser ausprobieren, um sicherzustellen, daß alles einwandfrei funktioniert. Es wird ein bißchen witzig aussehen, weil wir in die linke Seite der Tabelle noch nichts eingegeben haben. Sie sollten es jedoch versuchen. Abbildung 13.22 zeigt, was wir bisher geschafft haben.
Abbildung 13.22: |
Nächste Zeile! Sehen Sie gegebenenfalls noch einmal im Raster nach. Hier trägt die erste Zelle die Überschrift Alternator, und sie erstreckt sich auf diese und die darunterliegende Zeile. Wird es Ihnen jetzt zuviel?
<TR>
<TH ROWSPAN=2>Alternator</TD>
Die nächsten drei Zeilen sind relativ einfach, weil sie nicht in irgendwelchen Zeilen oder Spalten fortgesetzt werden. Hier ihre Definitionen:
<TD>Models without AC</TD>
<TD>10mm</TD>
<TD>5-7mm</TD>
Die letzte Zeile sieht wie die erste aus:
<TD ROWSPAN=2>5-7mm</TD>
</TR>
Damit sind wir in Zeile vier. Aufgrund der ROWSPAN aus der vorherigen Zeile müssen hier nur drei Zellen definiert werden: die Zelle für Modelle mit AC (Klimaanlage) und zwei Zellen für die Nummern:
<TR>
<TD>Models with AC</TD>
<TD>12mm</TD>
<TD>6-8mm</TD>
</TR>
|
In dieser Tabelle habe ich die Alternator-Zelle zur Überschrift gemacht, die AC-Zellen enthalten einfach Daten. Das war nur eine ästhetische Entscheidung meinerseits. Ich hätte auch einfach drei Überschriften verwenden können. |
Jetzt zur letzten Zeile - das sollte Ihnen nicht schwerfallen. Die erste Zelle (Power Steering Oil Pump) erstreckt sich über zwei Spalten (Alternator und With/With-out AC). Die übrigen drei bestehen aus nur jeweils einer Zelle.
<TR>
<TH COLSPAN=2>Power Steering Oil Pump</TD>
<TD>12.5mm</TD>
<TD>7.9mm</TD>
<TD>6-8mm</TD>
</TR>
Das ist alles! Damit haben Sie alle Zeilen und Spalten entworfen. Das war das schwierigste. Beim Rest handelt es sich nur noch um die Feinarbeiten. Jetzt probieren wir das Ganze aus, um sicherzustellen, daß sich nicht irgendwelche Fehler eingeschlichen haben (siehe Abbildung 13.23).
Abbildung 13.23: |
Damit haben Sie alle Zeilen und Spalten entworfen und können nun innerhalb der Zellen die Ausrichtungen anpassen. Zumindest die Zahlen sollten zentriert dargestellt werden. Da sie einen Großteil der Tabelle einnehmen, wollen wir die Zentrierung für alle Zeilen zum Standard machen:
<TR ALIGN=CENTER>
Die Beschriftungen links (Alternator, Models With/Without AC und Power Steer-ing Oil Pump) sehen etwas seltsam aus, wenn sie zentriert dargestellt werden. Jetzt sollen sie linksbündig ausgerichtet werden:
<TH ROWSPAN=2 ALIGN=LEFT>Alternator</TD>
<TD ALIGN=LEFT>Models without AC</TD>
<TD ALIGN=LEFT>Models with AC</TD>
<TH COLSPAN=2 ALIGN=LEFT>Power Steering Oil Pump</TD>
Zum Abschluß habe ich in die längeren Überschriften Zeilenumbrüche eingefügt, so daß die Spalten etwas näher beieinander angezeigt werden. Da der Text in den Überschriften relativ kurz ist, mußte ich mir nicht viele Gedanken darüber machen, wie die Spalten aussehen, wenn der Text zu nahe aneinanderrückt. Hier die veränderten Zeilen:
<TH ROWSPAN=2>Set<BR>deflection<BR>of new belt</TH>
<TH>Adjust<BR>Deflection</TH>
Voilà - hier die endgültige Tabelle, und alles steht an seinem richtigen Platz! Abbildung 13.24 zeigt das Endergebnis.
Abbildung 13.24: |
|
Wenn Sie ein bißchen Zeit haben, sollten Sie Ihre Textverarbeitung aufrufen und es selbst einmal ausprobieren, Schritt für Schritt. Danach wird alles einfacher. |
Hier der vollständige Text für das Tabellenbeispiel:
<HTML>
<HEAD>
<TITLE>Service Data</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<CAPTION>Drive Belt Deflection</CAPTION>
<TR>
<TH ROWSPAN=2 COLSPAN=2></TH>
<TH COLSPAN=2>Used Belt Deflection</TH>
<TH ROWSPAN=2>Set<BR>deflection<BR>of new belt</TH>
</TR>
<TR>
<TH>Limit</TH>
<TH>Adjust<BR>Deflection</TH>
</TR>
<TR ALIGN=CENTER>
<TH ROWSPAN=2 ALIGN=LEFT>Alternator</TD>
<TD ALIGN=LEFT>Models without AC</TD>
<TD>10mm</TD>
<TD>5-7mm</TD>
<TD ROWSPAN=2>5-7mm</TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT>Models with AC</TD>
<TD>12mm</TD>
<TD>6-8mm</TD>
</TR>
<TR ALIGN=CENTER>
<TH COLSPAN=2 ALIGN=LEFT>Power Steering Oil Pump</TD>
<TD>12.5mm</TD>
<TD>7.9mm</TD>
<TD>6-8mm</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Tabellen- und Spaltenbreiten definieren
Alle Tabellen, die wir bis jetzt erstellt haben, haben sich auf den Browser selbst verlassen, um zu entscheiden, wie breit die Tabellen und die Spalten sein sollten. In vielen Fällen ist dies der beste Weg, sicherzustellen, daß Ihre Tabellen in verschiedenen Browsern mit unterschiedlichen Bildschirmgrößen und -breiten dargestellt werden können; überlassen Sie es einfach dem Browser. In anderen Fällen kann es jedoch vorkommen, daß Sie mehr Kontrolle über die Breite Ihrer Tabellen und Spalten ausüben wollen, vor allem, wenn die Voreinstellungen des Browser zu seltsamen Ergebnissen führen. In diesem Abschnitt werden Sie ein paar Methoden erlernen, genau dies zu tun.
Zeilenumbrüche in den Text einfügen
Es ist oft am einfachsten, kleine Veränderungen am Layout einer Tabelle durchzuführen, indem Sie Zeilenumbrüche (<BR>-Tags), das NOWRAP-Attribut oder sowohl <BR> als auch NOWRAP zusammen einsetzen.
Zeilenumbrüche sind besonders nützlich, wenn es sich um eine Tabelle handelt, bei der die meisten Zellen klein sind und nur eine oder zwei Zellen mehr Daten enthalten. So lange die Bildschirmbreite ausreicht, bringt der Browser normalerweise einfach lange Zeilen hervor, was in einigen Tabellen ziemlich seltsam aussehen kann (vgl. Abbildung 13.25).
Abbildung 13.25: |
Durch das Einfügen von Zeilenumbrüchen können Sie diese Zeile in eine schmälere Spalte zwängen, so daß das ganze mehr wie die Tabelle in Abbildung 13.26 aussieht.
Abbildung 13.26: |
Andererseits wollen Sie vielleicht eine Tabelle erzeugen, bei der eine Zelle gegen Ihren Willen umbrochen wird, in der Sie alle Daten auf einer einzigen Zeile darstellen wollen. (Dies kann bei Formularelementen innerhalb von Tabellenzellen besonders wichtig werden, wenn Sie das Eingabefeld neben seiner Bezeichnung anordnen wollen.) In diesem Fall können Sie den <TH>- oder <TD>-Tags das NOWRAP-Attribut hinzufügen, so daß der Browser alle Daten dieser Zelle auf einer Zeile läßt. Sie können dann immer noch <BR>-Tags von Hand zu dieser Zelle hinzufügen und einen Zeilenumbruch an der Stelle bewirken, an der Sie ihn brauchen.
Seien Sie vorsichtig, wenn Sie Tabellenzellen mit Zeilenumbrüchen und NOWRAP-Attributen hart kodieren. Ihre Tabelle wird nämlich auf Bildschirmen mit vielen verschiedenen Breiten abgebildet werden. Experimentieren Sie deshalb, indem Sie die Fenstergrößen, in denen Ihre Tabelle betrachtet wird, verändern, und beobachten Sie, ob Ihre Tabelle bei verschiedenen Fensterbreiten immer noch Ihre sorgfältig hergestellte Formatierung beibehält. Im allgemeinen sollten Sie die Formatierung dem Browser selbst überlassen und Feineinstellungen nur wenn unbedingt nötig vornehmen.
Tabellenbreiten
Das WIDTH-Attribut des <TABLE>-Tag legt fest, welche Breite die Tabelle auf der Seite einnehmen wird. WIDTH kann einen Wert enthalten, der der genauen Tabellenbreite (in Pixeln) entspricht, oder einen Prozentwert (etwa 50 Prozent oder 75 Prozent) der aktuellen Bildschirmbreite, der angepaßt wird, wenn das Fenster verändert wird. Wenn WIDTH spezifiziert ist, kann die Spaltenbreite innerhalb der Tabelle komprimiert oder erweitert werden, so daß die Spalten den vorhandenen Platz ausfüllen. Abbildung 13.27 zeigt eine Tabelle, die unverändert relativ eng zusammengeschoben wäre. Sie wurde jedoch mit Hilfe des WIDTH-Attributs so gezogen, daß sie sich zu 100 Prozent über den Bildschirm erstreckt, so daß Netscape alle Spalten so weit auseinanderzieht, daß sie den gesamten Platz einnehmen.
Abbildung 13.27: |
|
Es ist nicht möglich, die Tabelle so schmal zu machen, daß die Daten nicht mehr hineinpassen. In diesem Fall versucht Netscape, die gewünschte Breite so gut wie möglich anzupassen. |
Spaltenbreiten
Das WIDTH-Attribut kann auf einzelne Zellen (<TD> oder <TH>) angewendet werden, um die Breite einzelner Spalten zu spezifizieren. Wie auch die Tabellenbreite wird die Spaltenbreite entweder in Pixel oder als Prozenwert (bezüglich der Tabellenbreite) angegeben. So wie auch bei Tabellenbreiten ist es vorzuziehen, einen Prozentsatz anstelle einer genauen Breite in Pixel anzugeben, da auf diese Weise Ihre Tabelle unabhängig von der Fenstergröße abgebildet werden kann.
Spaltenbreiten sind sehr praktisch, wenn Sie mehrere Spalten derselben Breite haben wollen, die unabhängig von ihrem Inhalt sind (wie Sie es z.B. für einige Arten von Seitenlayout benötigen).
Abbildung 13.28 zeigt unsere Beispieltabelle, die sich über den gesamten Bildschirm erstreckt, wobei jetzt allerdings die erste Spalte nur noch 10 Prozent der gesamten Tabellenbreite einnimmt und die restlichen drei Spalten jeweils 30 Prozent. Netscape paßt die Spaltenbreiten der Bildschirmbreite und den gegebenen Prozentwerten an.
Abbildung 13.28: |
Andere Eigenschaften von Tabellen
Haben Sie bereits genug von Tabellen? Es fehlen nur noch wenige Tabelleneigenschaften: Rahmenbreiten, Zellenabstände, Zelleninnenabstände und Farbgebung.
Rahmenbreiten
Sie können auch die Breite des Rahmens ändern, der die Tabelle umgibt. Wenn BORDER einen numerischen Wert hat, wird in Netscape der Rahmen um die Tabelle mit dieser Pixel-Breite gezeichnet. Der Standard ist BORDER=1. BORDER=0 unterdrückt den Rahmen (so, als hätten Sie das BORDER-Attribut gar nicht angegeben).
|
Der Rahmenwert bezieht sich nur auf den schattierten Rahmen, der die gesamte Tabelle umschließt, nicht auf die Rahmen um die Zellen. Diesen Wert finden Sie im nächsten Abschnitt beschrieben. |
Abbildung 13.29 zeigt ein Beispiel einer Tabelle mit einem Rahmen von 10 Pixel.
Abbildung 13.29: |
Zellenabstände
Zellenabstände ähneln den Zelleninnenabständen, jedoch mit dem Unterschied, daß die Zellenabstände den Raum zwischen den Zellen beschreiben - d.h., die Breite der schattierten Linien, die die Zellen voneinander abtrennen. Der Wert dafür wird im CELLSPACING-Attribut für das <TABLE>-Tag spezifiziert. Der Standardabstand beträgt 2.
Der Zellenabstand bezieht sich auch auf den Teil der Umrandung der Tabelle, der sich an der Innenseite des Tabellenrahmens befindet (Der wiederum vom BORDER-Attribut bestimmt wird). Experimentieren Sie damit, und Sie werden den Unterschied bemerken. So zeigt Abbildung 13.30 ein Beispiel einer Tabelle mit einem Zellabstand von 8 und einem Rahmen von 4.
Abbildung 13.30: |
Zelleninnenabstände
Die Zelleninnenabstände (Cell Padding) beschreiben den Raum zwischen den Kanten der Zellen und dem Zellinhalt. Standardmäßig zeichnet Netscape seine Tabellen mit einem Innenabstand von 1 Pixel. Mit dem CELLPADDING-Attribut für das <TABLE>-Tag können Sie diesen Wert überschreiben. Abbildung 13.31 zeigt ein Beispiel für eine Tabelle mit einem Innenabstand von 10 Pixel. Das CELLPADDING-Attribut mit einem Wert von 0 bewirkt, daß die Kanten der Zellen den Zelleninhalt berühren (das sieht nicht besonders gut aus).
Abbildung 13.31: |
Farbige Tabellen
Gerade begannen die Tabellen, einigermaßen einheitlich zwischen den Browsern dargestellt zu werden, da mußte ihnen jemand eine ganze Menge neuer Merkmale hinzufügen. Dieser Jemand war Microsoft mit seinem Browser Internet Explorer, der verschiedene Attribute unterstützt, mit denen Sie die Farben verschiedener Komponenten der Tabelle verändern können.
Seither bietet auch Netscape Unterstützung für Hintergrundfarben von Tabellen in der neuesten Version seines Browser an. Allerdings unterstützen einige der älteren Browser, im speziellen Netscape 2, diese Attribute nicht - dies sollten Sie bedenken, wenn Sie diese Tags anwenden.
Um die Hintergrundfarbe einer Tabelle, Zeile oder Zelle innerhalb einer Zeile zu verändern, wenden Sie das Attribut BGCOLOR am jeweiligen Tag an, also an <TABLE>, <TR>, <TH> oder <TD>. So wie bei <BODY> wird der Wert von BGCOLOR durch eine Farbe bestimmt, die entweder als hexadezimale Dreiergruppe oder in vielen Browsern, darunter der Internet Explorer und der Netscape Navigator/Communicator, mit einem der 16 Farb-Namen bezeichnet wird: Black (Schwarz), Green (Grün), Maroon (Kastanienbraun), Olive (Olivgrün), Navy (Marineblau), Purple (Violett), Gray (Grau), Red (Rot), Yellow (Gelb), Blue (Blau), Lime (Zitronengelb), Aqua (Blaugrün), Fuchsia (Fuchsie) oder Silver (Silber). Das BGCOLOR-Attribut ist inzwischen Teil der Vorschläge für die HTML-4.0-Spezifikation.
Jede Hintergrundfarbe verdrängt die Hintergrundfarbe des umliegenden Elements. Beispielsweise verdrängt ein Tabellenhintergrund den Seitenhintergrund, ein Zeilenhintergrund verdrängt den Tabellenhintergrund, und eine Zellfarbe verdrängt alle anderen Farben. Wenn Sie eine Tabelle innerhalb einer Zelle verschachteln, nimmt diese verschachtelte Tabelle die Hintergrundfarbe der umgebenden Zelle an.
Wenn Sie die Farbe einer Zelle ändern, sollten Sie ebenfalls die Farbe des sich darin befindlichen Textes ändern (mit <FONT COLOR ...>), so daß er lesbar bleibt.
Hier folgt ein Beispiel, bei dem die Hintergrund- und Zellfarben innerhalb einer Tabelle verändert wurden. Und zwar habe ich hier mit einer HTML-Tabelle ein kariertes Muster für ein Damebrett erzeugt. Die Tabelle selbst ist weiß und enthält abwechselnd schwarze Zellen. Die Damefiguren sind Abbildungen (hier: rote und schwarze Kreise). Das Ergebnis im Explorer wird in Abbildung 13.32 gezeigt.
|
Damit die Hintergrundfarbe einer Tabellenzelle dargestellt wird, muß die Zelle irgendeinen Inhalt enthalten. Es reicht aus, einfach ein <BR>-Tag in die leere Zelle zu stecken. |
Hier folgt der Code für das Damebrett:
<HTML>
<HEAD>
<TITLE>Checkerboard</TITLE>
</HEAD>
<BODY>
<TABLE BGCOLOR="#FFFFFF" WIDTH=50%>
<TR ALIGN=CENTER>
<TD BGCOLOR="#000000" WIDTH=33%> <IMG SRC="redcircle.gif"></TD>
<TD BGCOLOR="#000000" WIDTH=33%> <IMG SRC="redcircle.gif"></TD>
<TD BGCOLOR="#000000" WIDTH=33%> <IMG SRC="redcircle.gif"></TD>
</TR>
<TR ALIGN=CENTER>
<TD> <IMG SRC="blackcircle.gif"> </TD>
<TD BGCOLOR="#000000"> <BR> </TD>
<TD> <BR> </TD>
</TR>
<TR ALIGN=CENTER>
<TD BGCOLOR="#000000"> <BR> </TD>
<TD> <IMG SRC="blackcircle.gif"> <BR> </TD>
<TD BGCOLOR="#000000"> <IMG SRC="blackcircle.gif"> </TD>
</TR>
</TABLE>
</BODY>
</HTML>
Der Internet Explorer erlaubt es Ihnen, die Farben der Komponenten des Tabellenrahmens zu bestimmen, indem Sie die Attribute BORDERCOLOR, BORDERCOLORLIGHT und BORDERCOLORDARK anwenden. Jedes dieser Attribute nimmt eine Farbnummer oder einen Farb-Namen an und kann innerhalb von <TABLE>, <TD>, <TH> oder <TR> eingesetzt werden. So wie die Hintergrundfarben verdrängen auch die Umrahmungsfarben jeweils die Farben der umgebenden Elemente. Alle drei müssen zwischen der <TABLE>-Kennung eingeschlossen sein, damit das BORDER-Attribut bestimmt wird.
Momentan werden diese Erweiterungen, mit Ausnahme des BORDERCOLOR-Attributs, das auch vom Nestcape Communicator unterstützt wird, nur vom Internet Explorer unterstützt:
Abbildung 13.32: |
Alternativen zu Tabellen
Tabellen eignen sich hervorragend dazu, große Mengen an Informationen so zu organisieren, daß sie schnell und einfach überblickt werden können. Hinsichtlich des Informationsdesigns können Tabellen mit Verknüpfungs-Menüs (die ich bereits vorher in diesem Buch beschrieben habe) verglichen werden. Sie bieten eine Strukturierung der Daten, so daß der Leser zwischen Ihren Seiten wechseln kann.
Das Problem bei Tabellen ist, daß sie zwar von den meisten Browsern inzwischen unterstützt werden, aber bei den Browsern, die Tabellen nicht unterstützen, ganz besonders unschön herauskommen. Sie werden zwar nicht die Daten innerhalb der Tabelle verlieren, aber immerhin die Formatierung, wodurch Ihre Daten genauso unlesbar werden können, als ob sie gar nicht im Dokument vorhanden wären. Abbildung 13.33 zeigt z.B. eine Tabelle, die in Netscape ganz ordentlich aussieht.
Abbildung 13.33: |
Abbildung 13.34 zeigt dieselbe Tabelle, dargestellt in einer früheren Version von Netscape, die keine Tabellen unterstützt.
Abbildung 13.34: |
Scheußlich, was? Damit würden Sie Ihre Leser, denen keine Browser mit Tabellenunterstützung zur Verfügung stehen, höchstens verwirren.
Um Alternativen für Browser anzubieten, die keine Tabellen unterstützen, haben Sie verschiedene Wahlmöglichkeiten. Abbildung 13.35 zeigt eine einfache HTML-Tabelle, und jede der folgenden Möglichkeiten stellt eine Methode dar, mit der Sie die Tabelle vermeiden können:
Abbildung 13.35: |
Abbildung 13.36: |
Abbildung 13.37: |
Verwenden Sie vorformatierten Text (die <PRE>-Kennung), um Ihre Informationen in tabellenähnlichen Spalten anzuordnen - erstellen Sie Tabellen ohne Tabellen-Kennungen. Bedenken Sie dabei, daß vorformatierter Text gewöhnlich in einer nichtproportionalen Schrift, etwa in Courier dargestellt wird, so daß Ihre Daten nicht ganz so schön aussehen wie in einer echten Tabelle.
Abbildung 13.38: |
Verknüpfen Sie die Tabelle extern. Sie können die Tabelle auf einer separaten Seite unterbringen, statt sie direkt in die betreffende Seite aufzunehmen. Dort erzeugen Sie eine Verknüpfung zur ursprünglichen Seite und geben eine entsprechende Beschreibung mit an, z.B.:
<P> <A HREF="groessen.html"> Eine Tabelle </A> der verschiedenen Groessen, Gewichte und Augenfarben der Leute in meiner Gruppe. Ihr Browser muss Tabellen unterstuetzen, um diese betrachten zu koennen. </P>
Die komplizierteste Methode, Tabellen zu erstellen, die auch in nichttabellenfähigen Browsern dargestellt werden können, ist, ein Design zu gestalten, bei dem das Layout bei beiden Varianten funktioniert. Wenn Sie z.B. Textelemente wie Überschriften oder Blockzitate innerhalb von Tabellenzellen einsetzen, werden diese Elemente auf ihren eigenen Zeilen enden, wenn keine Tabellenfunktionen unterstützt werden. Indem Sie Ihre Seiten durch Ausprobieren in beiden Browser-Arten testen, können Sie oft ein Layout zustande bringen, das sowohl inner- als auch außerhalb von Tabellen funktioniert.
Ein oft angewandter Trick, der nach einem ähnlichen Prinzip funktioniert, ist, am Ende von bestimmten Zellen <P>- oder <BR>-Kennungen einzufügen. Indem man sie am Ende der Zelle einfügt, werden sie in tabellenfähigen Browsern ignoriert, verursachen aber Zeilenumbrüche in den Browsern, die keine Tabellen unterstützen. So können Sie z.B. in der Farbtabelle, die Sie in Übung 13.1 erzeugt haben, in die letzte Zelle jeder Zeile Zeilenumbrüche einfügen:
<TABLE BORDER>
<TR>
<TH>BR</TH>
<TH>Red</TH>
<TH>Yellow</TH>
<TH>Blue<BR></TH>
</TR>
<TR>
<TH>Red</TH>
<TD>Red</TD>
<TD>Orange</TD>
<TD>Purple<BR></TD>
</TR>
<TR>
<TH>Yellow</TH>
<TD>Orange</TD>
<TD>Yellow</TD>
<TD>Green<BR></TD>
</TR>
<TR>
<TH>Blue</TH>
<TD>Purple</TD>
<TD>Green</TD>
<TD>Blue<BR></TD>
</TR>
</TABLE>
Die <BR>-Tags werden auf das Layout von Tabellen in Browsern, die Tabellen unterstützen, keinen Einfluß nehmen (da sie sich am Ende der Zelle befinden), werden bei anderen Browsern jedoch einen beträchtlichen Effekt haben. Die Absatz-Kennung (<P>) bringt einen neuen Absatzumbruch hervor, so daß jede Tabellenreihe eine eigene Zeile erhält. Dies ist zwar kein Ersatz für eine Tabelle, vermindert jedoch die Verwirrung, die in den älteren Browsern entsteht.
Zusammenfassung
In diesem Kapitel haben Sie alles über Tabellen gelernt. Tabellen ermöglichen es Ihnen, Ihre Daten in Zeilen und Spalten anzuordnen, so daß Ihre Leser wichtige Informationen auf einen Blick erkennen können.
Bei der Arbeit mit den Tabellen in diesem Kapitel haben Sie viel über Überschriften und Daten, Titel, Zeilen- und Spaltendefinitionen, Ausrichtungsmöglichkeiten und Zellen, die sich über mehrere Zeilen und Spalten erstrecken, erfahren. Mit Hilfe dieser Funktionen sind sie in der Lage, Tabellen für fast alle Anforderungen zu erzeugen.
Die folgenden Punkte sollten Sie beachten, wenn Sie eine Tabelle erzeugen:
Tabelle 13.1 zeigt eine kurze Zusammenfassung der HTML-Tags für Tabellen, die Sie in diesem Kapitel kennengelernt haben.
Tabelle 13.1: Die Tabellen-Tags
Tag |
Attribut |
Beschreibung |
<TABLE>...</TABLE> |
Kennzeichnet eine Tabelle. | |
BORDER |
Ein Attribut des <TABLE>-Tag, das angibt, ob die Tabelle mit einem Rahmen dargestellt wird. Standardmäßig wird kein Rahmen dargestellt. Der Wert für BORDER gibt die Breite des schattierten Rahmens um die Tabelle an. | |
CELLSPACING |
Definiert den Platz zwischen den Zellen in der Tabelle. | |
CELLPADDING |
Definiert den Platz zwischen den Zellenkanten und ihrem Inhalt. | |
<CAPTION>...</CAPTION> |
Erzeugt einen optionalen Titel für die Tabelle. | |
<TR>...</TR> |
Definiert eine Tabellenzeile, die Überschriften und Datenzeilen enthalten kann. | |
<TH>...</TH> |
Definiert eine Tabellenzelle mit einer Überschrift. Überschriftszellen werden in der Regel fett und sowohl horizontal als auch vertikal in der Zelle zentriert dargestellt. | |
<TD>...</TD> |
Definiert eine Tabellenzelle mit Daten. Tabellenzellen werden in Normalschrift dargestellt, linksbündig ausgerichtet und innerhalb der Zelle vertikal zentriert. | |
ALIGN |
In Kombination mit <TABLE> sind die möglichen Werte LEFT und RIGHT. Bestimmt die Ausrichtung der Tabelle und gibt an, daß Text, der nach der Tabelle kommt, neben ihr herumfließen wird. | |
In Kombination mit <CAPTION> sind die möglichen Werte bei den meisten Browsern TOP und BOTTOM. ALIGN gibt an, wo der Titel oben (Standard) oder unten in der Tabelle plaziert wird. Beim Internet Explorer sind die möglichen Werte LEFT, RIGHT und CENTER und geben die horizontale Ausrichtung des Titels an. | ||
In Kombination mit <TR> sind die möglichen Werte LEFT, CENTER und RIGHT, die die horizontale Ausrichtung der Zellen innerhalb dieser Zeile beschreiben (dabei wird die Standardausrichtung der Zellen innerhalb dieser Zeile überschrieben). | ||
In Kombination mit <TH> oder <TD> sind die möglichen Werte ebenfalls LEFT, CENTER und RIGHT, wobei sowohl die Zeilenausrichtung als auch die Standard-Zellenausrichtung überschrieben wird. | ||
VALIGN |
In Kombination mit <CAPTION> sind bei Internet Explorer die möglichen Werte TOP und BOTTOM, die die Plazierung des Titels relativ zur Tabelle beschreiben (wie bei ALIGN bei den meisten anderen Browsern. | |
In Kombination mit <TR> sind die möglichen Werte TOP, MIDDLE und BOTTOM. VALIGN bestimmt die vertikale Ausrichtung der Zellen innerhalb der Zeile (der Standard wird dabei überschrieben). | ||
In Kombination mit <TH> oder <TD> sind dieselben Werte möglich, und VALIGN überschreibt dann sowohl die vertikale als auch die Standard-Zellenausrichtung. | ||
In Netscape kann VALIGN auch den Wert BASELINE annehmen (Ausrichtung zur Grundlinie). | ||
ROWSPAN |
In Kombination mit <TH> oder <TD> beschreibt ROWSPAN, über wie viele darunterliegende Zellen sich die aktuelle Zelle erstreckt. | |
COLSPAN |
In Kombination mit <TH> oder <TD> beschreibt COLSPAN, über wie viele Zellen sich die aktuelle Zelle nach rechts erstreckt. | |
BGCOLOR |
(HTML 4.0) Kann mit jedem Tabellen-Tag eingesetzt werden, um die Hintergrundfarbe dieser Tabellenkomponente zu bestimmen. Zellenfarben überschreiben die Zeilenfarben, die wiederum die Tabellenfarben verdrängen. Der Wert kann eine hexadezimale Farbnummer oder ein spezieller Farb-Name sein. | |
BORDERCOLOR |
(Erweiterung von Internet Explorer) Kann in Verbindung mit jedem beliebigen Tabellen-Tag eingesetzt werden, um die Farbe der Umrandung dieses Elements zu verändern. Der Wert kann eine hexadezimale Farbnummer oder ein spezieller Farb-Name sein. | |
BORDERCOLORLIGHT |
(Erweiterung von Internet Explorer) So wie BORDERCOLOR, außer daß es nur die helle Komponente einer dreidimensional hervorgehobenen Umrandung beeinflußt. | |
BORDERCOLORDARK |
(Erweiterung von Internet Explorer) So wie BORDERCOLOR, außer daß es nur die dunkle Komponente einer dreidimensional hervorgehobenen Umrandung beeinflußt. | |
NOWRAP |
In Kombination mit <TH> oder <TD> verhindert NOWRAP, daß der Browser den Zellinhalt umbricht. | |
WIDTH |
In Kombination mit <TABLE> beschreibt es die Tabellenbreite, angegeben als Pixel-Wert oder als Prozentsatz der Seitenbreite (beispielsweise 50 Prozent). | |
In Kombination mit <TH> oder <TD> beschreibt WIDTH die Zellenbreite, angegeben als Pixel-Wert oder als Prozentsatz der Tabellenbreite (beispielsweise 50 Prozent). |
Fragen und Antworten
Frage:
Es ist sehr kompliziert, eine Tabelle anzulegen, insbesondere wenn sich die Zellen über mehrere Zeilen und Spalten erstrecken. Das letzte Beispiel war fürchterlich.
Antwort:
Sie haben recht. Es ist extrem schwierig, Tabellen manuell zu entwerfen. Wenn Sie jedoch Filter und Tools verwenden, um HTML-Code zu erzeugen, dann macht diese Tabellendefinition mehr Spaß.
Frage:
Meine Tabellen funktionieren in Netscape ausgezeichnet, aber in anderen Browsern werden sie völlig durcheinandergewürfelt angezeigt. Was habe ich falsch gemacht?
Antwort:
Haben Sie alle <TR>-, <TH>- und <TD>-Tags geschlossen? Stellen Sie sicher, daß Sie die entsprechenden </TR>-, </TH>- und </TD>-Tags angegeben haben. Die abschließenden Tags sind zwar offiziell optional, andere Browser benötigen sie jedoch oft, um das Layout der Tabelle verstehen zu können.
Frage:
Kann man Tabellen verschachteln, also innerhalb einer Tabellenzelle eine weitere Tabelle spezifizieren?
Antwort:
Natürlich! Wie ich in diesem Kapitel erklärt habe, können Sie in eine Tabellenzelle beliebigen HTML-Code einfügen, und dieser wiederum kann andere Tabellen enthalten.
Frage:
Warum benutzt fast die ganze Welt ALIGN dazu, einen Titel oben oder unten auf einer Seite zu plazieren, aber der Internet Explorer tut etwas total anderes?
Antwort:
Das weiß ich auch nicht. Und, schlimmer noch, Microsoft behauptet, daß man diese Definition von HTML 3.0 bekommen habe, aber keine der Versionen von HTML 3.0 oder der neueren Tabellenspezifikation definiert es auf diese Weise. HTML 4.0 verspricht diesen Attributen die Möglichkeit zum links- und rechtsbündigen Ausrichten hinzuzufügen. Der Internet Explorer verfügte allerdings über diese Ausrichtungsmöglichkeiten bevor HTML diese überhaupt in Betracht gezogen hatte.
Copyright ©1998 by SAMS, einem Imprint der Markt&Technik Buch- und Software-Verlag GmbH.
Elektronische Fassung des Titels: HTML 4 in 14 Tagen, ISBN: 3-8272-2019-X
