SELFHTML/Quickbar CSS Style-Sheets Style-Sheet-Angaben

| ## Style-Sheet-Angaben: Listen und Tabellen
| Allgemeines zu Listen Darstellungstyp (list-style-type) Listeneinrückung (list-style-position) Eigene Bullet-Grafik (list-style-image) Listendarstellung (allgemein) (list-style) Tabellenzelle über mehrere Spalten erstrecken (column-span) Tabellenzelle über mehrere Zeilen erstrecken (row-span) Position einer Tabellenüberschrift (caption-side) Sprachausgabe von Tabellen (speak-header-cell)

## Allgemeines zu Listen und Tabellen

Die Style-Sheet-Angaben für Listen beziehen sich speziell auf die HTML-Tags `<ul>` ( Aufzählungslisten) und `<ol>` ( numerierte Listen).

Sie können mit Hilfe von Style-Sheet-Angaben die gleichen Formatierungen erzwingen, wie es in den HTML-Tags `<ul>` und `<ol>` auch mit Hilfe von zusätzlichen Attributen möglich ist. Von Vorteil gegenüber der Direktangabe im HTML-Tag sind solche Style-Sheet-Angaben vor allem dann, wenn Sie sie in einer separaten Datei notieren, die Sie dann in beliebigen HTML-Dateien einbinden können (siehe auch: Style-Sheets in separater Datei definieren). Darüber hinaus stehen einige erweiterte Möglichkeiten zum Formatieren von Listen zur Verfügung, etwa die Möglichkeit, Listen aus- statt einzurücken oder eine eigene Grafik als Aufzählungssymbol zu definieren.

Die Style-Sheet-Angaben zu Tabellen beziehen sich auf Tabellenmerkmale, die sich nicht durch andere Style-Sheet-Angaben, etwa solchen zu Rahmen und Innenabständen, beschreiben lassen.

## Darstellungstyp (list-style-type)

Anzeigebeispiel: So sieht's aus

Für Auzählungslisten können Sie das Erscheinungsbild des Bullet-Zeichens bestimmen. Für numerierte Liste können Sie die Darstellung der Durchnumerierung beeinflussen.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      ul.rund { ul list-style-type:circle }
      ul.eckig { ul list-style-type:square }
      ol.numerisch { ol list-style-type:decimal }
      ol.alphabetisch { ol list-style-type:lower-alpha }
    </style>

### Erläuterung:

Mit `list-style-type:` können Sie das Aussehen von Listenzeichen kontrollieren. Erlaubt ist eine der folgenden Angaben.

`decimal` = für `<ol>`-Listen: Numerierung 1.,2.,3.,4. usw.
`lower-roman` = für `<ol>`-Listen: Numerierung i.,ii.,iii.,iv. usw.
`upper-roman` = für `<ol>`-Listen: Numerierung I.,II.,III.,IV. usw.
`lower-alpha` = für `<ol>`-Listen: Numerierung a.,b.,c.,d. usw.
`upper-alpha` = für `<ol>`-Listen: Numerierung A.,B.,C.,D. usw.
`disc` = für `<ul>`-Listen: Dateisymbol als Bulletzeichen
`circle` = für `<ul>`-Listen: rundes Bulletzeichen
`square` = für `<ul>`-Listen: rechteckiges Bulletzeichen
`none` = kein Bulletzeichen, keine Numerierung

## Listeneinrückung (list-style-position)

Anzeigebeispiel: So sieht's aus

Sie können bestimmen, wie sich Bulletzeichen oder Nuermerierung mit dem Inhalt eines Listenpunktes in Bezug auf Einrückung verhalten.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <ul style="list-style-position:inside">
    <li>Text
    <li>Text
    </ul>Text

### Erläuterung:

Mit `list-style-position:` können Sie das Einrückungsverhalten kontrollieren. Erlaubt ist eine der folgenden Angaben.

`inside` = eingerückt.
`outside` = ausgerückt (Voreinstellung).

### Beachten Sie:

Netscape 4.0 interpretiert diese Angabe nicht.

## Eigene Bullet-Grafik (list-style-image)

Anzeigebeispiel: So sieht's aus

Sie können eine eigene geeignete Grafik als Bullet-Zeichen für Aufzählungslisten bestimmen.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      ul { list-style-image:url(point.gif) }
    </style>

### Erläuterung:

Mit `list-style-image:url([Dateiname])` können Sie eine Grafik für das eigene Bulletzeichen angeben. Als Grafikdateitypen sollten Sie wie in HTML üblich GIF- oder JPG-Grafiken benutzen.

Im Beispiel wird vorausgesetzt, daß sich die Grafikdatei im gleichen Verzeichnis befindet wie die HTML-Datei. Wenn die Grafik in einem anderen Verzeichnis steht, müssen Sie den relativen oder absoluten Pfadnamen angeben. Das funktioniert genau so wie beim Einbinden von Grafiken in HTML.

### Beachten Sie:

Netscape 4.0 interpretiert diese Angabe nicht.

## Listendarstellung (allgemein) (list-style)

Anzeigebeispiel: So sieht's aus

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
Darstellungstyp (list-style-type)
Listeneinrückung (list-style-position)
Eigene Bullet-Grafik (list-style-image)

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <ol style="list-style:upper-roman outside;">
    <li>Text
    <li>Text
    </ol>

