Tabellen in der HTML anzeigen
Möchten Sie in der Homepage eine Tabelle anzeigen, benutzen Sie das <table> </table>-Element.
Die Überschrift einer Tabelle wird mit den Befehl <caption>Überschrift</caption>
bestimmt.
Der caption align="..."-Befehl ist optional, wobei folgende Werte möglich sind:
left |
= Seitlich links der Tabelle |
right |
= Seitlich rechts der Tabelle |
bottom |
= Unter der Tabelle |
top |
= Über der Tabelle (Standart) |
Das <align>-Attribut im caption-Element ist als deprecated
eingestellt. Ein Ersatzbefehl mit CSS-Stylesheet funktioniert leider auf keinen getesteten Browser.
Zellen definieren
Mit dem Element <tr> </tr> (tr = table row = Tabellenzeile) wird eine
Zeile definiert, mit <th> </th> (th = table header = Tabellenkopf).
können die Kopfzellen und mit <td> </td> (td = table data = Tabellendaten) eine Datenzelle.
<table>
<caption align="top">Tabelle</caption>
<tr>
<th>Kopf 1</th>
<th>Kopf 2</th>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
</tr>
<tr>
<td>Text 3</td>
<td>Text 4</td>
</tr>
</table>
Gitternetzlinien und Zellenabstand
Mit den Befehl <table border="3"> wird die Dicke des Außenrahmens
der Tabelle in Pixel angegeben. Mit <table cellspacing="3"> der Abstand der Zellen
untereinander und <table cellpadding="3"> der Innenabstand vom Zellenrand zum
Zelleninhalt. Um das zu veranschaulichen, hier eine kleine Grafik:
Zusätlich gibt es noch das Attribut frame. Damit bestimmen Sie, wie Tabellenrahmen angezeigt werden:
| frame="box" (box = Rechteck) | oben, links, rechts und unten sichtbar |
| frame="border" (border = Rahmen) | das gleiche wie frame=box |
| frame="void" (void = nichts) | ohne Rahmen |
| frame="above" (above = oberhalb) | nur oben |
| frame="below" (below = unterhalb) | nur unteren |
| frame="hsides" (hsides = horizontale Seiten) | nur oben und unten |
| frame="vsides" (vsides = vertikale Seiten) | nur am linken und am rechten Rand |
| frame="lhs" (lhs = left hand side = links) | nur am linken Rand |
| frame="rhs" (rhs = right hand side = rechts) | nur am rechten Rand |
Um zu bestimmen, wie Gitternetzlinien angezeigt werden, benutzen Sie das Attribut rules:
| rules="none" (none = keine) | überhaupt keine Linien außer Außenrahmen werden gezogen |
| rules="rows" (rows = Reihen) | nur zwischen den Zeilen, nicht zwischen den Spalten |
| rules="cols" (cols = Spalten) | nur zwischen den Spalten, nicht zwischen den Zeilen |
| rules="groups" (groups = Gruppen) | Linien zwischen Kopf, Körper und Fuß einer Tabelle gezogen |
| rules="all" (all = alle) | Alle Gitternetzlinien werden angezeigt |
Beachten Sie, das rules="groups" nur funktioniert, wenn die Kopf- und Fusszeile definiert ist:
Mit <thead>...</thead> definieren Sie eine Kopfzeile, mit <tbody>...</tbody>
den Körper und mit <tfoot>...</foot> eine Fußzeile.
<table cellspacing="3" cellpadding="8" frame="box" rules="group" border="3">
<caption align="top">Tabelle</caption>
<thead><tr><th>Kopf 1</th><th>Kopf 2</th><th>Kopf 3</th></tr></thead>
<tfoot><tr><td>Fuss 1</td><td>Fuss 2</td><td>Fuss 3</td></tr></tfoot>
<tbody>
<tr><td>Zelle 1/1</td><td>Zelle 1/2</td><td>Zelle 1/3</td></tr>
<tr><td>Zelle 2/1</td><td>Zelle 2/2</td><td>Zelle 3/3</td></tr>
<tr><td>Zelle 3/1</td><td>Zelle 3/2</td><td>Zelle 3/3</td></tr>
</tbody>
</table>
Das ganze sieht dann so aus
Beispiele mit rules und frame
Höhe und Breite von Zellen
Mit style="width: 200px; height:50px;" bestimmen Sie die Höhe und Breite
der Spalten. Die Werte können feste Größen sein, z.B. 80px, oder prozentuelle Werte haben.
Dabei braucht die Breite nur in der ersten Zeile stehen, bzw. die Höhe nur in der ersten Spalte.
Zusätzlich können Sie mit style="vertical-align: middle; text-align:center"
den Text ausrichten.
<table rules="all" style="width: 90%;">
<tr>
<td style="text-align:left; vertical-align:top;
width: 33%; height: 80px;">links-oben</td>
<td style="text-align:left; vertical-align:middle; width: 33%;">
links-mittig</td>
<td style="text-align:left; vertical-align:bottom; width: 34%;">
links-unten</td>
</tr>
<tr>
<td style="text-align:center; vertical-align:top;
height: 90px;">mitte-oben</td>
<td style="text-align:center; vertical-align:middle;">
mitte-mittig</td>
<td style="text-align:center; vertical-align:bottom;">
mitte-unten</td>
</tr>
<tr>
<td style="text-align:right; vertical-align:top;
height: 80px;">rechts-oben</td>
<td style="text-align:right; vertical-align:middle;">
rechts-mittig</td>
<td style="text-align:right; vertical-align:bottom;">
rechts-unten</td>
</tr>
</table>
Das ganze sieht dann so aus
Hintergrund
Die Hintergrundfarbe einer Tabelle kann mit den Stylesheet style="background-color:#FFFF00;"
definiert werden.
Statt die Farb-Hexadezimalzahl kann auch ein Farbnamen style="background-color:red;" oder ein
rgb-code style="background-color:rgb(128,128,255);" angegeben werden. Zusätzlich kann auch
eine Hintergrundgrafik mit style="background-image:url(bild.jpg)".
<table style="background-color:blue;">
<tr style="background-color:red;" border="1">
<td>rot</td><td>auch rot</td>
</tr><tr>
<td>blau</td><td>auch blau</td>
</tr><tr style="background-image:url(../bilder/grund.jpg);">
<td>Grafik</td><td>auch Grafik</td>
</tr><tr>
<td>wieder blau</td>
<td style="background-color:green;">grün</td>
</tr><tr>
<td>blau</td><td>auch blau</td>
</tr>
</table>
Das ganze sieht dann so aus
Tabellen ausrichten
Durch den CSS Stylesheet style="float:right;" kann eine Tabelle rechts ausgerichtet werden,
oder mit left links ausgerichtet. Dabei wird der nachfolgende Text die Tabelle umfließen.
Wenn der Textumfluss vermieden werden soll, gebe style=quot;float:none;" an.
Um Abstand zwischen der Tabelle und umfließenden Text zu bestimmen, füge das Attribut margin-right:20px
und margin-bottom:10px hinzu. Mit margin-right wird der Abstand in Pixel rechts der Grafik
bestimmt und mit margin-bottom den Abstand unterhalb der Grafik.
Mit den Befehl <br style="clear:all"> wird der automatische Textumbruch unterbrochen, und
wird unter der Grafik fortgesetzt.
Der komplette Code kann dann so aussehen:
<table style="float:right; background-color:#FFFF00;
margin-left:20px; margin-bottom:10px" border="1">
<tr>
<td>Das ist die erste Zelle</td>
<td>Das ist die 2. Zelle</td>
</tr>
<tr>
<td>Das ist die 3. Zelle</td>
<td>Das ist die 4. Zelle</td>
</tr>
<tr>
<td>Das ist die 5. Zelle</td>
<td>Das ist die 6. Zelle</td>
</tr>
</table>
<p>Diese Tabelle ist rechts ausgerichtet, und der Text fließt
links um die Tabelle herum.<br>
Links der Tabelle werden 20 Pixel Platz gelassen, und unterhalb der Tabelle
10 Pixel <br style="clear:right">
Nach den <br style="clear:right">-Befehl
läuft der Text unter der Tabelle normal weiter.</p>
Das ganze sieht dann so aus
Rahmen definieren
Gitternetzlinien können mit den border-Stylesheet definiert werden. Welche Angaben alle
möglich sind, erfahren Sie bei Rahmen.
<table style="border-style:solid; border-color:red;" width="60%">
<tr><td style="border-width:thick; padding:5px; border-color:blue;
border-style:solid;">solid</td>
<td style="border-width:thick; padding:5px; border-color:green;
border-style:dashed;">dashed</td>
<td style="border-width:thick; padding:5px; border-color:blue;
border-style:inset;">inset</td></tr>
<td style="border-width:thick; padding:5px; border-color:violet;
border-style:outset;">outset</td>
<td style="border-width:thick; padding:5px; border-color:yellow;
border-style:groove;">groove</td>
<td style="border-width:thick; padding:5px; border-color:orange;
border-style:ridge;">ridge</td></tr>
</table>
Das ganze sieht dann so aus
Zellen verbinden
Um Spalten zu Verbinden, benutzen Sie das Attributt colspan und für Zeieln das Attribut
rowspan. Die Tabelle kann z.B. so aufgebaut sein:
<table bgcolor="#FFFFC0" border="1" cellspacing="3" cellpadding="3">
<tr>
<td>Zelle 1/1</td>
<td>Zelle 1/2</td>
<td>Zelle 1/3</td>
</tr>
<tr>
<td colspan="3">Reihe über 3 Spalten</td>
</tr>
<tr>
<td>Zelle 3/1</td>
<td>Zelle 3/2</td>
<td rowspan="3">3. Spalte über 3 Zeilen</td>
</tr>
<tr>
<td>Zelle 4/1</td>
<td>Zelle 4/2</td>
</tr>
<tr>
<td>Zelle 5/1</td>
<td>Zelle 5/2</td>
</tr>
</table>
Das ganze sieht dann so aus
