Tabellen mit HTML und CSS

Verwandte Themen


Einfache HTML-Tabelle

HTML-Quelltext der links gezeigten Tabelle:
<table>
<tr>
<td>R1C1</td>
<td>R1C2</td>
<td>R1C3</td>
</tr>
<tr>
<td>R2C1</td>
<td>R2C2</td>
<td>R2C3</td>
</tr>
</table>

Programmierung einfacher Tabellen: SelfHTML (Aufbau, Gestaltung), W3Schools


Breite und Höhe

Eine Tabelle nimmt das kleinste Format an, das notwendig ist, um alle darin enthaltenen Daten anzuzeigen.
Das bedeutet:
Die Breite jeder Zelle richtet sich nach der maximal erforderlichen Breite der gleichen Spalte.
Die Höhe jeder Zelle richtet sich nach der maximalen Höhe der gleichen Zeile.

Diese einfachen Regeln werden geändert, wenn eine Tabelle an Grenzen stößt: Wenn die verfügbare Breite nicht ausreicht, dann werden Zeilen-Umbrüche (Neue Zeilen) in die Zellen eingefügt. Wenn die Höhe nicht ausreicht, dann wird ein Rollbalken (Scroll-bar) eingefügt.

Alternativ kann man Breite und Höhe sowohl der Tabelle als auch der Zellen mit CSS-Eigenschaften festlegen, z.B. mit
<table style="width:100%">
<table style="width:500px;">
oder für eine Zelle = für alle Zellen dieser Spalte:
<td style="width:50%;">
<td style="width:100px;">

Man sollte keine widersprüchlichen CSS-Anweisungen programmieren:
Das Ergebnis kann dann je nach Browser und Version anders aussehen.

CSS-Tabelle


Das Ergebnis der beiden Methoden unterscheidet sich bei sauberer Programmierung nicht. Das CSS-Modell passt allerdings besser zur internen Programmierung moderner Browser.


CSS-Tabelle

R1C1
R1C2
R1C3
R2C1
R2C2
R2C3

CSS-Quelltext

