Türchen #12: caption-side

von

Das Dutzend ist voll – Bergfest!

Türchen #12 Wenn wir nun einmal mit Tables angefangen haben, machen wir doch gleich damit weiter. Noch eine Eigenschaft, die es nur für Tables gibt, ist caption-side. Sie ist fest an das caption-Tag gebunden und setzt logischer Weise voraus, dass ihr solches auch benutzt. Die Eigenschaft gibt dabei an, auf welcher Seite der Tabelle der Titel ausgegeben werden soll.

Browserunterstützung

Browser Firefox Safari Opera Chrome Internet Explorer
ab Version 1.0 1.0 4.0 1.0 8.0

caption-side hat zwei Werte, die von Bedeutung sind: top und bottom, wobei erstes den Defaultwert darstellt. Firefox unterstützt zudem auch noch left und right. Die Wahrscheinlichkeit aber, mit der ein Fall eintritt, indem einer dieser beiden Werte nötig wären, geht quasi gegen Null.

Beispiel

Wie letztens gehts mit einer normalen Tabelle los, diese hier wird auch eine caption (Überschrift, Bezeichnung) haben, denn darum gehts uns ja.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table>
	<caption>Besucherzahlen</caption>
	<thead>
		<tr>
			<th>Monat</th>
			<th>Besucher</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>11/2010</td>
			<td>2.744</td>
		</tr>
		<tr>
			<td>10/2010</td>
			<td>2.503</td>
		</tr>
		<tr>
			<td>09/2010</td>
			<td>2.771</td>
		</tr>
	</tbody>
</table>

Da caption-side:top der Standard ist, erwartet uns folgende Ausgabe:

Besucherzahlen
Monat Besucher
11/2010 2.744
10/2010 2.503
09/2010 2.771

Jetzt nutzen wir caption-side:bottom und wenden es am caption-Tag an.

CSS
1
2
3
caption {
	caption-side:bottom;
}

Damit sieht unsere Tabelle dann so aus:

Besucherzahlen
Monat Besucher
11/2010 2.744
10/2010 2.503
09/2010 2.771

Das Gleiche könnt ihr jetzt ja mal für left und right im Firefox probieren. ;)

Die hier könnten dich auch interessieren…