In diesem Kapitel lernst du, wie man Tabellen kontextbezogen und physisch formatiert, Zelleninhalte ausrichtet und einzelne Zellen miteinander verschmilzt
Einfache Tabelle | Mit Überschrift | Kopf und Fuß | Bezug festlegen | weitere Attribute | Zellen verschmelzenIm letzten Kapitel haben wir gelernt, wie man mit HTML-Marken Links auf Ankerstellen in der Seite, eigene und fremde Seiten oder auf Bilder in HTML-Seiten setzt.
Tabellen sind nützlich, um komplexe Informationen wie zum
Beispiel Wochenpläne, Stundenabrechnungen oder
Spielergebnisse übersichtlich darzustellen. Eine einfache
Tabelle sieht etwa so aus wie
Bespiel
11:
<table border="1" summary="Fußballbegegnung am Freitag" <tr> <td colspan="3" align="center">Spielergebnis</td> </tr> <tr> <td align="center">3</td> <td align="center">:</td> <td align="center">2</td> </tr> </table>Beschreibung:
Eine Tabelle erzeugst du durch die Notierung <table></table>. Eine Umrahmung der
einzelnen Tabellenzellen erhalten wir mit der Angabe border="1"im einleitenden table-Tag.
Mit dem summary-Attribut wird wie mit
alt bei Bildern eine Beschreibung des Inhalts
angegeben.
Um auch sehbehinderten Menschen eine Kommunikation über
das Internet zu ermöglichen sind solche Angaben sehr
wichtig!
Eine neue Tabellenzeile wird mit <tr> eingeleitet und mit </tr> wieder abgeschlossen. Eine einzelne Tabellenzelle leitest du mit <td> ein, und am Schluss der Zelle notierst du </td>.
Mehr über die Verwendung der Attribute colspan und align findest du weiter unten!
Mit <caption></caption>
erzeugen wir eine Überschrift für die Tabelle. Sie
erscheint automatisch oberhalb unserer Tabelle,
obwohl wir caption innerhalb der
table-Marken notieren. Das zeigt uns
Beispiel
12
<table border="1" cellspacing="0" cellpadding="2" summary="Beispiel" width="300">
<caption>Fußballspiel Kapellenschule - Adelhochschule</caption>
<tr>
<td colspan="3" align="center">Spielergebnis</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">:</td>
<td align="center">2</td>
</tr>
</table>
Wie du die oberste Zeile zur Kopfzeile formatierst und eine
Fußzeile hinzufügst zeigt dir
Beispiel
13
<table border="1" cellspacing="0" cellpadding="20%" summary="Beispiel" width="300"> <caption>Fußballspiel Kapellenschule - Adelhochschule</caption> <thead> <tr> <th colspan="3" align="center">Spielergebnis</th> </tr> </thead> <tfoot> <tr> <td align="center">Heim</td> <td> </td> <td align="center">Gäste</td> </tr> </tfoot> <tbody> <tr> <td align="center">3</td> <td align="center">:</td> <td align="center">2</td> </tr> </tbody> </table>Beschreibung:
Eine normale Zeile bestimmst du zur Kopfzeile, indem du die <tr></tr>-Marken zusätzlich mit <thead></thead>-Marken einfasst. Für die Kopfzellen verwendest du statt <td></td>einfach <th></th> - das ist alles.
Die Fußzeile wird sofort nach der Kopfzeile notiert - dennoch erscheint sie, wie der Name schon sagt, im Fuß der Tabelle. Eine normale Tabellenzeile <tr><td></td></tr>wird mit <tfoot></tfoot> eingefasst.
Achtung: Für Tabellenfußzellen gibt es, anders als für Kopfzellen, keine spezielle Marke. Verwende also ganz normal das td-Tag. Ein <tf>-Tag existiert nicht! |
Der Rest der Tabelle kann mit <tbody></tbody> eingefasst werden.
Mit dem scope-Attribut geben wir die Beziehung der Kopfzeile
zum Inhalt der Tabelle an. Siehe
Beispiel
14:
<table border="1" cellspacing="15%" cellpadding="1" summary="Beispiel" width="300"> <caption>Fußballspiel Kapellenschule - Adelhochschule</caption> <thead> <tr> <th> </th> <th colspan="3" align="center" scope="col">Spielergebnis</th> </tr> </thead> <tfoot> <tr> <th align="center" scope="row">Mannschaft</th> <td align="center">Heim</td> <td> </td> <td align="center" >Gäste</td> </tr> </tfoot> <tbody> <tr> <th align="center" scope="row">Tore</th> <td align="center">3</td> <td align="center">:</td> <td align="center">2</td> </tr> </tbody> </table>Beschreibung:
Mit scope="col" machen wir die
Angabe: Kopfangabe bezieht sich auf die
Spalte
Mit scope="row" machen wir die Angabe:
Kopfangabe bezieht sich auf die Zeile
Mit dem schon hinlänglich bekannten Attribut align bestimmst du die Ausrichtung.
In der <table>-Marke notiert,
kontrolliert align abgesehen von der der Ausrichtung
auf der Seite (rechts, links, mittig) auch den Textfluß
um die Tabelle.
Mögliche Werte für align im
table-Tag sind: left, right und
center.
In der <td>-Marke hingegen
bestimmt align die horizontale Textausrichtung
innerhalb der einzelnen Zelle.
Mögliche Werte für align im
td-Tag sind: left, right, center und
justify (erzwingt Blocksatz).
Notierst du das align-Attribut im <tr>-Tag, so richtet der Befehl alle Zellen einer Zeile wie notiert aus.
In der <td>-Marke und der <tr>-Marke bestimmt valign die vertikale Textausrichtung innerhalb einzelner bzw. mehrerer Zellen.
Mögliche Werte für valign in der td- oder tr-Marke sind: top, middle, bottom und baseline.
Beim Einfügen der Bilder in Kapitel 3 haben wir das Attribut width zum Bestimmen der Elementbreite bereits kennengelernt. Möglich sind absolute, numerische Angaben für die exakte Pixelgröße wie width="254" . Ebenso möglich sind aber auch relative Angaben in Prozent, z.B. width="25%".
Das Attribut cellpadding versieht Zellen mit einer Polsterung nach Innen. In Zellen eingebette Objekte oder Text erhalten, je nach Wertzuweisung an das cellpadding-Attribut, einen größeren oder kleineren Abstand zum Rand der Zelle.
Möglich sind wieder absolute, numerische Angaben für die exakte Pixelgröße oder relative Angaben in Prozent.
Möglich ist allein die Notierung in der <table>-Marke. Das Attribut gilt für alle Zellen der Tabelle.
Siehe nochmal Beispiel 13
Das Attribut cellspacing versieht Zellen mit einer Polsterung nach Aussen. Der Abstand zwischen den einzelnen Zellen nach Aussen hin wird, je nach Wertzuweisung an das cellspacing-Attribut, vergrößert.
Möglich sind wieder absolute, numerische Angaben für die exakte Pixelgröße oder relative Angaben in Prozent.
Möglich ist allein die Notierung in der <table>-Marke. Das Attribut gilt für alle Zellen der Tabelle.
Siehe nochmal Beispiel 14
Durch die Notierung des Attributs colspan="2" in der <td>-Marke verschmilzt die Zelle mit ihrer rechten Nachbarzelle. Die Wertzuweisung erfolgt in ganzen Zahlen und bedeutet nichts anderes als die Anzahl der zu verschmelzenden Zellen. Mit <td colspan="3"> z.B. werden drei Zellen miteinander verschmolzen.
Achtung: Nachdem du colspan=3" angegeben hast wird die Zelle automatisch drei Zellen breit. Die fehlenden zwei Zellen in dieser Reihe nicht noch einmal notieren! |
Siehe
Beispiel 11.
<table border="1" summary="Fußballbegegnung am Freitag"
<tr>
<td colspan="3" align="center">Spielergebnis</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">:</td>
<td align="center">2</td>
</tr>
</table>
Genauso lässt die Notierung des Attributs rowspan="2" in der <td>-Marke die Zelle mit ihrer unteren Nachbarzelle verschmelzen.
Richtig wichtig wird das Arbeiten mit verschmolzenen Zellen, wenn man mit verborgenen Tabellen die ganze Seite in Navigations- und Inhaltsbereiche teilt. Die Tabelle wird dann zu einem hilfreichen Layout-Instrument. Mehr dazu in Kapitel 3. Inhalt - Seite teilen - Verborgene Tabellen
Weiter geht's: