CSS, HTML und Javascript mit {stil}

CSS für Tabellen

CSS für Tabllen

Auf font-variant-numeric haben technische Tabellen und Preistabellen viele Jahre gewartet: Mit tabular-nums setzt CSS Zahlenkolonnen untereinander wie bei einem Monospace-Font.

CSS table-layout: fixed gibt den vorgegebenen Maßen der Tabelle Vorrang vor dem Inhalt, damit übergroße und überlange Inhalte den Rahmen der Tabelle nicht verschieben.

CSS caption-side legt die Position der Tabellenlegende (caption) fest – ob die Legende unter oder über die Tabelle gesetzt werden soll. Die Eigenschaft ist für die Benutzung mit dem <caption>-Tag gedacht.

HTML regelt gruppiert mit Tags wie colgroup und colspan Tabellenzellen innerhalb des table-Tags spaltenweise.

font-variant-numeric: tabular-nums

Das rechtsbündige Ausrichten von Tabellenspalten reicht bei Zahlenkolonnen nicht ohne Weiteres: Wenn die Schrift proportionale Ziffern nutzt, sind die Ziffern unterschiedlich breit und die Tabelle ist schlecht lesbar.

Relative spectral power distribution of CIE Standard Illuminant A
λ Standard Illuminant A
300 0,930483
305 1,128210
310 1,357690
315 1,622190
320 1,925080
325 2,269800

War es ISBN 3-89343-185-3 oder ISBN 3-551-01374-8?

War es ISBN 3-89343-185-3 oder ISBN 3-551-01374-8?

Statt mit zwei Schriften zu hantieren, um Ziffern in Tabellen gleich breit zu setzen, aber im Fließtext mit kompakten und lückenlosen Ziffern proportional, brauchen wir eine Schrift, die beide Varianten für font-variant-numeric umgesetzt, und einen Browser, der CSS font-variant-numeric unterstützt.

font-variant-numeric
Screenshot: tabular-nums (Apple System Font)
body {
   font-variant-numeric: tabular-nums;
   font-family: system, -apple-system, BlinkMacSystemFont, 'Open Sans', sans-serif;
}

Browser-Unterstützung: Chrome, Firefox, Safari. Mehr zu font-variant-numeric

CSS table-layout: fixed

Tabellenzellen nehmen ohne weitere Formatierung immer den Raum ein, den sie für die Darstellung des Inhalts benötigen. Lange Wörter oder große Bilder dehnen die Tabellenzelle. Weder <td width="20"> noch <td style="width:20px"> sind in der Lage, Inhalte von mehr als 20 Pixeln Breite zu bremsen. Die Tabellenzelle wird immer versuchen, sich an den Inhalt anzupassen.

table-layout
auto | fixed | inherit
auto (Voreinstellung)
weist den Browser an, die Tabelle abhängig von den Inhalten der Tabelle aufzubauen. Der Browser muss den gesamten Inhalt der Tabelle laden, bevor die Tabellendimensionen berechnet werden können. Das verzögert den Aufbau der Seite.
fixed
weist den Browser an, die Tabelle entsprechend der Tabellenbreite (width), der Breite der Spalten, der Rahmen und dem angegebenen Raum zwischen den Zellen zu berechnen. Das Layout der Tabelle hängt nicht vom Inhalt ab und die Tabelle kann schneller dargestellt werden.

Hinweis: Browser, die table-layout: fixed unterstützen, schneiden entweder überbreite Inhalte ab oder lassen den Inhalt in benachbarte Zellen überlaufen.

Die Angabe von height wird nur eingehalten, wenn die Inhalte die vorgesehene Höhe nicht überschreiten.

table { table-layout: fixed } 
Tabellen mit table-layout: fixed werden schneller dargestellt, da der Browser keine Zeit für die Brechnung der Tabellenbreite braucht.
RechtsschutzversichtungsvertreterSupercalifragilisticexpialidociousWanderpokalpoliermittelallergie
Gaudeamus igitur iuvenes dum sumus post iucundam iuventutem, post molestam senectutem, nos habebit humus!

