SELFHTML/Quickbar
HTML
Tabellen SELFHTML/Quickbar
HTML
Tabellen
 |
Aufbau einer Tabelle |
|
|
 | |
Tabellen definieren
Anzeigebeispiel: So sieht's aus
Sie können in HTML Tabellen definieren, um tabellarische Daten darzustellen, oder um Text und Grafik attraktiver am Bildschirm zu verteilen. Dazu wird grundsätzlich unterschieden zwischen Tabellen, die Gitternetzlinien haben (für tabellarische Daten), und Tabellen ohne sichtbare Gitternetzlinien ("
blinde Tabellen" - etwa für mehrspaltigen Text oder für sauberes Beieinanderstehen von Text und Grafik).
<table border> <!--hier folgt der Tabelleninhalt einer Tabelle mit Gitternetzlinien--> </table> |
<table> <!--hier folgt der Tabelleninhalt einer blinden Tabelle--> </table> |
<table> leitet eine Tabelle ein (table = Tabelle). Wenn die Tabelle sichtbare Gitternetzlinien enthalten soll, müssen Sie den Zusatz border mit angeben - wie in Beispiel 1 (border = Rand).
Um die Tabelle mit Inhalten zu füllen, müssen Sie Zeilen und Spalten definieren wie im folgenden beschrieben.
|
Zeilen und Spalten definieren Anzeigebeispiel: So sieht's aus
Eine Tabelle besteht aus mindestens einer, normalerweise aus mehreren Zeilen. Eine Zeile besteht aus mindestens einer, normalerweise aus mehreren Zellen. Dadurch ergeben sich die Spalten der Tabelle.
<table border>
<tr>
<th>Kopfzelle: 1. Zeile, 1. Spalte</th>
<th>Kopfzelle: 1. Zeile, 2. Spalte</th>
<th>Kopfzelle: 1. Zeile, 3. Spalte</th>
</tr>
<tr>
<td>Datenzelle: 2. Zeile, 1. Spalte</td>
<td>Datenzelle: 2. Zeile, 2. Spalte</td>
<td>Datenzelle: 2. Zeile, 3. Spalte</td>
</tr>
<tr>
<td>Datenzelle: 3. Zeile, 1. Spalte</td>
<td>Datenzelle: 3. Zeile, 2. Spalte</td>
<td>Datenzelle: 3. Zeile, 3. Spalte</td>
</tr>
</table>
|
<tr> leitet eine neue Tabellenzeile ein (tr = table row = Tabellenzeile). Im Anschluß daran werden die Zellen (Spalten) der betreffenden Reihe definiert. Am Ende einer Tabellenzeile wird ein abschließendes Tag </tr> notiert.
Eine Tabelle kann Kopfzellen und gewöhnliche Datenzellen enthalten. Text in Kopfzellen wird hervorgehoben (meist fett und zentriert ausgerichtet). <th> definiert eine Kopfzelle, <td> eine normale Datenzelle (th = table header = Tabellenkopf, td = table data = Tabellendaten). Der Inhalt einer Zelle wird jeweils hinter dem Tag notiert. In einer Tabellenzelle können beliebige Elemente stehen, d.h. außer normalem Text z.B. auch 
Verweise oder Grafik in HTML. Sogar eine weitere Tabelle können Sie innerhalb einer Zelle definieren.
Die Tags <th> und <td> können zwar auch alleine (ohne End-Tag) stehen. Dennoch ist es dringend zu empfehlen, stets die zugehörigen End-Tags zu notieren, also am Ende der Zelle ein abschließendes Tag </th> bzw. </td>.
Die Anzahl der Zellen sollte bei jeder Zeile gleich sein, so daß die Tabelle durchweg die gleiche Anzahl Spalten hat. In der ersten Zeile, die Sie definieren, legen Sie deshalb durch die Anzahl der dort definierten Zellen die Anzahl der Spalten Ihrer Tabelle fest.
Beim Text innerhalb von Zellen gelten die Besonderheiten für Umlaute, Sonderzeichen und HTML-eigene Zeichen.
Größere Tabellen können im Quelltext schnell unübersichtlich werden. Wählen Sie deshalb eine übersichtliche Darstellungsform mit Einrückungen und Zeilenumbrüchen (ähnlich wie im Beispiel oben). Auf die Präsentation im Browser hat die Darstellung im Quelltext keinen Einfluß, da innerhalb von Tabellenzellen die üblichen Regeln beim Editieren von HTML gelten.
Tabellenzellen dürfen auch leer sein. Wenn Sie in einer Zeile für eine Spalte keine Daten eingeben wollen, notieren Sie ein einfaches <td></td>. Beachten Sie dabei jedoch, daß viele WWW-Browser die Zelle in diesem Fall als "nicht vorhanden" darstellt. Probieren Sie deshalb auch mal die Befehlsfolge <td> </td> für leere Tabellenzellen aus.
|
|
Spalten vordefinieren Anzeigebeispiel: So sieht's aus
Die Darstellung einer Tabelle ergibt sich zwar automatisch aus den definierten Zeilen und Spalten. Doch für einen WWW-Browser ist es nicht ganz einfach, die Darstellung frühzeitig zu ermitteln. Er muß erst die gesamte Tabelle einlesen, bevor er irgendetwas davon darstellen kann. Bei großen Tabellen kann dies zu unschönen leeren Bildschirmen während des Seitenaufbaus führen.
HTML 4.0 bietet eine neue Syntax an, um dem Browser gleich zu Beginn der Tabelle mitzuteilen, wie viele Spalten die Tabelle hat. Dadurch kann der Browser die Tabelle schneller aufbauen, d.h. bereits Teile der Tabelle anzeigen, bevor die gesamte Tabelle eingelesen ist. Ältere Browser (Netscape 3.x, MS Internet Explorer 3.x) interpretieren diese Angaben jedoch noch nicht.
<table border>
<colgroup>
<col width=80>
<col width=100>
<col width=320>
</colgroup>
<tr>
<td>1. Zeile, 1. Spalte</td>
<td>1. Zeile, 2. Spalte</td>
<td>1. Zeile, 3. Spalte</td>
</tr>
<!-- usw. andere Zeilen der Tabelle -->
</table>
|
<table border>
<colgroup width=200 span=3>
</colgroup>
<tr>
<td>1. Zeile, 1. Spalte</td>
<td>1. Zeile, 2. Spalte</td>
<td>1. Zeile, 3. Spalte</td>
</tr>
<!-- usw. andere Zeilen der Tabelle -->
</table>
|
<table border>
<colgroup>
<col width="4*">
<col width="2*">
<col width="1*">
</colgroup>
<tr>
<td>1. Zeile, 1. Spalte</td>
<td>1. Zeile, 2. Spalte</td>
<td>1. Zeile, 3. Spalte</td>
</tr>
<!-- usw. andere Zeilen der Tabelle -->
</table>
|
Mit <colgroup> leiten Sie hinter dem einleitenden <table>-Tag eine Vorab-Definition der Tabellenspalten ein (colgroup = column group = Spaltengruppe). Dabei haben Sie zwei Möglichkeiten: entweder Sie möchten unterschiedlich breite Tabellenspalten haben. Dann gehen Sie so vor wie im obigen Beispiel 1. Oder Sie haben eine Tabelle, in der alle Spalten die gleiche einheitliche Breite haben sollen. Dann können Sie so vorgehen wie im obigen Beispiel 2.
Im Beispiel 1 enthält das <colgroup>-Tag keine weiteren Angaben. Dafür notieren Sie unterhalb dieses Tags für jede einzelne gewünschte Tabellenspalte je einen Befehl <col>. Das erste <col>-Tag definiert die erste Spalte, das zweite die zweite Spalte usw. Wenn Sie keine weiteren Angaben machen, wird die Breite der Spalten automatisch aufgrund des Tabelleninhalts ermittelt. Mit width= [Pixel/Prozent] können Sie jedoch eine Spaltenbreite für die einzelnen Spalten vorgeben (width = Breite). Mit width=100 erzwingen Sie beispielsweise eine Spaltenbreite von 100 Pixeln, und mit width=33% eine Breite von einem Drittel des Anzeigefensters.
Im Beispiel 2 werden keine Befehle vom Typ <col> notiert. Stattdessen notieren Sie im einleitenden <colgroup>-Tag das Attribut span= (span = spannen). Geben Sie hinter dem Istgleichzeichen die Anzahl der Spalten an, die Sie wünschen. Mit dem Attribut width= können Sie in diesem Fall eine einheitliche Spaltenbreite für alle Spalten definieren.
Bei der Angabe width= haben Sie neben der Möglichkeit, Pixel oder Prozentwerte anzugeben, auch noch eine dritte Möglichkeit: Sie können das relative Breitenverhältnis der Spalten untereinander bestimmen, unabhängig davon, wie breit die Tabelle im Verhältnis zum Anzeigefenster ist. Eine solche Möglichkeit stellt das obige Beispiel 3 vor. Bei Breitenangaben dieser Art notieren Sie hinter width= eine Zahl und dahinter ein Sternzeichen. Das Sternzeichen ist dabei nur ein Signalzeichen für den Browser, daß er die Zahlen davor nicht als Pixel interpretieren soll. Wichtig sind die Zahlen. Im obigen Beispiel 3 werden drei Spalten definiert, bei denen die relativen Zahlen 4, 2 und 1 in der Summe 7 ergeben. Damit definieren Sie eine Tabelle, bei der die erste Spalte vier Siebtel der Tabellenbreite einnimmt, die zweite Spalte zwei Siebtel, und die dritte Spalte ein Siebtel.
So richtig zur Geltung kommt dieses relative Spaltenverhältnis aber erst, wenn Sie außerdem eine Breite für die gesamte Tabelle angeben.
<col>-Tags haben kein Abschluß-Tag. Das abschließende </colgroup>-Tag ist optional.
Auch das <col>-Tag darf das Attribut span= erhalten. Dadurch gruppieren Sie jedoch nicht mehrere Spalten zu einer, sondern Sie geben lediglich an, daß Attribute dieser Spalte auch für die nächsten soundsoviel Spalten gelten sollen. Wenn Sie beispielsweise <col span=3 width=100> angeben, erhalten diese und die nächsten zwei Spalten die Breite von 100 Pixeln.
Das <colgroup>-Tag darf die Attribute span= und width= auch dann enthalten, wenn unterhalb davon <col>-Tags definiert werden. Dabei überschreibt die Anzahl der definierten <col>-Tags jedoch die Angabe, die mit <colgroup span=> gemacht wurde, und das Attribut width= innerhalb eines <col>-Tags hat Vorrang vor der Angabe width= im <colgroup>-Tag.
Es ist auch erlaubt, mehrere <colgroup>-Tags zu notieren. So können Sie beispielsweise mit zwei Befehlen wie <colgroup width=100 span=3> und <colgroup width=50 span=5> hintereinander notiert insgesamt 8 Spalten für die Tabelle definieren, wobei die ersten drei Spalten eine Breite von 100 Pixeln erhalten und die nachfolgenden fünf Spalten eine Breite von 50 Pixeln.
Für die Breite der Tabellenspalten gelten die gleichen Hinweise wie beim Erzwingen von Spaltenbreiten auf herkömmliche Weise.
|
|
Kopf, Körper und Fuß einer Tabelle definieren Anzeigebeispiel: So sieht's aus
Sie können eine Tabelle logisch in drei Bereiche aufteilen: einen Kopfbereich, einen Datenbereich und einen Fußbereich. Interessant ist dies zum Beispiel in Verbindung mit der Möglichkeit, Regeln für Gitternetzlinien zu bestimmen. Die Angaben zur Unterscheidung von Kopf, Körper und Fuß einer Tabelle werden vom MS Internet Explorer ab Version 4.x interpretiert. Netscape kennt diese Angaben zumindest bis einschließlich Version 4.x nicht.
<table border rules=groups>
<thead>
<!--Tabellenzeilen-->
</thead>
<tbody>
<!--Tabellenzeilen-->
</tbody>
<tfoot>
<!--Tabellenzeilen-->
</tfoot>
</table>
|
Den Tabellenkopf leiten Sie mit <thead> ein (thead = table head = Tabellenkopf). Daran anschließend können Sie eine oder mehrere Zeilen der Tabelle notieren, die zum Kopfbereich gehören sollen. Mit </thead> schließen Sie den Tabellenkopf ab.
Den Tabellenkörper leiten Sie mit <tbody> ein (tbody = table body = Tabellenkörper). Daran anschließend notieren Sie den eigentlichen Datenbereich der Tabelle. Mit </tbody> schließen Sie den Tabellenkörper ab.
Den Tabellenfuß leiten Sie mit <tfoot> ein (tfoot = table foot = Tabellenfuß). Daran anschließend können Sie eine oder mehrere Zeilen der Tabelle notieren, die zum Fußbereich gehören sollen. Mit </tfoot> schließen Sie den Tabellenfuß ab.
|
|
Weitere MöglichkeitenDie Tags <table>, <tr>, <th> und <td> können Universalattribute enthalten.
Mit Hilfe von CSS Style-Sheets können Sie Tabellen besser handhaben. Damit können Sie zentrale Formate definieren. Indem Sie zentrale Style-Sheet-Angaben auf die hier beschriebenen HTML-Tags anwenden, stehen Ihnen wesentlich mehr Möglichkeiten zur Verfügung als bei den hier beschriebenen Attributen. Sie können auch Style-Sheets in einer separaten Datei definieren und diese Datei dann in beliebig viele HTML-Dateien Ihres Projekts einbinden. So ist es leichter, mit einem dateiübergreifenden Layout zu arbeiten, wenn Sie Tabellen intensiv einsetzen. Interessant sind im hier beschriebenen Zusammenhang folgende Style-Sheet-Angaben:
Schriftformatierung
Listen und Tabellen
|
| |
weiter: |
Rahmendicke, Gitternetzlinien, Randabstand
|
zurück: |
Lauftext (Marquee)
|
