Tutorial zu CSS2 © 04/2002 webnetline.de & topwebhamster.de

Cascading Style Sheets, level 2

9. Tabellen- und Pseudo-Formate

Sie können für Kopf- oder Datenzellen von Tabellen erzwingen, dass diese sich über mehrere Spalten erstrecken.
Die Style-Sheet-Angabe hat den gleichen Effekt wie das spaltenweise Verbinden von Zellen in HTML. Im Unterschied dazu können Sie jedoch globale Angaben zu Unterklassen von Tabellenzellen machen.

Listing 27:

<font color="#cc3300"><style type="text/css"><br>
th.zweispaltig { column-span:2; }<br>
td.dreizeilig { row-span:3; }<br>
</style></font><br>
.

Entsprechendes Äquivalent zu colum-span: ist row-span: für die Definition einer mehrere Zeilen hohen Tabelle. Mit caption-side: definieren Sie die Position einer von der Tabelle getrennten, aber ihr zugehörigen Über- oder Unterschrift.

Listing 28:

<font color="#cc3300"><table border><br>
<caption style="caption-side:topleft">Tabellenüberschrift</caption><br>
<!-- Tabelleninhalt --><br>
</table></font><br>

Mögliche Werte sind: top (= oberhalb der Tabelle zentriert), topleft (= oberhalb der Tabelle linksbündig), topright (= oberhalb der Tabelle rechtsbündig), bottom (= unterhalb der Tabelle zentriert), bottomleft (= unterhalb der Tabelle linksbündig), bottomright (= unterhalb der Tabelle rechtsbündig).

Pseudo- Formate

Mit dem Begriff Pseudo-Formate können die meisten Web-Autoren, die sich das erste Mal mit Cascading Style Sheets beschäftigen, zunächst nichts anfangen. Pseudo-Formate sind für HTML-Elemente gedacht, die kein eigenes HTML-Tag haben, aber dennoch von Bedeutung sind. Dazu gehören beispielsweise die -Attribute link=, alink= und vlink=, mit denen die Linkfarben zu noch nicht, gerade eben und früher schon besuchten Seiten gesetzt werden.

Pseudo-Formate sind daran erkennbar, dass sie nicht dem bisher beschriebenen Schema folgen. Statt dessen werden sie definiert durch den HTML-Tag, für den sie gelten, gefolgt von einem Doppelpunkt »:« und dem entsprechenden Format.

Listing 29:

<style type="text/css">
a:link { color:#FF0000; }
a:visited { color:#00FF00; }
a:active { color:#0000FF; }
</style>


Für den Verweis-Tag <a> sind folgende Angaben möglich: link (= Verweise zu noch nicht besuchten Seiten), visited (= Verweise zu bereits besuchten Seiten) und active (= gerade angeklickte Verweise).

Darüber hinaus sind weitere Pseudo-Formate vorgesehen, die jedoch bisher weder von Netscape noch vom MS Internet Explorer interpretiert werden.

Listing 30:

<style type="text/css">
p:first-line { font-weight:bold; }
p.goethe:first-letter { font-size:36pt; color:blue; }
</style>

Die CSS-Angabe first-line: erlaubt eine separate Formatierung der ersten Zeile von längeren Fließtexten. Dieser typographischer Effekt ist von Druckschriften her bekannt. Ebenfalls typografischer Herkunft ist first-letter:, womit Sie dem erste Zeichen der ersten Zeile eines Absatzes ein separates Erscheinungsbild geben können.

bezahlte Bannerwerbung:
CSS Tutorial - ein Service von topwebHamster
Hamsterbild von topwebHamster
Valid CSS! diesen Button dürfen Sie auf Ihre Website einfügen, wenn sie die Prüfung des CSS- Validators http://jigsaw.w3.org/css-validator/validator-uri.html bestanden hat.
Jörg Jünemann, Berlin / Ralf Roletschek, Eberswalde