Stildefinitionen für Tabelleninhalte
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Die Links innerhalb von Tabellenzellen sollen anders dargestellt werden als im Rest des Dokuments.
Lösung
Benutzen Sie einen Selektor für Nachfahrenelemente (auch als Kontextselektor bezeichnet), um die Stile für den Zelleninhalt festzulegen:
td a {
display: block;
background-color: #333;
color: white;
text-decoration: none;
padding: 4px;
}Diskussion
Durch die Kombination eines Typselektors und eines Nachfahrenselektors in einer CSS-Regel können Sie auch mit geringem Aufwand bei der Strukturierung Ihres Dokuments ein gutes Design erreichen und gleichzeitig die Dateigröße klein halten. Die per td a definierten Stile werden nur auf a-Elemente angewandt, die sich innerhalb von Tabellenzellen (td) befinden.
Eine größere Kontrolle über die Gestaltung des Zelleninhalts erreichen Sie durch die Verwendung eines Klassenselektors:
<td class="navText"><a href="/">Home</a></td>Sie können nun die Stildefinitionen über eine Kombination von Nachfahrenselektoren und Klassenselektoren zuweisen:
td.navText a {
font-size: x-small;
}Enthält eine Tabellenzelle mehr Inhalt oder Markup-Code als nur einen Link, können Sie die Inhalte mit einem div-Element umgeben und dann mit einem Klassenselektor arbeiten.
Im folgenden Beispiel zeigen wir diese Technik anhand einer Zelle, die eine ungeordnete Liste enthalten soll:
<td>
<div class="tblcontent">
<p>To-do list on your day off.</p>
<ul>
<li><a href="http://www.imdb.com/title/tt0120737">Watch <cite>The Fellowship of the Rings</cite>, Extended Version</a></li>
<li><a href="http://www.imdb.com/title/tt0167261/">Watch <cite>The Two Towers</cite>, Extended Version</a></li>
<li><a href="http://www.imdb.com/title/tt0167260/">Watch <cite>The Return of the King</cite>, Extended Version</a></li>
<li>Start or join local Elvish society.</li>
</ul>
</div>
</td>Die CSS-Regeln, durch die der Inhalt der Tabellenzelle mit Stildefinitionen versehen wird, sieht so aus:
.tblcontent p {
margin: 0;
padding: 0;
font-weight: bold;
}
.tblcontent ul {
margin: 0;
padding: 0;
}
.tblcontent li {
margin: 0;
padding: 0;
line-height: 1.5;
}
.tblcontent li a {
padding-left: 15px;
background-image: url(bullet.gif);
background-repeat: no-repeat;
}Siehe auch
- Die CSS 2.1-Spezifikation zu Typselektoren,
- zu Selektoren für Nachfahrenelemente und
- das Rezept Designbeispiel: ein eleganter Kalender für ein ausführlicheres Beispiel für die Definition von Stilen in Tabellenzellen.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln