visualisieren können. So können Sie dem Tabellenkopf beispielsweise eine andere Hintergrundfarbe geben oder einzelne Tabellenkörperbereiche durch verstärkte Rahmen voneinander trennen.
Beim Ausdruck langer Tabellen kann der Browser Tabellenkopf und Tabellenfuß auf jeder Seite wiederholen.
Referenzinformationen
Elementreferenz
,
Elementreferenz <
tfoot>
,
Elementreferenz <
tbody>
:
5.1.3 Spalten und Spaltengruppen
Ebenso, wie Sie eine Tabelle horizontal in Tabellenkopf, Tabellenkörperbereiche und Tabellenfuß aufteilen können, können Sie auch Gruppen von Spalten und einzelne Spalten vordefinieren. Der Zweck ist auch in diesem Fall zunächst eine logische Strukturierung, auf die Sie dann mittels CSS Zugriff haben, um beispielsweise einzelne Spaltengruppen oder Spalten zu formatieren.
Beispiel 1
1. Zeile, 1. Spalte |
1. Zeile, 2. Spalte |
1. Zeile, 3. Spalte |
Beispiel 2
1. Zeile, 1. Spalte |
1. Zeile, 2. Spalte |
1. Zeile, 3. Spalte |
Beispiel 3
1. Zeile, 1. Spalte |
1. Zeile, 2. Spalte |
1. Zeile, 3. Spalte |
Erläuterung
Mit den Elementen
colgroup
und
col
können Sie Spaltengruppen bzw. einzelne Spalten einer Tabelle für die spätere Gestaltung oder für den Zugriff mit Scripting vordefinieren. Diese Elemente müssen vor allen Elementen
thead
,
tfoot
,
tbody
oder
tr
notiert werden!
Mit
…
markieren Sie eine Spaltengruppe (colgroup = column group = Spaltengruppe). Dabei haben Sie zwei Möglichkeiten:
Entweder notieren Sie
ohne das Attribut
span
so wie im obigen Beispiel 1. In diesem Fall notieren Sie zwischen
und
für jede Spalte, über die sich die Spaltengruppe erstrecken soll, je ein
-Tag. Das
-Tag ist ein Standalone-Element ohne End-Tag.
Oder Sie notieren
mit dem Attribut
span
, so wie im obigen Beispiel 2, also beispielsweise
. In diesem Fall bleibt der Elementinhalt zwischen
und
leer. Beim
span
-Attribut geben Sie die Anzahl der Spalten an, über die sich die Spaltengruppe erstrecken soll.
Im obigen Beispiel 3 sehen Sie eine gemischte Anwendungsform. Die Tabelle hat drei Spalten. Dabei wird die erste Spalte separat vordefiniert, während die Spalten zwei und drei in einer gemeinsamen Spaltengruppe vereint werden. Eine solche Anordnung ist beispielsweise sinnvoll, wenn Sie für die erste Spalte besondere CSS-Formatierungen anwenden wollen, beispielsweise eine andere Hintergrundfarbe oder eine andere Textausrichtung.
Weitere Hinweise
Anders als in HTML 4.01 dient das Vordefinieren von Spalten in HTML5 nicht mehr vorrangig Performance-Zwecken beim Rendern von Tabellen. Deshalb ist auch das
width
-Attribut entfallen, mit dem früher die Spaltenbreiten vordefiniert wurden. Selbstverständlich gehört die Breitenangabe nach wie vor zu den wichtigsten Eigenschaften vordefinierter Spalten.
Doch ab HTML5 sollten Sie dafür nur noch die CSS-Eigenschaft
width
verwenden.
Mit CSS bzw. CSS-Eigenschaften sind auch andere geeignete Formatierungen anwendbar, etwa Hintergrundfarben, verstärkte Rahmen, Abstände, Ausrichtungen und andere Eigenschaften. Indem Sie entsprechende CSS-Eigenschaften auf die Elemente wie
col
und
colgroup
anwenden, betreffen die Angaben alle Tabellenzellen, die zur entsprechenden Spalte bzw. Spaltengruppe gehören.
Wenn Sie XHTML-Standard-konform für einen XML-Parser arbeiten, müssen Sie daher das
col
-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form
.
Referenzinformationen
Elementreferenz
,
Elementreferenz <
col>
:
5.1.4 Tabellenbeschriftung
Sie können eine Tabelle mit einem Titelbereich versehen. Darin können Sie beispielsweise die Legende zur Tabelle notieren, also die Art, wie die Tabelle zu lesen und wie ihre Daten zu verstehen sind.
Beispiel
Die drei größten Städte Deutschlands haben gewisse
Parallelkulturen entwickelt.
Die Tabelle assoziiert in jeder Zeile ein
Weitere Kostenlose Bücher