| Navigation |
| nPage.de Tipps & Tricks › HTML-Einsteigerkurs › 3. Tabellen |
|
| Zurück |
| 3. Tabellen | ||||||||||||||
| 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>
> Listing 3.1: Tabellenstruktur
</table> 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">
> Listing 3.2: Tabellenrahmen
<html> <head> <title>Der Titel</title> </head> <body> <table border="2"> </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">
> Listing 3.3: Breite
<html> <head> <title>Der Titel</title> </head> <body> <table border="2" width="100%"> </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">
> Listing 3.4: Zellenausrichtung
<html> <head> <title>Der Titel</title> </head> <body> <table border="2" width="100%"> </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">
> Listing 3.5: Hintergrund- und Schriftfarbe
<html> <head> <title>Der Titel</title> </head> <body bgcolor="black"> <table border="2" width="100%" bgcolor="red"> </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">
> Listing 3.6: Hintergrund- und Schriftfarbe mit Zellenabstand
<html> <head> <title>Der Titel</title> </head> <body bgcolor="black"> <table border="2" width="100%" bgcolor="red" cellpadding="5"> </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">
> Listing 3.7: Eine Tabelle mit zwei Zeilen
<html> <head> <title>Der Titel</title> </head> <body bgcolor="black"> <table border="2" width="100%" bgcolor="red" cellpadding="5"> </table> <center>Testtext</center> </body> </html>
Weiter zu Teil 4 (Bilder und Links) > |