### Erläuterung:

Mit `list-style:` können Sie zusammenfassende Angaben zum Aussehen von Aufzählungslisten oder numerierten Listen machen. Notieren Sie Angaben zum Darstellungstyp, zur Listeneinrückung sowie zur Bullet-Grafik mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal. Es ist nicht erforderlich, zu allen Angaben etwas zu notieren.

### Beachten Sie:

Netscape 4.0 interpretiert nur einen Teil dieser Angaben.

## Tabellenzelle über mehrere Spalten erstrecken (column-span)

Anzeigebeispiel: So sieht's aus

Sie können für Kopf- oder Datenzellen von Tabellen erzwingen, daß 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.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      td.zweispaltig { column-span:2 }
      td.dreispaltig { column-span:3 }
    </style>

### Erläuterung:

Mit `column-span:` können Sie angeben, über wie viele Spalten sich eine Tabellenzelle (`<td>`- oder `<th>`-Tag) erstrecken soll.

## Tabellenzelle über mehrere Zeilen erstrecken (row-span)

Anzeigebeispiel: So sieht's aus

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

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      td.zweizeilig { row-span:2 }
    </style>

### Erläuterung:

Mit `row-span:` können Sie angeben, über wie viele Zeilen sich eine Tabellenzelle (`<td>`- oder `<th>`-Tag) erstrecken soll.

## Position einer Tabellenüberschrift (caption-side)

Anzeigebeispiel: So sieht's aus

Sie können für Tabellen eine Tabellenüberschrift oder Tabellenunterschrift definieren. Mit der hier beschriebenen Style-Sheet-Angabe können Sie die Position der Über- bzw. Unterschrift festlegen. Die Style-Sheet-Angabe hat den gleichen Effekt wie eine Tabellenüberschrift / Tabellenunterschrift in HTML.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <table border">
     <caption style="caption-side:top">Tabellen&uuml;berschrift</caption>
     <!-- Tabelleninhalt -->
    </table>

### Erläuterung:

Mit `caption-side:` können Sie die Position der Tabellenüberschrift bestimmen. Die Angabe ist für das HTML-Tag `<caption>`...`</caption>` gedacht. Folgende Angaben sind erlaubt:

`top` = oberhalb der Tabelle zentriert (Tabellenüberschrift).
`topleft` = oberhalb der Tabelle linksbündig (Tabellenüberschrift).
`topright` = oberhalb der Tabelle rechtsbündig (Tabellenüberschrift).
`bottom` = unterhalb der Tabelle zentriert (Tabellenunterschrift).
`bottomleft` = unterhalb der Tabelle linksbündig (Tabellenunterschrift).
`bottomright` = unterhalb der Tabelle rechtsbündig (Tabellenunterschrift).

## Sprachausgabe von Tabellen (speak-header-cell)

"Anzeigebeispiel": So hört sich's an

Wenn eine HTML-Tabelle nicht am Bildschirm angezeigt oder ausgedruckt wird, sondern von einem Sprecher oder Sprachausgabesystem vorgelesen wird (z.B. für Sehbehinderte), entsteht das Problem, daß ein zweidimensionaler Raum eindimensional in der Zeit gelesen werden soll. Mit der hier beschriebenen Angabe können Sie für diesen Fall entscheiden, ob der Inhalt von Kopfzellen bei jeder ihr untergeordneten Datenzelle erneut wiedergegeben werden soll, oder ob der Kopfzelleninhalt nur einmal wiedergegeben werden soll.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <table border">
     <tr>
      <th style="speak-header-cell:always">Kopfzelle 1</th>
      <th style="speak-header-cell:once">Kopfzelle 2</th>
     </tr>
     <tr>
      <td>Datenzelle 1</td>
      <td>Datenzelle 2</td>
     </tr>
     <tr>
      <td>Datenzelle 3</td>
      <td>Datenzelle 4</td>
     </tr>
    </table>

### Erläuterung:

Mit `speak-header-cell:` können Sie das Wiedergabeverhalten für Kopfzelleninhalte bestimmen. In der CSS 2.0 Spezifikation ist noch nicht klar, ob die Angabe für Kopfzellen-Tags `<th>` oder für die zugehörigen Datenzellen-Tags `<td>` gedacht ist. Das obige Beispiel nimmt an, daß die Angabe im Kopfzellen-Tag steht. Das Beispiel bewirkt, daß die Kopfzelle 1 vor den Datenzellen 1 und 3 jeweils wiederholt wird, während die Kopfzelle 2 nur einmal ausgegeben wird. Folgende Angaben sind erlaubt:

`always` = Kopfzelleninhalt bei jeder untergeordneten Datenzelle wiederholen.
`once` = Kopfzelleninhalt nur einmal wiedergeben (Normaleinstellung).

weiter: | Style-Sheet-Angaben: Pseudo-Formate
zurück: | Style-Sheet-Angaben: Hintergrundfarben und -bilder

SELFHTML/Quickbar CSS Style-Sheets Style-Sheet-Angaben

© 1998 Stefan Münz, muenz@csi.com