HTML/Tabellen/Responsive Gestaltung
Text-Info
- 30min
- mittel
- Grundkenntnisse in
● Einstieg in HTML
● Einstieg in CSS
Anhand einer Tabelle soll das Konzept beispielhaft vorgestellt werden. Das zugrundeliegende HTML ist dann auch einfach nur eine Tabelle. Um die Tabelle in verschiedenen Situationen zu sehen, können Sie die Größe des Browserfensters oder aber auch den Zoomfaktor verändern.
Inhaltsverzeichnis
Tabelle ohne Spaltenüberschriften
<table>
<thead>
<tr>
<th colspan="4">CSS im Wandel der Zeit</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>font-size</code></th>
<td><a href="…">wiki.selfhtml.org/wiki/font-size</a></td>
<td>Die Eigenschaft <code>font-size</code> bestimmt die Darstellungsgröße der Schrift.</td>
<td>
<img src="css1.png" alt="Bestandteil von CSS 1">
<img src="css2.png" alt="Bestandteil von CSS 2">
<img src="css21.png" alt="Bestandteil von CSS 2.1">
<img src="css3.png" alt="Bestandteil von CSS 3">
</td>
</tr>
…
</tbody>
</table>
table {
border-collapse: collapse;
border: thin solid;
margin: 2em;
}
tr {
border-top: thin solid;
border-bottom: thin solid;
}
tr:first-child {
border-top: 0 none;
}
th, td {
padding: 1em;
}
thead tr, tr:nth-child(even) {
background-color: lightgrey;
}
th {
font-size: 1.2em;
}
tbody th {
text-align: left;
}
code {
font-size: 1.2em;
}
td:last-child {
min-width: 180px;
text-align: right;
}
img:not(:first-child) {
margin-left: 5px;
}
Anpassung für breite Viewports
Wird das Browserfenster sehr breit, so wird in dieser Tabelle alles einzeilig, was ggf. unschön aussieht. Im Gegensatz dazu sind umbrochene Webadressen möglicherweise unerwünscht.
table {
max-width: 80em;
}
td {
text-align: justify;
}
table a {
white-space: nowrap;
}
Mit diesem CSS wird dafür gesorgt, dass die Tabelle nicht breiter als 80em wird und Linktexte, im konkreten Fall Internetadressen, nicht umbrochen werden. Um den Feldern der 3. Spalte trotz fehlender vertikaler Rahmen auch visuell die gleiche Breite zu geben, wird der Text im Blocksatz ausgerichtet.
Anpassung für schmale Viewports
Wenn jetzt das Browserfenster schmaler gemacht wird, stellt man fest, dass unterhalb einer bestimmten Breite lediglich die dritte Spalte in der Breite verändert wird. Die erste wird nicht verändert, weil innerhalb von code-Elementen nur explizit gesetzte Zeilenumbrüche dargestellt werden, den Linktexten der zweiten Spalte haben wir den Umbruch verboten und die letzte Spalte hat eine Mindestbreite.
Die Tabelle wirkt dann äußerst unproportional.
Abhilfe schaffen gesonderte CSS-Anweisungen, falls die zur Verfügung stehende Breite des Anzeigebereichs unter einen bestimmten Wert fällt. In diesem Fall könnte dieser Wert 50em betragen; das ist Geschmackssache und hängt sehr von den anzuzeigenden Inhalten ab. Wir machen uns sogenannte Medienabfragen, media queries, zunutze.
@media screen and (max-width: 60em) {
table {
width: 100%;
margin: 0;
border: none;
}
td {
hyphens: auto;
}
table a {
white-space: normal;
hyphens: none;
}
}
Dieses CSS wird nur angewendet, wenn das Ausgabemedium ein Bildschirm ist und die Breite des Anzeigebereichs 60em nicht überschreitet. Wir entfernen für die Tabelle Außenabstand und Rahmen und geben ihr die Breite des Viewports. Außerdem schalten wir für die dritte Spalte die automatische Silbentrennung ein und erlauben den Linkelementen, vor einem Schrägstrich umzubrechen.
Breitenänderungen wirken auch hier nur auf die Tabellenfelder der dritten Spalte. Wird der Bildschirm immer schmaler, haben wir wieder eine sehr unproportional wirkende Tabelle.
Container Queries für sehr schmale Viewports
Es ist an der Zeit, die Tabellenstruktur aufzulösen. Dafür nutzen wir anstelle einer Medienabfrage eine Container Query, die nur die Größe des Elternelements abfragt:
.table-container {
container: card / inline-size;
width: 35em; /* Nur zum Testen: Verringern Sie den Wert auf <30em! */
}
@container (max-width: 30em) {
table {
display: block;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
tr, th, td {
display: block;
}
tr {
padding: 1em;
border-top: 0 none;
}
th {
padding: 0;
}
td {
padding: 1em 0 0;
}
}
Die Tabelle erhält nun ein wrapper-Element, dass mit container: card / inline-size; einen containment-context für dieses Eltern-Element erstellt.
Wir machen die Elemente der Tabelle allesamt zu Block-Elementen, während die Eigenschaft width: 100% sicherstellt, dass sie die volle Breite des enthaltenen Elements einnehmen. So werden sie vertikal gestapelt.
Die Eigenschaften overflow-x: auto und -webkit-overflow-scrolling: touch sorgen dafür, dass die Tabelle auf Touch-Geräten horizontal gescrollt werden kann. Dazu sortieren wir die Innenabstände ein wenig um und entfernen nun doppelte Rahmenlinien, weil border-collapse nur auf Elemente wirkt, deren display-Eigenschaft ein table im Namen hat.
Tabelle mit Spaltenüberschriften
Sehr häufig hat man Tabellen, bei denen die Kopfzeile die Überschriften der entsprechenden Spalten darstellt.
<table>
<thead>
<tr>
<th>Rechnungsnummer</th>
<th>Rechnungsdatum</th>
<th>Rechnungshöhe</th>
<th>Status</th>
<th>Zahlungseingang</th>
</tr>
</thead>
<tbody>
<tr>
<th><a href="">201400132</a></th>
<td>11.01.2014</td>
<td>12,50 €</td>
<td class="paid">bezahlt</td>
<td>15.01.2014</td>
</tr>
…
</tbody>
</table>
Im Kopf der Tabelle, also innerhalb von thead befinden sich die Überschriften der einzelnen Spalten. Das erste Feld einer jeden Zeile enthält die Rechnungsnummer, alle weiteren Datenfelder der Zeile beziehen sich auf genau diese Rechnung, deshalb sind sie ebenfalls als Überschrift-Elemente th ausgezeichnet.
table {
border-collapse: collapse;
}
td, th {
padding: 1em;
}
th:first-child {
padding-left: .5em;
}
th:last-child, td:last-child {
padding-right: .5em;
}
thead th {
border-bottom: medium solid lightblue;
}
tbody th {
font-weight: normal;
text-align: left;
}
th a {
background: url(pdf.png) no-repeat left center;
padding: 15px 5px 15px 40px;
}
td {
text-align: center;
}
td:nth-child(3) {
text-align: right;
}
td:nth-child(4) {
color: red;
font-weight: bold;
}
td.paid {
color: green;
font-weight: normal;
}
Wie auch schon im ersten Beispiel nichts besonderes. Die Überschriftszellen lassen sich einzeln ansprechen, etwa thead th die einen, tbody th die anderen. Die 3. Spalte der Tabelle enthält Geldbeträge, diese werden rechtsbündig ausgerichtet und die Information über den Zahlungsstatus wird zusätzlich farbig dargestellt.
Anpassung für breite Viewports
Diese Tabelle enthält nur sehr kurze Eintragungen in den Feldern. Da wir ihr keine konkrete Breite zugeordnet haben, wird sie nur so breit, wie ihr Inhalt es erfordert. Im Gegensatz zum ersten Beispiel sind für breite Browserfenster deshalb keine Anpassungen notwendig.
Anpassung für schmale und sehr schmale Viewports
Dadurch, dass die Tabelle immer so breit wie der Inhalt ist und man aufgrund der kurzen Eintragungen in die Datenfelder auch keinen Zeilenumbruch generieren sollte, sollte die Tabellenstruktur aufgelöst werden.
Die Schwierigkeit ist hier, dass wir den Tabellenkopf, der ja die einzelnen Spaltenüberschriften enthält, auf alle Datensätze verteilen müssen.
@media screen and (max-width: 42em) {
table, tbody, tr {
display: block;
}
thead {
display: none;
}
tr:first-child {
border-top: medium solid lightblue;
}
tr {
border-bottom: medium solid lightblue;
padding: .5em 2em 1em;
}
th::before {
content: "Rechnung: ";
}
td:nth-child(2)::before {
content: "Datum: ";
}
td:nth-child(3)::before {
content: "Höhe: ";
}
td:nth-child(4)::before {
content: "Status: ";
}
td.paid + td::before {
content: "Zahlungseingang: ";
}
tbody th {
display: block;
font-weight: bold;
}
th a {
font-weight: normal;
}
td {
display: inline-block;
min-width: 30%;
padding: .2em 2em;
text-align: left;
}
td:nth-child(3) {
text-align: left;
}
}
@media screen and (max-width: 33em) {
td {
display: block;
}
tr {
padding: .5em .5em 1em;
}
}
Die Tabellenelemente table, tbody und tr machen wir wieder zu Blockelementen, den Tabellenkopf blenden wir aus. Jetzt müssen die Spaltenüberschriften verteilt werden. Dazu erstellen wir before-Pseudoelemente mit den entsprechenden Inhalten. Die Überschriftszellen werden ebenfalls zu Blockelementen formatiert, wohingegen die td-Elemente inline-block-Elemente werden. Durch die Breitenfestlegung passen in diesem Fall zwei td-Elemente nebeneinander.
Wird der Viewport noch schmaler, so werden auch die td-Elemente zu Blockelementen und die Innenabstände der tr-Elemente werden etwas reduziert.
td::before {
content: attr(class);
}
Verwendung von custom properties
Seit einiger Zeit können in CSS benutzerdefinierte Eigenschaften verwendet werden. Damit können wir die notwendigen CSS-Angaben als style-Attribut in das HTML-Dokument schreiben
<table style="
--colheader1: 'Rechnung: ';
--colheader2: 'Datum: ';
--colheader3: 'Höhe: ';
--colheader4: 'Status: ';
--colheader5: 'Zahlungseingang: ';"
>
und die neuen Eigenschaften in der CSS-Ressource verwenden.
th::before {
content: var(--colheader1);
}
td:nth-child(2)::before {
content: var(--colheader2);
}
td:nth-child(3)::before {
content: var(--colheader3);
}
td:nth-child(4)::before {
content: var(--colheader4);
}
td.paid + td::before {
content: var(--colheader5);
}
Auf diese Weise hat man zwar immer noch die Spaltenüberschriften gedoppelt, aber in einem Dokument relativ nah beieinander stehend.
Siehe auch
- CSS/Eigenschaften/Tabellenformatierung/width (evtl. in Artikel integrieren)
- HTML/Tabellen/Gestaltung mit CSS/Hintergrund – Hintergründe in Tabellen
- HTML/Tabellen/Gestaltung mit CSS/table-layout – Breitenangaben mit der table-layout-Eigenschaft steuern
Weblinks
- Responsive, Accessible Table Experiments von Adrian Roselli
