Hilfe:Tabellen - Versionsgeschichte

Jochen.fruehauf am 12. September 2011 um 09:59 Uhr

2011-09-12T09:59:12Z

← Nächstältere Version		Version vom 12. September 2011, 11:59 Uhr
Zeile 280:		Zeile 280:
	\|} <!-- Hilfstabelle Ende -->		\|} <!-- Hilfstabelle Ende -->
	Sollen die Tabellen nicht von Text (einschließlich nachfolgender Überschriften) umflossen werden, kann		Sollen die Tabellen nicht von Text (einschließlich nachfolgender Überschriften) umflossen werden, kann
	<pre style="width:18em;"><~~div~~ style="clear:both;" /></pre>		<pre style="width:18em;"><br style="clear:both;" /></pre>
	unterhalb angefügt werden.		unterhalb angefügt werden.

Administrator: /* Sortierbare Tabelle */

2011-09-09T12:36:06Z

Sortierbare Tabelle

← Nächstältere Version		Version vom 9. September 2011, 14:36 Uhr
Zeile 94:		Zeile 94:
	\|-		\|-
	\| a		\| a
	\|style="text-align:right"\| 1100		\| style="text-align:right" \| 1100
	\| style="text-align:right" \| 1000		\| style="text-align:right" \| 1000
	\| hellblau		\| hellblau

Jochen.fruehauf: /* Tabellenüberschriften, Trennstriche */

2011-09-09T12:31:31Z

Tabellenüberschriften, Trennstriche

← Nächstältere Version		Version vom 9. September 2011, 14:31 Uhr
Zeile 156:		Zeile 156:
	'''Erläuterungen'''		'''Erläuterungen'''

	* Die Zeile, die mit <code>\|+</code> beginnt, bezeichnet den Titel der Tabelle. Beachte: Das <code>+</code>-Zeichen muss unmittelbar auf das <code>\|<code>-Zeichen folgen (kein Leerzeichen dazwischen).		* Die Zeile, die mit <code>\|+</code> beginnt, bezeichnet den Titel der Tabelle. Beachte: Das <code>+</code>-Zeichen muss unmittelbar auf das <code>\|</code>-Zeichen folgen (kein Leerzeichen dazwischen).
	* Der Befehl <code>border-top: 1pt</code> weist der Zelle einen oberen Rand mit definierter Breite zu. Weitere Befehle sind: <code>border-left, border-right</code> und <code>border-bottom</code> für einen Rand links, rechts oder unten. <code>border: 1pt</code> setzt alle vier Ränder.		* Der Befehl <code>border-top: 1pt</code> weist der Zelle einen oberen Rand mit definierter Breite zu. Weitere Befehle sind: <code>border-left, border-right</code> und <code>border-bottom</code> für einen Rand links, rechts oder unten. <code>border: 1pt</code> setzt alle vier Ränder.
	* Der Befehl <code>width="150px"</code> weist der Tabelle als Breite 150 Pixel zu.		* Der Befehl <code>width="150px"</code> weist der Tabelle als Breite 150 Pixel zu.

Jochen.fruehauf: /* Tabellenüberschriften, Trennstriche */

2011-09-09T12:30:47Z

Tabellenüberschriften, Trennstriche

← Nächstältere Version		Version vom 9. September 2011, 14:30 Uhr
Zeile 156:		Zeile 156:
	'''Erläuterungen'''		'''Erläuterungen'''

	* Die Zeile, die mit <code>\|+</code> beginnt, bezeichnet den Titel der Tabelle.		* Die Zeile, die mit <code>\|+</code> beginnt, bezeichnet den Titel der Tabelle. Beachte: Das <code>+</code>-Zeichen muss unmittelbar auf das <code>\|<code>-Zeichen folgen (kein Leerzeichen dazwischen).
	* Der Befehl <code>border-top: 1pt</code> weist der Zelle einen oberen Rand mit definierter Breite zu. Weitere Befehle sind: <code>border-left, border-right</code> und <code>border-bottom</code> für einen Rand links, rechts oder unten. <code>border: 1pt</code> setzt alle vier Ränder.		* Der Befehl <code>border-top: 1pt</code> weist der Zelle einen oberen Rand mit definierter Breite zu. Weitere Befehle sind: <code>border-left, border-right</code> und <code>border-bottom</code> für einen Rand links, rechts oder unten. <code>border: 1pt</code> setzt alle vier Ränder.
	* Der Befehl <code>width="150px"</code> weist der Tabelle als Breite 150 Pixel zu.		* Der Befehl <code>width="150px"</code> weist der Tabelle als Breite 150 Pixel zu.

