Sie sind Hier: Startseite Sonstiges HTML & CSS Tabellen

Eine Tabelle besteht aus Zeilen, Spalten und einzelnen Zellen. Jede Tabelle beginnt mit dem Html-Tag <table> und endet mit dem End-Tag </table> . Dabei sollte darauf geachtet werden, dass auch bei verschachtelten Tabellen die jeweiligen End-Tags gesetzt werden, und zwar für jede Tabelle. Fehlen diese End-Tags, so stellen einige Browser die Tabellen falsch oder vielleicht überhaupt dar. Der Internet Explorer ist dagegen sehr fehlertolerant. Der Browser von Microsoft denkt sich einfach die fehlenden Tags und stellt die Tabellen korrekt dar.

Das Grundgerüst einer Tabelle. In einem Browser wird noch nichts angezeigt, da die Tabelle noch nicht mit Inhalt gefüllt wurde.

Mit <tr> werden Zeilen angelegt. tr steht für table row (Tabellen Reihe).

Mit <td> werden die Zellen angelegt. td steht für table data (Tabellen Daten).

Die Tabelle ist eigentlich fertig. Sie muss noch mit Inhalt gefüllt werden.

Nach dem Tag  <td> wird die Zelle gefüllt. Hier mit dem Text "Inhalt der Zelle". 
Die Ausgabe im Browser:

Bei der Ausgabe im Browser steht nur der Text. Es ist nicht erkennbar, dass der Text in einer Tabelle steht. So kann noch die Stärke des Tabellenrahmens ausgewählt werden. Dieses geschieht mit dem Tag  border. Die Anweisung lautet dann:  <table border=1> . Je höher der Wert, desto stärker wird der Rahmen der Tabelle angezeigt. Bei border=0 wird die Tabelle im Browser nicht angezeigt. Beispiel:

Die Ausgabe im Browser:

Nun ist sichtbar, dass der Text in einer Tabelle steht. Als nächstes wird eine weitere Zelle in die Tabelle eingebaut. Beispiel:

Die Ausgabe im Browser:

Eine Tabelle kann theoretisch aus beliebig vielen Spalten und Zeilen bestehen. Hier noch ein Beispiel mit einer Tabelle, die aus vier Zellen besteht.

Die Ausgabe im Browser:

So sollte ein Tabellenaufbau dann aussehen. Achten Sie auf die Einrückungen, die die einzelnen Zellen verdeutlichen.

Größe einer Tabelle angeben:

Bei einer Tabelle kann auch angegeben werden, wir breit und hoch eine Tabelle werden soll. Diese Angaben können sowohl in % oder auch in Pixeln angegeben werden. Beides kann auch kombiniert werden.

Beispiel: Die Tabelle soll eine Breite von 50 % der Html-Seite haben und eine Höhe von 83 Pixel. Die einzelnen Zellen der Tabellen sollen gleichmäßig breit sein und eine Höhe von 40 Pixel haben. Die Stärke der Tabelle soll 1 Pixel betragen. Außerdem soll der Rahmen in der Farbe Grau abgebildet werden.

Die Ausgabe im Browser: (Erklärung für "cellpadding" weiter unten)

Erklärungen:

bordercolor=#111111    = Farbe des Tabellenrandes. Die Farbe kann frei gewählt werden. (siehe: Farben)