<style type="text/css">
div.table {display:table; border-collapse:collapse;}
div.tr {display:table-row;}
div.td {display:table-cell; border:1px solid #666;}
</style>

HTML-Quelltext

<div class="table">
<div class="tr">
<div class="td">R1C1</div>
<div class="td">R1C2</div>
<div class="td">R1C3</div>
</div>
<div class="tr">
<div class="td">R2C1</div>
<div class="td">R2C2</div>
<div class="td">R2C3</div>
</div>
</div>


Die Vorteile der relativ neuen CSS-Variante zeigen sich erst bei professionellen Ansprüchen.

CSS bietet mehr Möglichkeiten der Gestaltung, insbesondere in komplizierten Fällen.
Es ist möglich, das Layout dynamisch anzupassen (z.B. an SmartPhones).
Bessere Zukunfts-Sicherheit. Allerdings: Traditionelle Tabellen werden wohl noch sehr lange unterstützt.

Tipp: Die Namen der CSS-Klassen wurden hier genau passend zu den jeweiligen HTML-Elementen gewählt. Das ist kein Widerspruch, sondern soll die Assoziation erleichtern.

Spalten-Überschrift

Für CSS-Tabellen definiert man bei Bedarf eine (zusätzliche) Klasse:
<style>
div.td, div.th {display:table-cell;}
div.th {font-weight:bold; text-align:center;}
</style>
HTML-Quelltext:
<div class="table">
<div class="tr">
<div class="th">x</div>
<div class="th">y</div>
</div>
<div class="tr">
<div class="td">12</div>
<div class="td">23</div>
</div>
<div class="tr">
<div class="td">123</div>
<div class="td">234</div>
</div>
</div>

Ausrichtung

Ohne besondere Maßnahmen werden Daten immer links-bündig ausgerichtet.

Mit der CSS-Eigenschaft text-align kann man die Ausrichtung ändern. Das ist typisch bei Zahlen-Daten notwendig, die man immer rechts-bündig anzeigen sollte.


<table>
</td></tr>
<tr><td style="text-align:left;"> Links
<tr><td style="text-align:center;">
</td></tr>
Zentriert
Rechts </td></tr>
<tr><td style="text-align:right;">
</table>


Regel für alle Zellen aller Tabellen

Wenn alle Tabellen einer Webseite nur Zahlen enthalten, dann kann man diese Regel zentral vorgeben:
<style>
td{text-align:right;}
</style>
In diesem Fall braucht man in den <td>-Elementen keine Attribute:
<td> 567</td>


Regeln für einzelne Tabellen-Spalten

Wenn nur bestimmte Spalten Zahlenwerte enthalten, dann ist die zentrale Definition der Regel noch komplizierter:
<style>
#tab8 tr td:first-child+td{text-align:right;}
</style>
Zur Anwendung genügt die Angabe des id-Attributs im <table>-Element:
<table id="tab8">
<tr><td>Anna </td><td> 123</td></tr>
<tr><td>Berta </td><td> 234 </td></tr>
</table>
Die rot angezeigte CSS-Regel bezeichnet <td>-Elemente, die im Element mit id=tab8 auf ein <tr>-Element und danach auf das erste <td>-Element folgen: Eine komplizierte Umschreibung für die 2. Spalte der Tabelle.
Die Details der CSS-Syntax werden hier nicht kommentiert.

CSS-Selektoren bei SelfHTML oder W3Schools


Bei der Anwendung erhält ohnehin jedes <div>-Element ein class-Attribut. Es ist daher kein zusätzlicher Aufwand, um für rechtsbündige Zellen einfach eine andere Klasse zu programmieren:
<div class="table">
<div class="tr">
<div class="td">Anna </div>
<div class="tdr"> 12</div>
</div>
<div class="tr">
<div class="td">Bert </div>
<div class="tdr"> 234</div>
</div>
</div>

Zusammenfassung von Zellen

R1C1R1C2R1C3
R2C1R2C2
R3C1R3C2R3C3
R4C1R4C2
R5C1R5C2
R6C1

Beispiel

In Zelle R2C2 sind 2 Spalten zusammengefasst.

In Zelle R3C2 sind 2 Zeilen zusammengefasst.

In Zelle R5C1 sind je 2 Zeilen und Spalten zusammengefasst.


HTML-Quelltext des Beispiels

Zusammenfassungen werden mit den Attributen colspan und / oder rowspan angegeben.
<table>
<tr>
<td>R1C1</td> <td>R1C2</td> <td>R1C3</td>
</tr>
<tr>
<td>R2C1</td>
<td colspan="2">R2C2</td>
</tr>
<tr>
<td>R3C1</td>
<td rowspan="2">R3C2</td>
<td>R3C3</td>
</tr>
<tr>
<td>R4C1</td> <td>R4C2</td>
</tr>
<tr>
<td rowspan="2" colspan="2">R5C1</td>
<td>R5C2</td>
</tr>
<tr> <td>R6C1</td> </tr>
</table>

Scroll-Tabelle


Probleme und Lösungen

Man muss die erste Zeile (Spalten-Titel) vom Daten-Teil der Tabelle getrennt programmieren. Der Daten-Teil wird in der Höhe begrenzt und mit einem vertikalen Rollbalken ausgestattet.

Dazu kann man klassische ↑ HTML-<table>-Tabellen ebenso verwenden wie ↑ CSS-Tabellen mit <div>-Elementen.

Die Spalten-Breite des Daten-Teils verringert sich um die Breite des Rollbalkens. Um genau diesen Betrag muss man auch die Breite der Titel-Zeile reduzieren. Das ist schwierig, weil die Rollbalken je nach Browser leider unterschiedlich breit sind.



Das Beispiel verwendet 2 getrennte CSS-Tabellen. Die Breite der 1.Tabelle mit den Spalten-Überschriften wird um einen fixen Betrag (hier: 15px) verringert.

▶  Mit diesem Link wird das ↗ Beispiel in einem eigenen Browser-Tab geladen. Man kann es isoliert ausprobieren, herunterladen oder mit RechtsKlick seinen HTML+CSS-Quelltext ansehen.

▶  Mit diesem Link wird der ↗ HTML+CSS-Quelltext angezeigt.


<div id="table_container">
<div id="thead_container">
<div id="thead_table" class="table">
<!-- Spalten-Titel -->
</div>
</div>
<div id="tbody_container">
<div id="tbody_table" class="table">
<!-- Daten -->
</div>
<div>
</div>



Die Breite der Titel-Tabelle wird um 15px verringert. Damit wird der vertikale Rollbalken kompensiert:
#thead_table{width:calc(100% - 15px);}
CSS bietet mit der Funktion calc() eine Möglichkeit zur Berechnung von Eigenschaften. Der Wert von 15px ist ein willkürlicher Mittelwert von verschiedenen Browsern und Versionen.

Ergebnis:  Die Ränder der Container und Zellen passen mit Abweichungen von maximal ± 3 Pixeln zueinander. Wenn man die Ränder der Überschriften (so wie hier) weglässt, dann ist dieser Fehler allerdings nicht auffällig.

Dieses statische Beispiel braucht keine Javascript-Programme und funktioniert mit allen modernen Browsern.



In dieser Version wird die Breite des Rollbalkens mit einer Javascript-Funktion gemessen und kompensiert. Die Spalten-Überschriften werden ohne Rand angezeigt, daher sind allfällige kleine Differenzen kaum sichtbar.

▶  Mit diesem Link wird das ↗ Beispiel in einem eigenen Browser-Tab geladen. Man kann es isoliert ausprobieren, herunterladen oder mit RechtsKlick seinen HTML+CSS+Javascript-Quelltext ansehen.

▶  Mit diesem Link wird der ↗ HTML+CSS-Quelltext angezeigt.

Ergebnis:  Überschrift und Daten-Tabelle passen mit Abweichungen von maximal ± 1 Pixel zueinander. Diese Version funktioniert jedoch nicht, wenn Javascript in der Browser-Konfiguration unterbunden wurde.



Die onload-Funktion führt nur 1 Anweisung aus: Sie startet die Funktion table_adjust(). Die beiden Funktionen wurden getrennt, weil die onload-Funktion meist auch andere Aufgaben hat.

Die Javascript-Funktion table_adjust() adressiert jede der beiden getrennt programmierten Tabellen und misst mit der Eigenschaft offsetWidth ihre reale Breite.
Die Differenz beträgt typisch 12...16 Pixel. Um diesen Betrag wird die Breite der Überschriften-Tabelle verringert.