|
Tabellen sind ein sehr wichtiges Hilfsmittel für Webdesigner. Sie ermöglichen es Seiten besser zu strukturieren, beispielsweise auch mit unsichtbaren Tabellen.
Eine Tabelle wird mit dem <table> - Tag eingeleitet und mit dem <tr> - Tag, mit dem eine neue Zeile in der Tabelle begonnen wird, fortgesetzt.
Der <td> - Tag leitet eine neue Zelle in einer Zeile ein. Die einleitenden Tags für die Tabelle, Zeile und Zelle müssen wieder geschlossen werden.
Merken Sie sich am besten, dass mit dem Öffnen einer Tabelle auch das Öffnen einer Zeile und einer Zelle verbunden ist, da eine Tabelle ohne Zeilen und Zellen keinerlei Verwendung hat.
So sieht die Grundstruktur einer Tabelle aus:
<table>
<tr>
<td>
...
</td>
</tr>
</table>
> Listing 3.1: Tabellenstruktur
Damit Sie sich im folgenden Tutorial besser zurecht finden, umranden wir die derzeit unsichtbaren Tabellen mit einem 2 Pixel-dickem Rahmen.
Dazu wird der Tabelle das  Attribut "border" mit dem Inhalt "2" (in Pixeln angegeben!) zugewiesen.
Um bereits ein kleines Ergebnis feststellen zu können, binden wir noch eine Zelle (<td>) in der bereits vorhandenen Zeile (<tr>) ein.
Der aktuelle Stand:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body>
<table border="2">
<tr>
<td>
1.Zelle
</td>
<td>
2.Zelle
</td>
</tr>
</table>
</body>
</html>
Möchten Sie, dass die Tabelle dieselbe Größe wie das Browserfenster hat, so legen wir dies mit dem Attribut "width" (dt. Breite) fest. Der Tag ist für den <table> - und <td> - Tag einsetzbar.
Das Attribut kann eine Prozentangabe (X% von Browserfenster, 100% = Größe des Browserfensters) als auch eine Pixelangabe beinhalten.
Der Code dazu würde so aussehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body>
<table border="2" width="100%">
<tr>
<td>
1.Zelle
</td>
<td>
2.Zelle
</td>
</tr>
</table>
</body>
</html>
Mit dem Attribut "align" für <td> und <tr> - Tags können die Inhalte in den Zellen positioniert werden.
Der Inhalt "left" ist der Standard und gibt an, dass der Text bzw. der Inhalt nach links ausgerichtet werden soll, "center" gibt an, dass der Text bzw. Inhalt mittig sein soll und "right" definiert, dass der Text rechts angezeigt werden soll.
Mit dem (inzwischen veralteten) <center> - Tag lassen sich Texte bzw. andere Elemente zentriert auch außerhalb von Tabellen anzeigen.
Möchten wir die erste Zelle nach rechts ausrichten und die zweite Zelle mittig, so würde das wie folgt aussehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body>
<table border="2" width="100%">
<tr>
<td align="right">
1.Zelle
</td>
<td align="center">
2.Zelle
</td>
</tr>
</table>
<center>Testtext</center>
</body>
</html>
Das Attribut "bgcolor", welches sowohl für den <table> - Tag, als auch für den <body> - Tag verwendet werden kann, definiert die Hintergrundfarbe der Tabelle (beim Einsatz im <table>-Tag) bzw. der ganzen Seite (beim Einsatz im <body>-Tag).
Als Inhalt kann dem "bgcolor"-Attribut, genauso wie dem Attribut "color" des <font> - Tags sowohl individuelle Farbcodes (mit Raute beginnen!), als auch Farbwörter (wie z. B. blue), zugewiesen werden.
Nehmen Sie als Hintergrundfarbe für die Seite z. B. schwarz (black), für die Tabelle rot (red) und als Schriftfarbe (dies regeln Sie mit dem <font> - Tag) beispielsweise blau (blue).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body bgcolor="black">
<table border="2" width="100%" bgcolor="red">
<tr>
<td align="right">
<font color="blue">1.Zelle</font>
</td>
<td align="center">
<font color="blue">2.Zelle</font>
</td>
</tr>
</table>
<center>Testtext</center>
</body>
</html>
Um einen Abstand von 5 Pixeln zu allen anliegenden Seiten innerhalb einer Zelle zu bewirken, wird das Attribut "cellpadding" (Angabe nur in Pixel!) für die gesamte Tabelle verwendet.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body bgcolor="black">
<table border="2" width="100%" bgcolor="red" cellpadding="5">
<tr>
<td align="right">
<font color="blue">1.Zelle</font>
</td>
<td align="center">
<font color="blue">2.Zelle</font>
</td>
</tr>
</table>
<center>Testtext</center>
</body>
</html>
Tabellen bestehen nicht nur aus einer Zeile, sondern normalerweise aus mehreren. Natürlich lassen sich deshalb noch mehr <tr>-Tags öffnen. Bedenken Sie jedoch, dass Sie in jeder Tabelle nur maximal einen <tr>-Tag geöffnet haben dürfen.
Bedenken Sie bitte, dass die Tabellenstruktur immer dieselbe sein muss, so müssen in der zweiten Zeile beispielsweise auch wieder zwei Zellen erstellt werden, wenn dies in der ersten Zeile so ist.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body bgcolor="black">
<table border="2" width="100%" bgcolor="red" cellpadding="5">
<tr>
<td align="right">
<font color="blue">1.Zelle der ersten Zeile</font>
</td>
<td align="center">
<font color="blue">2.Zelle der ersten Zeile</font>
</td>
</tr>
<tr>
<td align="center">
1.Zelle der zweiten Zeile
</td>
<td>
<font color="green">2.Zelle der zweiten Zeile</font>
</td>
</tr>
</table>
<center>Testtext</center>
</body>
</html>
| Zusammengefasst | Die Tabelle wird mit dem <table> - Tag eingeleitet, die Zeile mit dem <tr> - Tag und die Zelle mit dem <td> - Tag. |
| Das Attribut "border" für den <table> - Tag gibt die Rahmendicke in Pixel an. |
| Mit Hilfe des Attributes "width" können Sie die Breite der Tabelle und der einzelnen Zellen festlegen. |
| Die Positionierung der Inhalte von einzelnen Zellen kann mit dem "align" - Attribut definiert werden. |
| Verwenden Sie das Attribut "bgcolor" um die Hintergrundfarbe der ganzen Seite bzw. der ganzen Tabelle zu bestimmen. |
| Um einen Abstand zu allen anliegenden Seiten innerhalb einer Zeile zu bewirken, wird das Attribut "cellpadding" (Angabe nur in Pixel!) verwendet. |
| Außerhalb von Tabellen kann man mit dem <center> - Tag auch Text oder andere Elemente zentriert anzeigen. |
Weiter zu Teil 4 (Bilder und Links) >
(as)
|
MEMBERS LOGIN
SEITE DURCHSUCHEN
>:o
>:o>:o>:o