Im Beitrag HTML Tabellen 1: Aufbau & Organisation einer HTML Tabelle haben wir zum Beispiel mit style="background-color:red;" schon ein wenig CSS verwendet. Wir wollen uns nun ansehen, wie wir HTML Tabellen stylen können. Mithilfe von CSS werden wir die Breite einer Tabelle sowie ihrer Spalten definieren, einen Zeilenumbruch verhindern und lernen, wie man eine Tabelle responsive gestaltet.
Wenn du vorher noch einmal kurz dein CSS-Grundwissen auffrischen möchtest, kannst du das zum Beispiel hier tun.
HTML Tabellen stylen: Breitenangaben
Mit der CSS-Eigenschaft width kann man die Breite eines Elements vorgeben. Die Eigenschaftswerte können relative Werte (zum Beispiel Prozent) oder absolute Werte (zum Beispiel px) sein.
Prozentangaben sind abhängig von der Fensterbreite, wobei width: 100 % der gesamten Breite des Elternelements* entspricht. Angaben in px sind feste Werte.
Breite einer Tabelle
Um die Breite einer Tabelle vorzugeben, steuert man mit CSS den HTML-Tag table an.
Mit Inline CSS sieht das zum Beispiel so aus:
<table style="width: 80%;">
<caption>Diese Tabelle hat eine Breite von 80%</caption>
<tbody>
<tr>
<th>Zellenüberschrift 1</th>
<th>Zellenüberschrift 2</th>
<th>Zellenüberschrift 3</th>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
<tr>
<td>Zelle 7</td>
<td>Zelle 8</td>
<td>Zelle 9</td>
</tr>
</tbody>
</table>
| Zellenüberschrift 1 | Zellenüberschrift 2 | Zellenüberschrift 3 |
|---|---|---|
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
Um das gleiche Ergebnis mithilfe eines CSS-Stylesheets zu erhalten, trägt man im Stylesheet folgenden Code ein:
table {
width: 80%;
}
Die Definition der Breite mittels CSS beachtet die Breite des Inhalts nicht. Das sieht man im obigen Beispiel zum Beispiel darin, dass die Zellenüberschriften nun zweizeilig sind.
Spaltenbreite
Auch die Breite der einzelnen Spalten einer Tabelle kann man per CSS definieren.
Es genügt dabei, die Breite der ersten Zelle der Spalte zu definieren, um die gesamte Spaltenbreite festzusetzen.
<table style="width: 80%;">
<caption>Diese Tabelle hat eine Breite von 80%</caption>
<tbody>
<tr>
<th style="width: 120px;">Diese Spalte ist 120px breit</th>
<th>Zellenüberschrift 2</th>
<th>Zellenüberschrift 3</th>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
<tr>
<td>Zelle 7</td>
<td>Zelle 8</td>
<td>Zelle 9</td>
</tr>
</tbody>
</table>
| Diese Spalte ist 120px breit | Zellenüberschrift 2 | Zellenüberschrift 3 |
|---|---|---|
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
Im obigen Beispiel haben wir nur die Breite der ersten Spalte angegeben mit 120px. Die beiden übrigen Spalten haben sich automatisch der Veränderung angepasst und die restliche zur Verfügung stehende Breite gleichmäßig unter sich aufgeteilt.
Natürlich kann man auch die Breite weiterer Spalten definieren:
<table style="width: 80%;">
<caption>Diese Tabelle hat eine Breite von 80%</caption>
<tbody>
<tr>
<th style="width: 120px;">Diese Spalte ist 120px breit</th>
<th>Zellenüberschrift 2</th>
<th style="width: 80px;">Diese Spalte ist 80px breit</th>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
<tr>
<td>Zelle 7</td>
<td>Zelle 8</td>
<td>Zelle 9</td>
</tr>
</tbody>
</table>
| Diese Spalte ist 120px breit | Zellenüberschrift 2 | Diese Spalte ist 80px breit |
|---|---|---|
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
Hier haben wir die Breiten der ersten und der dritten Spalte definiert. Die mittlere Spalte hat sich automatisch angepasst und nimmt den gesamten übrig bleibenden Raum ein.
Beachte:
Alle Spalten zusammen können nur so breit sein wie die gesamte Tabelle.
Angabe der Spaltenbreite in Prozenten
Gibst du die Spaltenbreite in Prozenten an, bedeutet das, dass alle Spaltenbreiten zusammen 100% ergeben müssen. Das gilt unabhängig von der Gesamtbreite der Tabelle.
Bei der Angabe von Spaltenbreiten in Prozenten benötigt man außerdem <colgroup>.
<table style="width: 80%;">
<caption>Diese Tabelle hat eine Breite von 80%</caption>
<colgroup>
<col style="width: 20%;" span="1"/>
<col style="width: 30%;" span="1"/>
<col style="width: 50%;" span="1"/>
</colgroup>
<tbody>
<tr>
<th>Diese Spalte ist 20% breit</th>
<th>Diese Spalte ist 30% breit</th>
<th>Diese Spalte ist 50% breit</th>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
<tr>
<td>Zelle 7</td>
<td>Zelle 8</td>
<td>Zelle 9</td>
</tr>
</tbody>
</table>
Alternativ zur Verwendung von <colgroup> kannst du auch table-layout: fixed; verwenden. Dann sieht der Code so aus:
<table style="width: 80%; table-layout: fixed;">
<caption>Diese Tabelle hat eine Breite von 80%</caption>
<tbody>
<tr>
<th style="width: 20%;">Diese Spalte ist 20% breit</th>
<th stlye="width: 30%;">Diese Spalte ist 30% breit</th>
<th style="width: 50%;">Diese Spalte ist 50% breit</th>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
<tr>
<td>Zelle 7</td>
<td>Zelle 8</td>
<td>Zelle 9</td>
</tr>
</tbody>
</table>
Die erste Spalte hat eine Breite von 20%, die zweite Spalte 30% und die dritte Spalte 50%. Zusammen ergibt das 100% und die Tabelle sieht aus wie folgt:
| Diese Spalte ist 20% breit | Diese Spalte ist 30% breit | Diese Spalte ist 50% breit |
|---|---|---|
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
Angabe der Spaltenbreite in px
Soll die Spaltenbreite in px angegeben werden, sollte auch die Tabellenbreite in px angegeben werden. Nur so kannst du sehen, wie viele px dir für die Spalten zur Verfügung stehen.
Ist die Tabelle beispielsweise 600px breit, stehen für die Spalten insgesamt 600px zur Verfügung.
<table style="width: 600px;">
<caption>Diese Tabelle hat eine Breite von 600px</caption>
<tbody>
<tr>
<th style="width: 100px;">Diese Spalte ist 100px breit</th>
<th style="width: 150px;">Diese Spalte ist 150px breit</th>
<th style="width: 250px;">Diese Spalte ist 250px breit</th>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
<tr>
<td>Zelle 7</td>
<td>Zelle 8</td>
<td>Zelle 9</td>
</tr>
</tbody>
</table>
Die erste Spalte hat eine Breite von 100px, die zweite Spalte 150px und die dritte Spalte 250px. Zusammen ergibt das 600px und die Tabelle sieht aus wie folgt:
| Diese Spalte ist 100px breit | Diese Spalte ist 150px breit | Diese Spalte ist 250px breit |
|---|---|---|
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
Spaltenbreite ohne Angaben
Wenn man keine Spaltenbreite definiert, richtet sich die Spaltenbreite nach dem Inhalt:
<table>
<caption>Tabellenüberschrift</caption>
<tbody>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 2</th>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
<tr>
<td>Zelle 7</td>
<td>Hier steht besonders viel Inhalt mit besonders vielen Wörter, damit man sieht, wie hoch die Zeile durch den Inhalt wird. Natürlich könnte man auch ein Foto einsetzen.</td>
<td>Zelle 9</td>
</tr>
</tbody>
</table>
| Überschrift 1 | Überschrift 2 | Überschrift 3 |
|---|---|---|
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Hier steht besonders viel Inhalt mit besonders vielen Wörter, damit man sieht, wie hoch die Zeile durch den Inhalt wird. Natürlich könnte man auch ein Foto einsetzen. | Zelle 9 |
Da wir bei obiger Tabelle keine Höhenangaben für die Zeilen gemacht haben, richtet sich auch die Zeilenhöhe nach dem Inhalt.
HTML Tabellen stylen: Zeilenhöhe definieren
So einfach wie man die Breite von Tabelle und Spalten mit CSS definieren kann, kann man auch die Zeilenhöhe definieren. Dafür steuert man mit CSS die HTML-Tags <caption>,<th> oder <tr> an – je nachdem, ob man die Höhe der Tabellenüberschrift <caption>, der Spaltenüberschrift <th> oder die Höhe einer Zeile <tr> angeben möchte.
Die CSS-Eigenschaft, die man verwendet, heißt height.
<table>
<caption>Tabellenüberschrift</caption>
<tbody>
<tr>
<th>Spaltenüberschrift 1</th>
<th>Spaltenüberschrift 2</th>
<th>Spaltenüberschrift 2</th>
</tr>
<tr style="height: 100px;">
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
<tr>
<td>Zelle 7</td>
<td>Zelle 8</td>
<td>Zelle 9</td>
</tr>
</tbody>
</table>
| Spaltenüberschrift 1 | Spaltenüberschrift 2 | Spaltenüberschrift 2 |
|---|---|---|
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
Macht man keinerlei Höhenangabe, richtet sich die Höhe der Zeile nach dem Inhalt:
<table>
<caption>Tabellenüberschrift</caption>
<tbody>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 2</th>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
<tr>
<td>Zelle 7</td>
<td>Hier steht besonders viel Inhalt, damit man sieht, wie hoch die Zeile durch den Inhalt wird.</td>
<td>Zelle 9</td>
</tr>
</tbody>
</table>
| Überschrift 1 | Überschrift 2 | Überschrift 3 |
|---|---|---|
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Hier steht besonders viel Inhalt, damit man sieht, wie hoch die Zeile durch den Inhalt wird. | Zelle 9 |
Da wir bei obiger Tabelle keine Breitenangaben für die Spalten gemacht haben, richtet sich auch die Spaltenbreite nach dem Inhalt.
Zeilenumbruch verhindern
Es kann vorkommen, dass man einen Zeilenumbruch verhindern möchte. Das macht man ebenfalls mit CSS und zwar mit der Eigenschaft white-space und dem Eigenschaftswert nowrap.
Für obiges Beispiel sieht das dann so aus:
<table>
<caption>Tabellenüberschrift</caption>
<tbody>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 2</th>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
<tr>
<td>Zelle 7</td>
<td style="white-space: nowrap;">Hier steht besonders viel Inhalt, damit man sieht, was bei Verwendung von nowrap passiert.</td>
<td>Zelle 9</td>
</tr>
</tbody>
</table>
| Überschrift 1 | Überschrift 2 | Überschrift 2 |
|---|---|---|
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Hier steht besonders viel Inhalt, damit man sieht, was bei Verwendung von nowrap passiert. | Zelle 9 |
Da wir im Code mit white-space: nowrap; festgelegt haben, dass der Text nicht umgebrochen werden darf, wird die Spalte inklusive der Tabelle so breit, dass der gesamte Text ohne Umbruch hineinpasst. Oft sieht das unschön aus.
Deshalb sollte man diesen CSS-Befehl nur mit Vorsicht einsetzen.
HTML Tabellen responsive gestalten
Wenn der Inhalt einer Tabelle so umfangreich ist, dass es schwer wird, diesen auf mobilen Endgeräten gut lesbar zu gestalten, kann man mit einer horizontalen Bildlaufleiste (oder Scrollbar) Abhilfe schaffen. Die Bildlaufleiste wird nur dann angezeigt, wenn der Bildschirm zu klein ist, um den gesamten Inhalt anzuzeigen.
Um die Tabelle responsive zu gestalten, fügt man ein Containerelement wie zum Beispiel <div> um die Tabelle herum hinzu und trägt dort folgendes CSS ein: overflow-x:auto.
Das sieht dann so aus:
<div style="overflow-x: auto;">
<table style="width: 1000px;">
<caption>Tabellenüberschrift</caption>
<tbody>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 3</th>
<th>Überschrift 4</th>
<th>Überschrift 5</th>
<th>Überschrift 6</th>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
<td>Zelle 7</td>
<td>Zelle 8</td>
<td>Zelle 9</td>
</tr>
<tr>
<td>Zelle 10</td>
<td>Zelle 11</td>
<td>Zelle 12</td>
<td>Zelle 13</td>
<td>Zelle 14</td>
<td>Zelle 15</td>
</tr>
</tbody>
</table>
</div>
| Überschrift 1 | Überschrift 2 | Überschrift 3 | Überschrift 4 | Überschrift 5 | Überschrift 6 |
|---|---|---|---|---|---|
| Zelle 4 | Zelle 5 | Zelle 6 | Zelle 7 | Zelle 8 | Zelle 9 |
| Zelle 10 | Zelle 11 | Zelle 12 | Zelle 13 | Zelle 14 | Zelle 15 |
Beachte:
In OS X Lion (auf Mac) sind Bildlaufleisten standardmäßig ausgeblendet und werden nur angezeigt, wenn sie verwendet werden (auch wenn „overflow:scroll“ eingestellt ist).
*Ein Elternelement ist das HTML-Element, das dasjenige Element, das man bearbeiten möchte, umschließt. So ist in einer HTML-Tabelle zum Beispiel <table> das Elternelement von <tbody>. Umgekehrt könnte man auch sagen, dass <tbody> das Kind von <table> ist.
