Lektion 4 - Tabellen

Tabellen

In diesem Teil unseres kleinen Tut's lernt ihr, wie ihr Tabellen erstellen könnt. Mit Tabellen kann man sehr schöne Layoutserstellen. Hier das Grundgerüst einer Tabelle.
Tabelle
<table><tr><td>Inhalt der Tabelle 1</td><td>Inhalt der Tabelle 2</td></tr></table>
Daraus wird das hier

Inhalt der Tabelle 1

Inhalt der Tabelle 2

In dieser Tabelle steht nun "tr" für einen Table Row. Das heißt das Aufmachen einer neuen Zeile. Anschließend muss ein "td" kommen. Also ein Table Data. Für den Browser heißt das, dass ab hier die Inhalte einer Tabelle beginnen. Je mehr "td" definiert werden, desto mehr Zellen stehen nebeneinander. Erst mit der Definition eines neuen "tr" wird eine neue Zeile bekonnen.Wollt ihr also eine Tabelle, die 2x2 Spalten hat, so müsst ihr folgenden Code verwenden.

<table><tr><td>Inhalt der Tabelle 1</td><td>Inhalt der Tabelle 2</td></tr><td>Inhalt der Tabelle 3</td><td>Inhalt der Tabelle 4</td></table>
Daraus wird das hier

Inhalt der Tabelle 1	Inhalt der Tabelle 2
Inhalt der Tabelle 3	Inhalt der Tabelle 4

Mit Tabellen arbeiten

Wie bereits oben erwähnt, kann man mit Tabellen verschiedene Layouts gut hinbekommen. Ein leichtes und gutes Beispiel ist dabei die Navigationsleiste dieser Homepage. Den Quelltext von der Navigationsleiste ist hier abgebildet!

Beispiel
<table bgcolor="#000099"><tr><td bgcolor="#003399"><span class="normalfont"><b><u>Navigation</u></font></b></span></center></td></tr><tr><td bgcolor="#006699"><a href="hauptseite.html" target="haupt">Startseite</a></td></tr><tr><td bgcolor="#006699"><a href="tut_1.html" target="haupt">Lektion 1</a><br></td></tr><tr><td bgcolor="#006699"><a href="tut_2.html" target="haupt">Lektion 2</a><br></td></tr><tr><td bgcolor="#006699"><a href="tut_3.html" target="haupt">Lektion 3</a><br></td></tr><tr><td bgcolor="#006699"><a href="tut_4.html" target="haupt">Lektion 4</a><br></td></tr><tr><td bgcolor="#006699"><a href="tut_5.html" target="haupt">Lektion 5</a><br></td></tr><tr><td bgcolor="#006699"><a href="tut_6.html" target="haupt">Lektion 6</a><br></td></tr><tr><td bgcolor="#006699"><a href="tipps.html" target="haupt">Tipps & Tricks</a><br></td></tr><tr><td bgcolor="#006699"><a href="screenshot.html" target="haupt">Screenshots</a><br></td> </tr><tr><td bgcolor="#006699"><a href="webspace.html" target="haupt">Webspace</a><br></td></tr><tr><td bgcolor="#006699"><a href="farbcodes.html" target="haupt">Farbcodes</a></td></tr></table>
Dies sieht dann so aus

Navigation

Startseite

Lektion 1

Lektion 2

Lektion 3

Lektion 4

Lektion 5

Lektion 6

Tipps & Tricks

Screenshots

Webspace

Farbcodes

An dieser Tabelle sticht deutlich der Code bgcolor="#Code" hervor. Mit diesem Code lässt sich die Hintergrundfarbe der Tabelle bestimmen.
Wie Links erstellt werden haben wir ja schon vorher gelernt. Wie ihr seht, kann mal also alles mögliche in eine Tabelle reinschreiben. Nicht nur Texte, sondern auch Links, und man kann sogar Tabellen in Tabellen erstellen. Sehr schön sieht es auchnoch aus wenn Bilder in die Tabelle reingeschrieben werden. So sind alle ordentlich nebeneinander und man hat eine bessere Übersicht. Probiert doch einfach mal die Vielseitigkeit einer solchen Tabelle aus.