Tabellen

Tabellen werden in HTML-Seiten sehr oft gebraucht. Man kann sie z.B. verwenden um Texte und Bilder zu positionieren, oder eben als Tabellen im eigentlichen Sinne. Es gibt zwar seit langem bessere Möglichkeiten zum Positionieren der einzelnen Elemente, aber für Anfänger ist die Tabelle nach wie vor das Mittel der Wahl. So kann man auch ohne Kenntniss der erweiterten Möglichkeiten duch CSS alles wunschgemäß ausrichten.

Eine Tabelle erzeugt man mit <table>Tabelleninhalt</table> . Wie du in den beiden Bildern leicht erkennen kannst, bewirkt dieses Tag aber noch nicht viel. Außerdem kannst du erkennen, dass NN4 die Tabelle ganz anders interpretiert. In beiden Browsern ist die Standardschrift innerhalb der Tabelle etwas kleiner als außerhalb. Ansonsten bemerkt man von der Tabelle fast nichts. Das liegt unter anderem daran, dass die Tabelle noch keine Zellen enthält. Normalerweise enthält eine Tabelle Tabellenzeilen (Reihen) und diese enthalten Zellen.

Eine Tabellenzeile bzw. Zellenreihe erzeugt man mit <tr> Inhalt</tr>. Eine Tabelle enthält normalerweise mindestens eine solche Zeile. Diese Zeilen enthalten normalerweise jeweils mindestens eine Zelle. Die Zellen erzeugt man mit <td>Inhalt</td>. Sie haben standardmäßig meist einen kleinen Abstand zueinander. Aber das ist vommBrowser abhängig.

Alternativ zu <td>Inhalt</td> kann man auch <th>Inhalt</th> für die Zellen mit dem Tabellenkopf verwenden. Solche Zellen sind zentriert ausgerichtet und der Text ist in Fettdruck. Normale Zellen sind, wie normaler Text, standardmäßig linksbündig ausgerichtet.

Alle auf dieser Seite vorgestellten Tags können Universalattribute enthalten. Beachte auch, dass Schriftzeichenformatierungen und ähnliches in jeder Zelle wiederholt werden müssen, wenn sie dort auch gelten sollen.

Tabelle mit Rahmen

Damit die Tabelle einen Rahmen bekommt ergänzt man das <table>Tag einfach um border.

Durch das Attribut border bekommt die Tabelle und alle Zellen einen sichtbaren Rahmen in Standardfarbe (welche das ist, ist von der Einstellung des Browsers des Betrachters abhängig) mit je 1 Pixel Dicke. Jetzt sieht man auch den kleinen Abstand zwischen den Zellen.

Man kann bei border eine Angabe für die Dicke des äußeren Tabellenrahmens in Pixeln machen (z.B. border="20").

Allgemein gilt: Je schöner eine Tabelle ist, desto unwahrscheinlicher ist es, dass NN4 sie richtig darstellt. (Inzwischen braucht man den NN4 nicht mehr zu beachten. Aber das gleiche gilt in ähnlicher Weise auch heute noch für die vielen verschiedenen Browser und ihre unterschiedlcihen Versionen.) Im folgenden Beispiel zeige ich dir gleich mehrere Attribute auf ein mal.

Abstand zwischen den Zellen, Abstand zum Rahmen, Farbe…

Wenn man zum <table>Tag cellspacing="10" hinzufügt (von space; engl. - Raum, Abstand), beträgt der Abstand zwischen den Zellen 10 Pixel. Erlaubt sind alle positiven ganzen Zahlen einschließlich der 0. Wenn der Abstand 0 beträgt, werden die Zellen direkt nebeneinander dargestellt und die Rahmen der Zellen verschmelzen zu einem einfachen Gitter.

Wenn man zum <table>Tag cellpadding="10" hinzufügt (padding: engl. - Füllung, Polsterung), beträgt der Abstand vom Zellinhalt zum Zellrahmen 10 Pixel. Auch hier sind alle positiven ganzen Zahlen einschließlich der 0 erlaubt.

Wenn man zum <table>Tag bordercolor="#FF0000" hinzufügt (bordercolor; engl. - Randfarbe), wird der Rahmen in fast allen Browsern außer dem NN4 einheitlich in der Farbe #FF0000 dargestellt, was "Rot" entspricht. Erlaubt sind alle Angaben nach den üblichen Regeln für Farbangaben in HTML. Beim IE erhalten außerdem die Zellrahmen, für die keine eigene Farbe festgelegt ist, diese Farbe.

Wenn man zum <tr>Tag bordercolor="blue" hinzufügt, wird der Rahmen aller Zellen in dieser Zellenreihe in fast allen Browsern außer dem NN 4 einheitlich in der Farbe "blue" (Blau) dargestellt. Erlaubt sind alle Angaben nach den üblichen Regeln für Farbangaben in HTML.

Wenn man zum <td>Tag bordercolor="#008000" hinzufügt, wird der Rahmen der betroffenen Zellen in fast allen Browsern außer dem NN 4 einheitlich in der Farbe #008000 (Grün) dargestellt. Erlaubt sind alle Angaben nach den üblichen Regeln für Farbangaben in HTML.

Wenn man zum <table>Tag bgcolor="#FFFF00" hinzufügt (von background color; engl. - Hintergrundfarbe), wird normalerweise der gesamte Tabellenhintergrund in der Farbe #FFFF00 (Gelb) dargestellt. Beim NN 4 nur der Hintergrund der Zellen. Erlaubt sind alle Angaben nach den üblichen Regeln für Farbangaben in HTML.

Wenn man zum <tr>Tag bgcolor="#00FFFF" hinzufügt, wird der Hintergrund aller Zellen in dieser Reihe in der Farbe #00FFFF (Zyan) dargestellt. Erlaubt sind alle Angaben nach den üblichen Regeln für Farbangaben in HTML.

Wenn man zum <td>Tag bgcolor="#00FFFF" hinzufügt, wird der Hintergrund der betroffenen Zellen in der Farbe #00FFFF (Zyan) dargestellt. Erlaubt sind alle Angaben nach den üblichen Regeln für Farbangaben in HTML.

In diesem Beispiel zeige ich dir eine Möglichkeit den Rahmen zweifarbig zu machen. Wie du an den Screenshots siehst, werden Tabellenrahmen oft nur vom IE wie gewünscht dargestellt. Daher empfiehlt sich die Verwendung von Universalattributen.

Das Attribut bordercolorlight legt die Farbe des linken und oberen Tabellenrahmens im IE fest. Das Attribut bordercolordark legt die Farbe des rechten und unteren Tabellenrahmens im IE fest. Die beiden Attribute gehören nicht zum Htmlstandard. Opera, Netscape, Mozilla und andere Browser kennen die Attribute nicht.

Anmerkung: Falls es nicht klar ist - Die gezeigten Screenshots zeigen die selbe HTML-Seite in verschiedenen Browsern!!!

Weiter geht es auf der Seite Tabellen 2

Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: