Websiteentwicklung: CSS: Tabellen

Auf Tabellenelemente wirken die meisten Eigenschaften wie auf andere Elemente ähnlichen Typs. Aufgrund der besonderen inhaltlichen Bedeutung haben aber einige Eigenschaften eine besondere Bedeutung, die meist jeweils bei der jeweiligen Eigenschaft behandelt wird.

Allerdings gibt es auch einige Eigenschaften, die speziell für Tabellen bestimmt sind, die hier besprochen werden, dazu kommen jene Werte von display, die die Präsentation beliebiger Elemente als Tabellenelemente bewirken können.

Anzeige beliebiger Elemente als Tabellenelemente

Die Eigenschaft display hat unter anderem einige Werte, mit welchen beliebige Elemente als Tabellenelemente präsentiert werden können. Das ist unter anderem nützlich, wenn bei einem dem Darstellungsprogramm unbekannten XML-Format die Präsentation als Tabelle bewirkt werden soll - auch bei der Stilvorlage des Darstellungsprogrammes selbst etwa für (X)HTML kann so die Funktion einer Tabelle erreicht werden.

Die betreffenden Werte sind:

'table' - die Tabelle selbst als Block-Element
'inline-table' - die Tabelle selbst als inzeilige Blockelement, ähnlich einem ersetzten Element wie einem Bild
'table-row' Tabellenzeile, entsprechend (X)HTML tr
'table-row-group' Gruppe von Tabellenzeilen, entsprechend (X)HTML tbody
'table-header-group' Gruppe von Tabellenzeilen, entsprechend (X)HTML thead
'table-footer-group' Gruppe von Tabellenzeilen, entsprechend (X)HTML tfoot
'table-column' Tabellenspalte, entsprechend (X)HTML col
'table-column-group' Gruppe von Tabellenspalten, entsprechend (X)HTML colgroup
'table-cell' Tabellenzelle, entsprechend (X)HTML td und th
'table-caption' Tabellenbeschriftung, entsprechend (X)HTML caption

Elemente mit den Werten 'table-column' oder 'table-column-group' werden selbst nicht direkt dargestellt, sind aber nützlich, um den Spalten oder Spaltengruppen bestimmte Eigenschaften zu verleihen. Dies sind die Eigenschaften border, falls border-collapse den Wert 'collapse' hat, background, width und visibility mit dem Wert 'collapse'.

Tabellenbeschriftung

Mit der Eigenschaft caption-side kann angegeben werden, wie die Tabellenbeschriftung zur Tabelle angeordnet werden soll.

Mögliche Werte sind:

'inherit' - geerbt
'top' - Anordnung über der Tabelle (Initialwert)
'bottom' - Anordnung unter der Tabelle
'left' - Anordnung links neben der Tabelle (nicht in CSS 2.1)
'right' - Anordnung rechts neben der Tabelle (nicht in CSS 2.1)

Die Eigenschaft wird vererbt und ist anwendbar auf visuelle Medien und Elemente mit dem Wert 'table-caption' für display.

Die Beschriftungen werden als Block-Boxen angesehen, die gegebenenfalls Eigenschaften von der Tabelle erben, in welcher sie stehen.

Beispiel:

caption { 
  caption-side: bottom; 
  text-align: center
}

Layout der Tabelle

Ein optimales Layout einer Tabelle ist ein komplexer Vorgang, der mit CSS auch nicht präzise kontrolliert werden kann. Im Zweifelsfalle kann ein Darstellungsprogramm die Angaben der Stilvorlage immer zugunsten einer besseren Lesbarkeit ignorieren. Dennoch kann auf das Layout in gewissem Umfange Einfluß genommen werden.

Mit der Eigenschaft table-layout kann angegeben werden, ob eher ein schneller oder lieber ein optimaler, automatischer Algorithmus verwendet werden soll.

Mögliche Wert sind

'inherit' - geerbt
'auto' - automatischer Algorithmus, Initialwert
'fixed' - Algorithmus für ein fixiertes Layout, sie folgender Text

Die Eigenschaft wird nicht vererbt und ist anwendbar auf Elemente mit der Eigenschaft display mit dem Wert 'table' oder 'inline-table' bei visuellen Medien.

Beim Layout-Typ 'fixed' handelt es sich um einen schnellen Algorithmus, bei dem die Breite der Tabelle nicht vom Inhalt abhängt. Der Typ findet nur Anwendung, wenn die Breite der Tabelle mit dem Attribut width explizit vorgegeben wird. Sind Breiten für Spalten explizit angegeben, werden diese verwendet. Der verbleibende Platz, abzüglich Rahmen und Abstände wird dann gleichmäßig auf die verbleibenden Spalten aufgeteilt. Ist die Breite der Tabelle größer als die Summe von Spalten, Rahmen und Abständen, wird der verbleibende Platz gleichmäßig auf die Spalten verteilt. Ansonsten wird die Breite der Tabelle vergrößert, so dass Spalten, Rahmen und Abstände hineinpassen.

Der Typ 'auto' ist nicht genau festgelegt. Jedenfalls wird dabei immer überprüft, ob der Inhalt jeder Zeile von der Breite her in die Zelle paßt, sonst wird die Spalte entsprechend vergrößert - insbesondere tritt das auf, wenn inzeiliger Inhalt wir lange Wörter oder Bilder breiter sind als die angegebene Breite einer Spalte oder Zelle. Daraus ergibt sich dann ein langsamerer Prozeß, der allerdings vermeidet, dass sich Inhalte von Zellen überlappen.

Verhalten bei leeren Zellen

Eine Zelle wird als leer angesehen, wenn sie nicht sichtbar ist oder außer maximal einem kollabierten Leerzeichen nichts enthält.

Für solche leeren Zellen kann mit der Eigenschaft empty-cells angegeben werden, ob Rahmen und Hintergrund dargestellt werden sollen oder nicht.

Mögliche Werte sind:

'inherit' - geerbt
'show' - Rahmen und Hintergrund anzeigen. Initialwert
'hide' - Rahmen und Hintergrund nicht anzeigen

Die Eigenschaft wird vererbt und ist anwendbar auf Elemente mit dem Wert 'table-cell' für display bei visuellen Medien.

Zurück zu Cursor |

Hoch zu CSS |

Vor zu Listen