Als ich beim Lernen von html zu den Tabellen kam dachte ich: uäääh ich nutz eh nie Tabellen, lern ich nich. Naja. Ich hab sie mir doch angeeignet, Tabellen in html sind nämlich nicht wie in Word nur zum normale Tabellen machen da, sondern eine wichtige Layout-hilfe. Eine Tabelle an sich zu erstellen ist nicht schwer:

Ihr seht hier eine Tabelle mit einer Zeile und zwei Spalten:
<tr></tr> bedeutet das alles was darin steht eine Tabellenzeile ist. Hier hinein müsst ihr soviele <td></td> einfügen wie ihr Spalten haben wollt (das können beliebig viele, kann aber auch nur eine sein)

führt also zu:

Diese Tabelle hat, weil ich es ihr gesagt habe, einen Rand (durch das "border" im table-Tag).
Durch Änderung dieses Attributes könnt ihr der Tabelle auch breitere Ränder geben, oder garkeine:

führt zu:

Diese beiden Attribute führen dazu, das an bestimmten Bereichen der Tabelle Platz bleibt, entweder innerhalb der Zelle um die Schrift rum (cellpadding) oder "im Rand" (cellspacing)

Diese Angaben sind wichtig wenn ihr Eure Layouts in mehrere kleine Bilder aufteilt (wir sehen später, das ist eine sinnvolle Aktion). Die Bilder sollen ja nicht zwischendurch einen Abstand haben:

fügt ihr aber

ein, sind alle Bilder nah aneinander:

Nun ist es gut möglich das ihr in eine Tabellenspalte nur ein Wort oder relativ wenig reinschreibt, und in die andere viel. Dann sieht das so aus:

Der Browser wird höchstwahrscheinlich die zwei Wörter in die Mitte der Spalte schreiben. Das ist natürlich nicht immer das was wir wollen. Deshalb gibt es dafür das "valign" Attribut. Valign heißt nichts anderes als "vertical align" also vertikale Ausrichtung. Wir können folgendes einsetzen:

Das richtet den Inhalt der Zelle entsprechend oben, unten oder in der Mitte (was aber ja eigentlich schon voreingestellt ist) aus. Wenn wir viele Tabellen haben, oder beabsichtigen das Ganze öfter zu ändern, ist es sinnvoller dies über einen Style Sheet laufen zu lassen. Trotzdem kann dieses Attribut manchmal nützlich sein. Für die CSS Variante unsere Liste durchsehen ;D

Man kann auch explizit einen Tabellenkopf einrichten (dafür kann man dann zB im CSS andere Einstellungen vornehmen): man ersetzt das <td> durch ein <th>

Tabellen können auch Hintergründe haben. Entweder die ganze Tabelle oder nur bestimmte Zellen. Diese Hintergründe sind auch wieder nur beschränkt sinnvoll, man muss sich selber die Grenze ziehen wann man lieber css benutzen will.

Eine ganze Tabelle kann einen Hintergrund haben:

Oder auch ein Hintergrundbild:

Oder eine Zelle eine Farbe, eine ein Bild:

Tabellen(-Zellen)breiten und Höhen können auf zwei verschieden Art und Weisen eingefügt werden:
durch eine Prozentangabe oder einen konkreten Pixelwert und zwar durch

Beim ersten Code seht ihr einen Prozentangabe. NIEMALS das Prozentzeichen vergessen, sonst denkt der Browser es wäre eine Pixelangabe. Und das wäre schon ein gravierender Unterschied ;D

Genauso könnt ihr mit Tabellenzellen verfahren. In der Regel sind allerdings die ZEILEN gleichhoch. Dh der Browser wird sie gleichhoch machen. Wie man Zellen auslässt, dazu kommen wir in der nächsten Lektion.

Ihr müsst immer alle Container in Tabellen schließen!! Der Internet Explorer ist da ein bisschen schlampig und akzeptiert nicht geschlossene Zellen-Tags (<td>), aber das macht sonst KEIN Browser!
Der IE ist auch der Einzige Browser der die Einstellungen für Schriften, Schriftgrößen, Schriftfarben etc aus der Body Einstellung in eine Tabelle übernimmt. Legt also in eurem CSS alles nochmal für die Tabelle an.