Jochen.fruehauf: /* Tabellen nebeneinander */

2011-09-09T12:26:44Z

Tabellen nebeneinander

← Nächstältere Version		Version vom 9. September 2011, 14:26 Uhr
Zeile 240:		Zeile 240:
	<div style="float:left;margin-right:1em;">		<div style="float:left;margin-right:1em;">
	{\| class="wikitable"		{\| class="wikitable"
	\| + Linke Tabelle		\|+ Linke Tabelle
	! Überschrift 1 \|\| Überschrift 2		! Überschrift 1 \|\| Überschrift 2
	\|-		\|-
Zeile 249:		Zeile 249:
	<div style="float:left;">		<div style="float:left;">
	{\| class="wikitable"		{\| class="wikitable"
	\| + Rechte Tabelle		\|+ Rechte Tabelle
	! Überschrift 1 \|\| Überschrift 2		! Überschrift 1 \|\| Überschrift 2
	\|-		\|-
Zeile 262:		Zeile 262:
	<div style="float:left;margin-right:1em;">		<div style="float:left;margin-right:1em;">
	{\| class="wikitable"		{\| class="wikitable"
	\| + Linke Tabelle		\|+ Linke Tabelle
	! Überschrift 1 \|\| Überschrift 2		! Überschrift 1 \|\| Überschrift 2
	\|-		\|-
Zeile 271:		Zeile 271:
	<div style="float:left;">		<div style="float:left;">
	{\| class="wikitable"		{\| class="wikitable"
	\| + Rechte Tabelle		\|+ Rechte Tabelle
	! Überschrift 1 \|\| Überschrift 2		! Überschrift 1 \|\| Überschrift 2
	\|-		\|-

Jochen.fruehauf: /* Tabellen nebeneinander */

2011-09-09T12:26:04Z

Tabellen nebeneinander

← Nächstältere Version		Version vom 9. September 2011, 14:26 Uhr
Zeile 237:		Zeile 237:
	\| <!-- Hilfstabelle 1. Spalte -->		\| <!-- Hilfstabelle 1. Spalte -->

	<pre style="width:26em">		<pre style="width:26em;">
	<div style="float:left; margin-right:1em">		<div style="float:left;margin-right:1em;">
	{\| class="wikitable"		{\| class="wikitable"
	\|+ Linke Tabelle		\| + Linke Tabelle
	! Überschrift 1 \|\| Überschrift 2		! Überschrift 1 \|\| Überschrift 2
	\|-		\|-
Zeile 247:		Zeile 247:
	</div>		</div>

	<div style="float:left">		<div style="float:left;">
	{\| class="wikitable"		{\| class="wikitable"
	\|+ Rechte Tabelle		\| + Rechte Tabelle
	! Überschrift 1 \|\| Überschrift 2		! Überschrift 1 \|\| Überschrift 2
	\|-		\|-
Zeile 257:		Zeile 257:
	</pre>		</pre>

	\|style="width:2em"\| <!-- Hilfstabelle 2. Spalte -->		\| style="width:2em;" \| <!-- Hilfstabelle 2. Spalte -->
	\| <!-- Hilfstabelle 3. Spalte -->		\| <!-- Hilfstabelle 3. Spalte -->

	<div style="float:left; margin-right:1em">		<div style="float:left;margin-right:1em;">
	{\| class="wikitable"		{\| class="wikitable"
	\|+ Linke Tabelle		\| + Linke Tabelle
	! Überschrift 1 \|\| Überschrift 2		! Überschrift 1 \|\| Überschrift 2
	\|-		\|-
Zeile 269:		Zeile 269:
	</div>		</div>

	<div style="float:left">		<div style="float:left;">
	{\| class="wikitable"		{\| class="wikitable"
	\|+ Rechte Tabelle		\| + Rechte Tabelle
	! Überschrift 1 \|\| Überschrift 2		! Überschrift 1 \|\| Überschrift 2
	\|-		\|-
Zeile 280:		Zeile 280:
	\|} <!-- Hilfstabelle Ende -->		\|} <!-- Hilfstabelle Ende -->
	Sollen die Tabellen nicht von Text (einschließlich nachfolgender Überschriften) umflossen werden, kann		Sollen die Tabellen nicht von Text (einschließlich nachfolgender Überschriften) umflossen werden, kann
	<pre style="width:18em"><div style="clear:both;" /></pre>		<pre style="width:18em;"><div style="clear:both;" /></pre>
	unterhalb angefügt werden.		unterhalb angefügt werden.

Jochen.fruehauf: /* Gleich breite Spalten */

2011-09-09T12:23:17Z

Gleich breite Spalten

← Nächstältere Version		Version vom 9. September 2011, 14:23 Uhr
Zeile 287:		Zeile 287:
	\| <!-- Hilfstabelle 1. Spalte -->		\| <!-- Hilfstabelle 1. Spalte -->

	<pre style="width:26em">		<pre style="width:26em;">
	{\| class="wikitable"		{\| class="wikitable"
	\|-		\|-
	\|style="width: 5em"\| a: 5em		\| style="width: 5em;" \| a: 5em
	\|style="width:10em"\| b: 10em		\| style="width:10em;" \| b: 10em
	\|style="width: 7em"\| c: 7em		\| style="width: 7em;" \| c: 7em
	\|}		\|}
	{\| class="wikitable"		{\| class="wikitable"
	\|-		\|-
	\|style="width: 5em"\| a: 5em		\| style="width: 5em;" \| a: 5em
	\|style="width:10em"\| b: 10em		\| style="width:10em;" \| b: 10em
	\|style="width: 7em"\| c: 7em		\| style="width: 7em;" \| c: 7em
	\|}		\|}
	</pre>		</pre>

	\|style="width:2em"\| <!-- Hilfstabelle 2. Spalte -->		\| style="width:2em;" \| <!-- Hilfstabelle 2. Spalte -->
	\| ~~<!-- Hilfstabelle 3. Spalte -->~~		\|

	{\| class="wikitable"		{\| class="wikitable" <!-- Hilfstabelle 3. Spalte -->
	\|-		\|-
	\|style="width: 5em"\| a: 5em		\| style="width: 5em;" \| a: 5em
	\|style="width:10em"\| b: 10em		\| style="width:10em;" \| b: 10em
	\|style="width: 7em"\| c: 7em		\| style="width: 7em;" \| c: 7em
	\|}		\|}
	{\| class="wikitable"		{\| class="wikitable"
	\|-		\|-
	\|style="width: 5em"\| a: 5em		\| style="width: 5em;" \| a: 5em
	\|style="width:10em"\| b: 10em		\| style="width:10em;" \| b: 10em
	\|style="width: 7em"\| c: 7em		\| style="width: 7em;" \| c: 7em
	\|}		\|}

	\|} <!-- Hilfstabelle Ende -->		\|} <!-- Hilfstabelle Ende -->

	~~'''Anmerkung'''<br />~~
	~~Auf Pixelangaben - also auf Angaben mit der Einheit ''px'' statt ''em'' - sollte verzichtet werden.~~


	== CSS-Klassen für Tabellen ==		== CSS-Klassen für Tabellen ==

Jochen.fruehauf am 9. September 2011 um 12:18 Uhr

2011-09-09T12:18:02Z

← Nächstältere Version		Version vom 9. September 2011, 14:18 Uhr
Zeile 70:		Zeile 70:
	! ABC !! Länge !! Breite !! Farbe !! class="unsortable" \| Bemerkung		! ABC !! Länge !! Breite !! Farbe !! class="unsortable" \| Bemerkung
	\|-		\|-
	\| [[a]]		\| a
	\|style="text-align:right"\| 1100		\| style="text-align:right" \| 1100
	\|style="text-align:right"\| 1000		\| style="text-align:right" \| 1000
	\| hellblau		\| hellblau
	\| Blau ist der Himmel		\| Blau ist der Himmel
	\|-		\|-
	\| [[b]]		\| b
	\|style="text-align:right"\| 30		\| style="text-align:right" \| 30
	\|style="text-align:right"\| 2		\| style="text-align:right" \| 2
	\| grün		\| grün
	\| Grün ist das Gras		\| Grün ist das Gras
	\|-		\|-
	\| [[c]]		\| c
	\|style="text-align:right"\| 100		\| style="text-align:right" \| 100
	\|style="text-align:right"\| 90		\| style="text-align:right" \| 90
	\| rot		\| rot
	\| Rot ist die Liebe		\| Rot ist die Liebe
Zeile 93:		Zeile 93:
	! ABC !! Länge !! Breite !! Farbe !! class="unsortable" \| Bemerkung		! ABC !! Länge !! Breite !! Farbe !! class="unsortable" \| Bemerkung
	\|-		\|-
	\| [[a]]		\| a
	\|style="text-align:right"\| 1100		\|style="text-align:right"\| 1100
	\|style="text-align:right"\| 1000		\| style="text-align:right" \| 1000
	\| hellblau		\| hellblau
	\| Blau ist der Himmel		\| Blau ist der Himmel
	\|-		\|-
	\| [[b]]		\| b
	\|style="text-align:right"\| 30		\| style="text-align:right" \| 30
	\|style="text-align:right"\| 2		\| style="text-align:right" \| 2
	\| grün		\| grün
	\| Grün ist das Gras		\| Grün ist das Gras
	\|-		\|-
	\| [[c]]		\| c
	\|style="text-align:right"\| 100		\| style="text-align:right" \| 100
	\|style="text-align:right"\| 90		\| style="text-align:right" \| 90
	\| rot		\| rot
	\| Rot ist die Liebe		\| Rot ist die Liebe
Zeile 166:		Zeile 166:
	'''colspan'''		'''colspan'''

	{\| class="wikitable ~~float-right~~" style="text-align:center"		{\| class="wikitable" style="text-align:center"
	\|- style="background:#e3e3e3"		\|- style="background:#e3e3e3"
	\| A		\| A
Zeile 172:		Zeile 172:
	\| C		\| C
	\|-		\|-
	\|colspan="3" style="background:#EED5B7"\| eine Zeile		\| colspan="3" style="background:#EED5B7" \| eine Zeile
	\|}		\|}

Zeile 181:		Zeile 181:
	\| C		\| C
	\|-		\|-
	\|colspan="3"\| eine Zeile		\| colspan="3" style="background:#EED5B7" \| eine Zeile
	\|}		\|}
	</pre>		</pre>
Zeile 188:		Zeile 188:
	'''rowspan'''		'''rowspan'''

	{\| class="wikitable ~~float-right~~" style="text-align:center"		{\| class="wikitable" style="text-align:center;"
	\|style="background:#e3e3e3"\| A		\| style="background:#e3e3e3" \| A
	\| rowspan="3" style="background:#EED5B7" \| eine Spalte		\| rowspan="3" style="background:#EED5B7" \| eine Spalte
	\|-		\|-
	\|style="background:#e3e3e3"\| B		\| style="background:#e3e3e3" \| B
	\|-		\|-
	\|style="background:#e3e3e3"\| C		\| style="background:#e3e3e3" \| C
	\|}		\|}

	<pre style="width:75%">		<pre style="width:75%">
	{\| class="wikitable" style="text-align:center"		{\| class="wikitable" style="text-align:center;"
	\| A		\| style="background:#e3e3e3" \| A
	\| rowspan="3" \| eine Spalte		\| rowspan="3" style="background:#EED5B7" \| eine Spalte
	\|-		\|-
	\| B		\| style="background:#e3e3e3" \| B
	\|-		\|-
	\| C		\| style="background:#e3e3e3" \| C
	\|}		\|}
	</pre>		</pre>
Zeile 212:		Zeile 212:

	{\| class="wikitable float-right" style="text-align:center"		{\| class="wikitable float-right" style="text-align:center"
	\|colspan="2" style="background:#e3e3e3"\| A		\| colspan="2" style="background:#e3e3e3;"\| A
	\|-		\|-
	\|style="background:#e3e3e3"\| B		\| style="background:#e3e3e3;" \| B
	\| rowspan="2" style="background:#EED5B7" \| eine Spalte		\| rowspan="2" style="background:#EED5B7;" \| eine Spalte
	\|-		\|-
	\|style="background:#e3e3e3"\| C		\| style="background:#e3e3e3;" \| C
	\|}		\|}

	<pre style="width:75%">		<pre style="width:75%">
	{\| class="wikitable" style="text-align:center"		{\| class="wikitable float-right" style="text-align:center"
	\|colspan="2" style="~~text-align~~:~~center~~"\| A		\| colspan="2" style="background:#e3e3e3;"\| A
	\|- style="~~text-align~~:~~center~~"		\|-
	\| B		\| style="background:#e3e3e3;" \| B
	\| rowspan="2"\| eine Spalte		\| rowspan="2" style="background:#EED5B7;" \| eine Spalte
	\|- style="~~text-align~~:~~center~~"		\|-
	\| C		\| style="background:#e3e3e3;" \| C
	\|}		\|}
	</pre>		</pre>

Jochen.fruehauf am 9. September 2011 um 12:11 Uhr

2011-09-09T12:11:18Z

← Nächstältere Version		Version vom 9. September 2011, 14:11 Uhr
Zeile 122:		Zeile 122:
	\| <!-- Hilfstabelle 1. Spalte -->		\| <!-- Hilfstabelle 1. Spalte -->
	<pre>		<pre>
	{\| style="text-align:right"		{\| style="text-align:right;width:150px;"
	\|+ Addition von vier Zahlen		\|+ Addition von vier Zahlen
	\|-		\|-
Zeile 140:		Zeile 140:
	\| <!-- Hilfstabelle 3. Spalte -->		\| <!-- Hilfstabelle 3. Spalte -->

	{\| style="text-align:right;width:~~200px~~;"		{\| style="text-align:right;width:150px;"
	\|+ Addition von vier Zahlen		\|+ Addition von vier Zahlen
	\|-		\|-
Zeile 158:		Zeile 158:
	* Die Zeile, die mit <code>\|+</code> beginnt, bezeichnet den Titel der Tabelle.		* Die Zeile, die mit <code>\|+</code> beginnt, bezeichnet den Titel der Tabelle.
	* Der Befehl <code>border-top: 1pt</code> weist der Zelle einen oberen Rand mit definierter Breite zu. Weitere Befehle sind: <code>border-left, border-right</code> und <code>border-bottom</code> für einen Rand links, rechts oder unten. <code>border: 1pt</code> setzt alle vier Ränder.		* Der Befehl <code>border-top: 1pt</code> weist der Zelle einen oberen Rand mit definierter Breite zu. Weitere Befehle sind: <code>border-left, border-right</code> und <code>border-bottom</code> für einen Rand links, rechts oder unten. <code>border: 1pt</code> setzt alle vier Ränder.
	* Der Befehl <code>width="~~15%~~"</code> weist ~~einer Spalte 15 % der Gesamtbreite~~ der Tabelle als Breite zu.		* Der Befehl <code>width="150px"</code> weist der Tabelle als Breite 150 Pixel zu.
	* Die Ausrichtung von Text rechtsbündig in einer Zelle erreicht man durch die CSS-Anweisung <code>style="text-align:right"</code>.		* Die Ausrichtung von Text rechtsbündig in einer Zelle erreicht man durch die CSS-Anweisung <code>style="text-align:right"</code>.

Jochen.fruehauf am 9. September 2011 um 12:07 Uhr

2011-09-09T12:07:04Z

← Nächstältere Version		Version vom 9. September 2011, 14:07 Uhr
Zeile 121:		Zeile 121:
	{\|		{\|
	\| <!-- Hilfstabelle 1. Spalte -->		\| <!-- Hilfstabelle 1. Spalte -->

	<pre>		<pre>
	{\| style="text-align:right"		{\| style="text-align:right"
Zeile 138:		Zeile 137:
	</pre>		</pre>

	\| style="width:~~300px~~" \| <!-- Hilfstabelle 2. Spalte -->		\| style="width:50px;" \| <!-- Hilfstabelle 2. Spalte -->
	\| <!-- Hilfstabelle 3. Spalte -->		\| <!-- Hilfstabelle 3. Spalte -->

Zeile 154:		Zeile 153:
	\| style="border-top:1pt black solid;" \| <tt>1000</tt>		\| style="border-top:1pt black solid;" \| <tt>1000</tt>
	\|}		\|}

	\|} <!-- Hilfstabelle Ende -->		\|} <!-- Hilfstabelle Ende -->
	'''Erläuterungen'''		'''Erläuterungen'''

← Nächstältere Version		Version vom 9. September 2011, 14:23 Uhr
Zeile 287:		Zeile 287:
	\| <!-- Hilfstabelle 1. Spalte -->		\| <!-- Hilfstabelle 1. Spalte -->

	<pre style="width:26em">		<pre style="width:26em;">
	{\| class="wikitable"		{\| class="wikitable"
	\|-		\|-
	\|style="width: 5em"\| a: 5em		\| style="width: 5em;" \| a: 5em
	\|style="width:10em"\| b: 10em		\| style="width:10em;" \| b: 10em
	\|style="width: 7em"\| c: 7em		\| style="width: 7em;" \| c: 7em
	\|}		\|}
	{\| class="wikitable"		{\| class="wikitable"
	\|-		\|-
	\|style="width: 5em"\| a: 5em		\| style="width: 5em;" \| a: 5em
	\|style="width:10em"\| b: 10em		\| style="width:10em;" \| b: 10em
	\|style="width: 7em"\| c: 7em		\| style="width: 7em;" \| c: 7em
	\|}		\|}
	</pre>		</pre>

	\|style="width:2em"\| <!-- Hilfstabelle 2. Spalte -->		\| style="width:2em;" \| <!-- Hilfstabelle 2. Spalte -->
	\| ~~<!-- Hilfstabelle 3. Spalte -->~~		\|

	{\| class="wikitable"		{\| class="wikitable" <!-- Hilfstabelle 3. Spalte -->
	\|-		\|-
	\|style="width: 5em"\| a: 5em		\| style="width: 5em;" \| a: 5em
	\|style="width:10em"\| b: 10em		\| style="width:10em;" \| b: 10em
	\|style="width: 7em"\| c: 7em		\| style="width: 7em;" \| c: 7em
	\|}		\|}
	{\| class="wikitable"		{\| class="wikitable"
	\|-		\|-
	\|style="width: 5em"\| a: 5em		\| style="width: 5em;" \| a: 5em
	\|style="width:10em"\| b: 10em		\| style="width:10em;" \| b: 10em
	\|style="width: 7em"\| c: 7em		\| style="width: 7em;" \| c: 7em
	\|}		\|}

	\|} <!-- Hilfstabelle Ende -->		\|} <!-- Hilfstabelle Ende -->

	~~'''Anmerkung'''<br />~~
	~~Auf Pixelangaben - also auf Angaben mit der Einheit ''px'' statt ''em'' - sollte verzichtet werden.~~


	== CSS-Klassen für Tabellen ==		== CSS-Klassen für Tabellen ==