los (1K)5. HTML: Tabellen verwenden

Komplexe Informationen mit Tabellen übersichtlich machen

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 verschmelzen
Wir brauchen: Computerraum

Wiederholung

Im 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.

 

Einfache Tabelle erstellen

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&szlig;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!

 

Tabelle mit Überschrift

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&szlig;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>
 

Kopf- und Fußzeilen hinzufügen

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&szlig;ballspiel Kapellenschule - Adelhochschule</caption>
 <thead>
  <tr>
   <th colspan="3" align="center">Spielergebnis</th>
  </tr>
 </thead>
  <tfoot>
   <tr>
    <td align="center">Heim</td>
    <td>&nbsp;</td>
    <td align="center">G&auml;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.

 

Bezug der Kopfzeile festlegen

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>&nbsp;</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>&nbsp;</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

 

Weitere Attribute für table, tr, und td

Ausrichten mit align

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.

Vertikale Ausrichtung mit valign

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.

Breitenangaben mit width

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%".

Innenabstand von Zellen mit cellpadding

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

Aussenabstand von Zellen mit cellspacing

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

 

Tabellenzellen verschmelzen

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&szlig;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:


Erste Schritte | Text auszeichnen | Bilder einfügen | Hyperlinks einfügen | Frames verwenden | CSS verwenden | JavaScript | nach oben