Wenn ein Bild sich über die Grenzen einer Tabellenzelle in einer Tabelle mit table-layout:fixed erstreckt, könnte overflow: scroll die Tabelle in Form halten. Diese Möglichkeit bietet aber nur Safari. Zwar zeigt auch IE 9 bei overflow: scroll das Bild innerhalb der Zellengrenzen, setzt aber Scrollbalken an alle vier Grenzen der Tabellenzelle.

caption-side

caption-side gibt an, wo die Überschrift einer Tabelle platziert werden soll. Die Vorgabe ist top, die einzige Alternative ist caption-side:bottom.

Über- oder Unterschrift einer Tabelle mit dem caption-Tag
Text aus Cupcake Ipsum
table mit caption-side
Danish marzipan bonbon jelly cotton candy brownie jelly-o chocolate bar.Apple pie chocolate muffin toffee bonbon carrot cake dessert chocolate cotton candy.
Halvah cheesecake lemon drops liquorice caramels.Bear claw croissant chocolate bonbon marshmallow croissant fruitcake tiramisu.
table { caption-side: bottom; }
…
<table>
   <caption>Über- oder Unterschrift einer 
          Tabelle mit dem caption-Tag</caption>
   <tr>
      <td>…</td>
   </tr>
</table>

alle modernen Browser CSS2 Erblich

caption-side
top | bottom
bottom
platziert eine caption-box unter der Tabelle.
top
ist die Voreinstellung und platziert eine caption-box über der Tabelle.

IE 8 setzt caption-side:bottom nur, wenn ein !DOCTYPE notiert ist.

In CSS2 gab es auch noch die Werte left und right für caption-side. Mit CSS2.1 wurden diese Werte wieder aus dem Standard genommen.

Wenn caption rechts oder links neben der Tabelle platziert wird, kann der Inhalt mit vertical-align auf der Grundlinie (bottom), an der Oberkante der Tabelle (top) oder in der Mitte (middle) ausgerichtet werden.

Responsive table

Nicht nur das Layout einer Webseite muss responsive werden, um den Anforderungen der unterschiedlichen Monitore gewachsen (bzw. geschrumpft) zu sein.

Das Anpassen der Inhalte an Handy, Tablett, kleine und große Monitore ist Feinarbeit.

Eigentlich passen sich Tabellen automatisch an den verfügbaren Platz an, aber wenn der Platz zu schmal wird, zerquetscht die Tabelle die Inhalte.

Spalten fallen lassen ist eine Technik, um Tabellen an den schmalen Platz auf kleinen Monitoren anzupassen: Spalten mit weniger wichtigem Inhalt werden auf kleinen Monitoren nicht angezeigt.

Eigenschaft Beschreibung Werte erblich
transition ändert den Wert einer CSS-Eigenschaft über die Zeit transition-property, transition, transition-duration nein
@keyframes Animationen auf Basis von transform animation-name,animation-duration, animation-iteration-count nein
text-shadow Schatten hinter Text (Drop-Shadow) horizontaler Versatz, vertikaler Versatz, Verlaufs-Radius des Schattens nein
// Mobile first:
.hc td:nth-child(3),
.hc th:nth-child(3),
.hc td:nth-child(4),
.hc th:nth-child(4) {display:none}
}

@media only screen and (min-width:480px) {
.hc td:nth-child(3),
.hc th:nth-child(3) {display:block; display:table-cell}
}

@media only screen and (min-width:720px) {
.hc td:nth-child(4),
.hc th:nth-child(4) {display:block; display:table-cell}
}

Wenn Tabellenzellen beim Vergrößern des Browserfensters nicht sauber hervorkommen, verhilft display:table-cell der Tabelle wieder zu ausgerichteten Rahmen.

Tabellenzeilen nummerieren

CSS counter-increment fügt den Zeilen einer Tabelle einen Zähler hinzu.

Kowalski, Adam Der geheimnisvolle Rosenstrauch 320 Seiten
Arnim, Elisabet Die Reisegesellschaft 260 Seiten
Gable, Rebecca Das Spiel der Könige 800 Seiten
Austen, Jane Sanditon 270 Seiten
.rows tr { counter-increment: mycounter; }
.rows td:first-child:before { content: counter(mycounter) ' '; }
       …
<table class="rows">
</table>
CSS tables