|
| |
|
| Tabellen sind eines der wichtigsten Hilfsmittel für das Seitenlayout. Damit können z.B. Text und Bilder beliebig auf der Seite positioniert werden. Einen langen Text kann man so begrenzen, dass er nicht die gesamte Seitenbreite einnimmt (Beispiel 1). Bilder kann man neben den Text stellen (Beispiel 2) und die Seite farbenfroher gestalten (Beispiel 7). Natürlich kann man das Ganze auch mit einem schönen Rahmen verzieren (Beispiel 8). |
 | 
|
|
<table> <tr> <td> Inhalt </td> </tr> </table> |
Das ist das Grundgerüst einer Tabelle. Sie beginnt mit <table> (Tabelle), <tr> (table row=Tabellenzeile) und <td> (table data=Tabelleninhalt). Jetzt wird der Inhalt reingeschrieben (Text und/oder Bild). Danach wird sie wieder geschlossen mit </td> </tr> und </table>. Der Inhalt einer Tabelle befindet sich also immer zwischen <td> und </td> ! Schreibe der Übersicht halber die einzelnen Befehle (besser : tags, gespr.: täggs) untereinander ! Das ist hilfreich, wenn Du mehrere Zellen nebeneinander bzw. mehrere Zeilen untereinander hinzufügen willst, siehe Beispiel 2 und 4. |
|
Jetzt braucht sie noch ein paar Eigenschaften (Attribute). Die wichtigsten sind :
border="x" Der Tabellenrahmen. Für x schreibst Du eine Zahl rein. Mit der Angabe border="0" (kein sichtbarer Rahmen) nennt man sie eine blinde Tabelle. Tipp : Damit Du die Tabelle sehen kannst, schreibst Du anfangs immer : <table border="1">. Weiteres zu Rahmen siehe Beispiel 8. align="center" Damit ist die Tabelle mittig ausgerichtet. (Mit "right" ist sie rechts ausgerichtet; ohne die Angabe steht sie links.) width="100%" bestimmt die Breite der Tabelle, hier über die ganze Seite. cellpadding="0" bestimmt den Abstand (in Pixel) des Inhaltes vom Tabellenrand. cellspacing="0" bestimmt den Abstand (in Pixel) der einzelnen Zellen voneinander. |
|
|
<table align="center" width="80%" border="2" cellspacing="0" cellpadding="8">
<tr> <td>Tabelleninhalt </td> </tr> </table> Diese Tabelle wurde mit obigem Text erzeugt. Ihre Breite ist also 80% der Seitenbreite; sie hat eine Rahmenstärke von 2 Pixel und der seitliche Abstand des Inhalts zum Rahmen beträgt 8 Pixel.
|
|
Um eine zweite Zelle daneben zu stellen, kopierst Du einfach die Zeile von <td> bis </td> noch einmal darunter : <table align="center" width="80%" border="2" cellspacing="0" cellpadding="8"> <tr> <td>Tabelleninhalt 1</td> <td>Tabelleninhalt 2</td> </tr> </table> Für mehrere Zellen kopierst Du die Textzeile entsprechend öfter. Schau hierzu auch in mein Extrablatt, unten bei Auktionen ! Und so sieht sie dann aus : |
| Tabelleninhalt 1 | Tabelleninhalt 2 |
| Auch den td-tag kann man mit Attributen versehen. Die wichtigsten sind : align="center" Der Zelleninhalt wird mittig ausgerichtet. (Mit "right" ist er rechts ausgerichtet; ohne die Angabe steht er links.) width="x%" Die Zellenbreite; für x wird eine Zahl reingeschrieben. Die Summe der Zellenbreiten muss 100% ergeben.
height="y" Die Höhenangabe (in Pixel); für y wird eine Zahl reingeschrieben. Wird meist nur gebraucht, wenn die Höhe der Zelle größer sein soll als der Inhalt.
valign="top" Der Zelleninhalt wird am oberen Rand der Zelle ausgerichtet. valign="bottom" Der Zelleninhalt wird am unteren Rand der Zelle ausgerichtet. |
|
<table align="center" width="80%" border="2" cellspacing="3" cellpadding="2">
<tr> <td width="33%" valign="top" height="60">Zelle 1</td> <td width="34%" align="center">Zelle 2</td> <td width="33%" align="right" valign="bottom">Zelle 3</td> </tr> </table> Und so sieht sie aus : |
| Zelle 1 | Zelle 2 | Zelle 3 |
|
Um eine oder mehrere Zeilen "anzuhängen", kopierst Du jetzt den Textabschnitt von <tr> bis </tr> ein oder mehrmals (hier 2mal) darunter : <table align="center" width="80%" border="2" cellspacing="0" cellpadding="2"> <tr> <td width="25%" align="center" height="40">Zelle 1</td> <td width="50%" align="center">Zelle 2</td> <td width="25%" align="center">Zelle 3</td> </tr> <tr> <td width="25%" align="center" height="40">Zelle 4</td> <td width="50%" align="center">Zelle 5</td> <td width="25%" align="center">Zelle 6</td> </tr> <tr> <td width="25%" align="center" height="40">Zelle 7</td> <td width="50%" align="center">Zelle 8</td> <td width="25%" align="center">Zelle 9</td> </tr> </table> Und so sieht sie aus : |
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
|
In der Tabelle oben sollen die 3 Zellen in der ersten Zeile verbunden werden. Dafür braucht man ein weiteres Attribut für den td-tag : colspan="x" Für x die Zahl der zu verbindenden Zellen einsetzen, hier die 3. <table align="center" width="80%" border="2" cellspacing="0" cellpadding="2"> <tr> <td colspan="3" width="100%" align="center" height="40">Zelle 1</td> </tr> <tr> <td width="25%" align="center" height="40">Zelle 4</td> <td width="50%" align="center">Zelle 5</td> <td width="25%" align="center">Zelle 6</td> </tr> <tr> <td width="25%" align="center" height="40">Zelle 7</td> <td width="50%" align="center">Zelle 8</td> <td width="25%" align="center">Zelle 9</td> </tr> </table>
Und so sieht sie aus : |
| Zelle 1 | ||
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
|
In der Tabelle (Beispiel 4) sollen die 3 Zellen in der 2. Spalte (Mitte) verbunden werden. Dafür braucht man noch ein weiteres Attribute für den td-tag : rowspan="y" Für y die Zahl der zu verbindenden Spalten einsetzen, hier die 3. <table align="center" width="80%" border="2" cellspacing="0" cellpadding="2"> <tr> <td width="25%" align="center" height="40">Zelle 1</td> <td rowspan="3" width="50%" align="center">Zelle 2</td> <td width="25%" align="center" height="40">Zelle 3</td> </tr> <tr> <td width="25%" align="center" height="40">Zelle 4</td> <td width="25%" align="center">Zelle 6</td> </tr> <tr> <td width="25%" align="center" height="40">Zelle 7</td> <td width="25%" align="center">Zelle 9</td> </tr> </table>
Und so sieht sie aus : |
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 4 | Zelle 6 | |
| Zelle 7 | Zelle 9 |
|
Tabellen sind standardmäßig transparent. Um sie (und/oder die einzelnen Zellen) farbig zu gestalten, braucht man noch ein Attribut (Gilt für die ganze Tabelle ebenso wie für einzelne Zellen) :
bgcolor="x" Hintergrundfarbe; für x kommt eine Farbnummer oder ein Farbname rein. Eine Farbtabelle findest Du hier ! Die Farbangabe im td-tag "überschreibt" die Tabellenhintergrundfarbe, d.h., Du kannst im table-tag eine Farbe für die ganze Tabelle bestimmen und trotzdem noch die Farben der Zellen einzeln definieren. Angewendet auf die Tabelle im Beispiel 5 ergibt sich (mit anderen Zellenbreiten) folgender Quelltext : <table align="center" bgcolor="#ffa500" width="80%" border="2" cellspacing="0" cellpadding="2"> <tr> <td colspan="3" bgcolor="#ff8c00" width="100%" align="center" height="40">Überschrift</td> </tr> <tr> <td width="20%" align="center" height="40">Zelle 4</td> <td width="40%" align="center">Zelle 5</td> <td width="40%" align="center">Zelle 6</td> </tr> <tr> <td width="20%" align="center" height="40">Zelle 7</td> <td bgcolor="red" width="40%" align="center">Zelle 8</td> <td bgcolor="blue" width="40%" align="center">Zelle 9</td> </tr> </table> Und so sieht sie aus : |
| Überschrift | ||
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
|
Für ein Hintergrundbild wird ein weiteres Attribut benötigt : background="URL", wobei für URL die Adresse des Hintergrundbildes reingeschrieben wird. Das Bild muss auf eigenem Webspace liegen ! Als Beispiel dient hier eine Tabelle mit zwei Zeilen und drei Zellen. Damit wird gleichzeitig die häufig gestellte Frage beantwortet : Wie bringe ich 2 Bilder links und rechts auf gleiche Höhe ? <table align="center" width="80%" border="1" background="http://www.gloeckner-nbg.de/tapeteweiss.gif"> <tr> <td><img src="Adresse vom linken Bild" alt="Bild links"></td> <td align="center">Herzlich Willkommen auf meiner Seite !</td> <td align="right"><img src="Adresse vom rechten Bild" alt="Bild rechts"></td> </tr> <tr> <td align="center" colspan="3">Hier kommt der weitere Inhalt der Seite rein.</td> </tr> </table> Und so sieht sie aus : |
 |
