CSS, HTML und Javascript mit {stil}

CSS für Tabellen

padding: Poster, Polsterung, in CSS ist padding der innere Abstand zum Rand des Elements

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.

Das W3C hat in CSS1 noch die Hände von Tabellen gelassen – erst in CSS2 kamen Eigenschaften für Tabellen hinzu, da Attribute wie border, width und height den Anforderungen an das Raster der Tabelle nicht immer genügen.

HTML regelt mit Tags wie colgroup und colspan die Breite der Spalten von Tabellen innerhalb des table-Tags.

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.
RechtsschutzversichtungsvertreterSupercalifragilisticexpialidociousWanderpokalpoliermittel
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>