Tabellen Info und CSS

Die Praxis, Tabellen für die Erstellung von Seitenlayouts zu verwenden, ist glücklicherweise schon seit längerer Zeit nicht mehr üblich (außer vielleicht in E-Mails). Auch das Verteilen eines Bilds auf mehrere Tabellenzellen (Slicing) oder verschachtelte Tabellen gelten mittlerweile als überholt. Dennoch hat der Einsatz von Tabellen auch weiterhin ihre Berechtigung...

Rahmen und Innenabstände für Zellen einstellen

Um einen stärkeren visuellen Eindruck als bei der standardmäßigen Tabellendarstellung zu erreichen, sollen die Rahmen und die Innenabstände von Tabellenzellen angepasst werden. Verwenden Sie die Eigenschaft padding, um den Abstand zwischen dem Zelleninhalt und den Rändern der Zelle festzulegen. Zur Definition der Rahmen für die Zellen und die Tabelle selbst gibt es die...

Den Zellzwischenraum einstellen - border-spacing

Beim Modell der separaten Rahmen für Tabellenzellen soll, ähnlich dem (in HTML5 veralteten) HTML-Attribut cellspacing, festgelegt werden, wie groß der Abstand der Zellen zueinander bzw. zum Rahmen der Tabelle selbst sein soll. Verwenden Sie die Eigenschaft border-spacing. Nachdem explizit festgelegt wurde, dass die Tabellenzellen separat angezeigt werden sollen...

Leerraum - Bilder und der untere Zellenrand

Ohne Stildefinitionen werden Bilder in Tabellenzellen (und anderen Elementen) auf der Grundlinie dargestellt. Dadurch entsteht unterhalb des Bilds etwas Leerraum. Dieser Zwischenraum soll per CSS-Regel entfernt werden. Ändern Sie die Darstellungsrolle des Bilds, indem Sie es als Blockelement definieren. Das Bild wird als Blockelement dargestellt, damit darunter kein...

Tabellenzellen gestalten mit class und id

Sie möchten bestimmte Zellen einer Tabelle individuell gestalten, wie in Abbildung dargestellt. Versehen Sie die gewünschten Zellen je nach Verwendungszweck mit class- oder id-Attributen, die Sie dann im Stylesheet auswählen können. Hier erhalten alle Zellen, deren class-Attribut den Wert hervorheben hat, eine gelbe Hintergrundfarbe. Die Tabellenzelle, die individuell gestaltet...

Leere Tabellenzellen verstecken mit empty-cells

Sie möchten, dass Tabellenzellen ohne Inhalt nicht dargestellt werden, wie in Abbildung zu sehen ist. Geben Sie der Eigenschaft empty-cells den Wert hide, wie hier gezeigt. Die Eigenschaft empty-cells funktioniert nur mit dem Darstellungsmodell der getrennten Rahmen, d.h., wenn die Eigenschaft border-collapse den Wert separate hat. Standardmäßig werden Zellen...

Stildefinitionen für die Tabellenüberschriften

Für Tabellenüberschriften (th) sollen eigene Stile definiert werden. Abbildung zeigt eine Tabelle mit Überschriften in der Standarddarstellung, in Abbildung sehen Sie die gleiche Tabelle, diesmal mit Stildefinitionen für die Übeschriften. Verwenden Sie den Elementselektor th, um den Überschriftenzellen der Tabelle die entsprechenden Stile zuzuweisen...

Stildefinitionen für Tabellenbeschriftungen

Die Beschreibung einer Tabelle (caption) soll mit eigenen Stildefinitionen versehen werden. Verwenden Sie den Elementselektor caption. Die erste Deklaration versieht die Beschriftung rundum mit einem Innenabstand von 1em. Für die Definition von Schriftgröße und -art verwenden wir hier die Kurzschrift-Eigenschaft font. Mit der dritten Deklaration (caption-side) wird...

Rollover-Effekte für Tabellenzeilen mit :hover

Wenn sich der Cursor über einer bestimmten Tabellenzeile befindet, soll diese durch einen Rollover-Effekt hervorgehoben werden. Verwenden Sie die Pseudoklasse :hover zusammen mit dem Element-Selektor tr:. Die Pseudoklasse :hover kennen Sie vielleicht schon vom Erzeugen von Rollover-Effekten für Links. Die CSS-Spezifikation beschränkt ihren Einsatz aber nicht darauf. Sie kann...

Tabellenzeilen individuell gestalten mit CSS3

Sie möchten einzelne oder mehrere Tabellenzeilen individuell gestalten, wie in Abbildung gezeigt. Für dieses Rezept gehen wir davon aus, dass die Tabelle die folgende Struktur hat: Verwenden Sie den CSS3-Selektor :nth-child(), um bestimmte tr-Elemente auszuwählen. Um die erste und die vierte Zeile nach den Spaltenüberschriften auszuwählen, könnten Sie...