Tabellen und Spalten

Beispiele zur Tabellenformatierung mit <colgroup> und <col>

Mit Hilfe des <colgroup>-Elements ( = Gruppe von Spalten) kann die Anzahl der Spalten ( = <col>) und deren Breite festgelegt werden. Im folgenden werden 3 Varianten vorgestellt.

Beispiel 1 - <col> mit Prozentangaben

Der einleitende <table>-Tag sieht so aus:

Die Eigenschaften des Tabellenrahmens werden über das <style>-Attribut festgelegt: Der Rahmen ist 3 Pixel breit, durchgezogen und blau. Die Tabelle nimmt 80 % des Bildschirms ein. Beachten Sie, dass das Attribut <border> der Tabelle einen Rahmen um die Tabelle bewirkt. Ob die Zellen der Tabelle einen Rahmen haben, wird bei den Eigenschaften der Zellen festgelegt.

Der <colgroup>-Abschnitt sieht so aus:

Für die Tabelle werden 3 Spalten festgelegt und jeder mit Hilfe des Attributs <width> eine bestimmte Breite zugewiesen, hier in Prozent der vorher definierten Tabellenbreite (80% des Bildschirms). Das Ergebnis, erweitert um drei Zeilen, sieht so aus.

Beispiel 2 - <colgroup> kombiniert mit <span>

In der folgenden Beispieltabelle wird die Spaltenbreite nicht für jede Spalte einzeln, sondern für alle Spalten auf einmal festgelegt. Dazu wird im <colgroup>-Tag das <span>-Attribut genutzt. Besonders geeignet ist diese Methode für das Festlegen von Spalten mit gleicher Breite. Der Quellcode sieht so aus:

Beispiel 3 - <colgroup> mit Angaben der Spaltenbreiten im Verhältnis zueinander

Zum Festlegen der Spaltenbreite kann man das Verhältnis der Spaltenbreiten angeben. Der Quellcode kann z.B. so aussehen:

Falls der Browser in der Lage ist, diese Anweisung umzusetzen, sollte die 1. Spalte ein Viertel, die 2. zwei Viertel und die 3. wieder ein Viertel der Tabelle breit sein. Der Internet Explorer tut sich damit schwer, während Netscape 6.xx oder Firefox keine Probleme haben.

Untersuchen Sie die Tabellendarstellung mit verschiedenen Browsern - Sie werden sehen, dass es Unterschiede in der Umsetzung gibt. (Die Tabelle mit den unterschiedlichen Rahmen auf der Seite intlinks.htm sieht auch so ziemlich in jedem Browser anders aus.) Da kann man leider nicht viel dagegen machen.