Herzlich Willkommen auf meiner Seite ! | |
Hier kommt der weitere Inhalt der Seite rein. Der Willkommenstext wurde formatiert; schau dazu auf meine Tricks-Seite Text #1. |
||
|
Mit dem Attribut :
bordercolor="y" kannst Du die Rahmenfarbe bestimmen. Für y wieder eine Farbnummer oder einen Farbnamen einsetzen. Mehr Gestaltungsmöglichkeiten für den Rahmen findest Du aber hier ! Beachte : Die übrigen Angaben bleiben davon unberührt, nur das border=" " und bordercolor=" " entfallen natürlich ! |
|
Du kannst die einzelnen Seiten der Tabelle (oder der Zellen) auch verschiedenfarbig gestalten. Die Angabe "style" hast Du ja schon im Beispiel 9 gesehen, sie kommt auch hier zum Einsatz :
<table align="center" width="80%" cellspacing="0" cellpadding="8" style="border-left:4px solid green;border-top:4px solid red;border-right:4px solid blue;border-bottom:4px solid black;"> <tr> <td align="center"> Inhalt </td> </tr> </table> border-left, border-top, border-right und border-bottom definieren den Rahmen links, oben, rechts und unten. Keine Angabe : Kein Rahmen. Angabe nur z.B. border-left : Rahmen nur auf der linken Seite, wie Du in manchen Beispielen oben siehst (der rote senkrechte Balken). Und so sieht sie dann aus : |
| Inhalt |
|
|
|
|
|
|
|
