Hilfe:Tabellen

Um die Zellen einer Tabelle zu formatieren, lassen sich sowohl für die Tabelle als Ganzes als auch für einzelne Zellen HTML-Attribute angeben. Insbesondere kann das style-Attribut verwendet werden, wodurch sich beliebige CSS-Formatierungen realisieren lassen. Einzelne Zeilen einer Tabelle lassen sich ebenfalls formatieren, einzelne Spalten jedoch nicht, dies muss zellenweise geschehen.

Einfache Tabelle

Die einfachste Form einer Tabelle

Überschrift	Überschrift	Überschrift
Beispiel1	Beispiel2	Beispiel3
Beispiel4	Beispiel5	Beispiel6
Beispiel7	Beispiel8	Beispiel9

Der Quelltext zur obigen Tabelle:

{|
|-
| Überschrift || Überschrift || Überschrift
|-
| Beispiel1 || Beispiel2 || Beispiel3
|-
| Beispiel4 || Beispiel5 || Beispiel6
|-
| Beispiel7 || Beispiel8 || Beispiel9
|}

Tabelle mit Rahmen

Überschrift	Überschrift	Überschrift
Beispiel1	Beispiel2	Beispiel3
Beispiel4	Beispiel5	Beispiel6
Beispiel7	Beispiel8	Beispiel9

Der Quelltext zur obigen Tabelle:

{| class="wikitable"
|-
! Überschrift !! Überschrift !! Überschrift
|-
| Beispiel1 || Beispiel2 || Beispiel3
|-
| Beispiel4 || Beispiel5 || Beispiel6
|-
| Beispiel7 || Beispiel8 || Beispiel9
|}

Erläuterungen

• Die Zeichenfolge (Tag) {| beginnt eine Tabelle, während |} sie abschließt. Beide Tags müssen im Quelltext an einem Zeilenanfang stehen.
• Das Attribut class="wikitable" bewirkt, dass die ganze Tabelle nach den Vorgaben der Klasse wikitable formatiert wird. Diese sieht unter anderem Trennlinien zwischen den Zellen, zusätzlichen Platz zwischen Zelleninhalt und Zellenrand (das sogenannte cellpadding) sowie einen angedunkelten Hintergrund für durch ! markierte Kopfzeilen vor.
• Zeilen, die mit einem Ausrufezeichen (!) beginnen, definieren Kopfzeilen von Tabellen. Der Text in einer Zelle einer solchen Zeile wird zentriert und fett gedruckt. Gewöhnliche Tabellenzeilen beginnen dagegen mit einem senkrechten Trennstrich (|).
• Das Tag |- beginnt eine neue Tabellenzeile, falls es im Quelltext an einem Zeilenanfang steht.
• Die Zeichen || bzw. !! trennen nebeneinander liegende Tabellenzellen.
• Nebeneinander liegende Zellen können auch durch einen Zeilenumbruch gefolgt von einem einfachen |-Zeichen dargestellt werden (siehe nächste Tabelle).
• Die Zeichenfolge   (non breaking space) anstatt eines normalen Leerzeichens verhindert einen Zeilenumbruch zwischen den beiden Wörtern, die dieses geschützte Leerzeichen umschließen.

Sortierbare Tabelle

Sortierbare Tabellen ermöglichen verschiedene und vom Leser wählbare Sichtweisen auf eine Sache. Dazu muss class="sortable" im Tabellenkopf angegeben werden.

ABC	Länge	Breite	Farbe	Bemerkung
a	1100	1000	hellblau	Blau ist der Himmel
b	30	2	grün	Grün ist das Gras
c	100	90	rot	Rot ist die Liebe

Diese sortierbare Tabelle wird durch folgenden Code erzeugt:

{| class="wikitable sortable"
! ABC !! Länge !! Breite !! Farbe !! class="unsortable" | Bemerkung
|-
| a
| style="text-align:right" | 1100
| style="text-align:right" | 1000
| hellblau
| Blau ist der Himmel
|-
| b
| style="text-align:right" | 30
| style="text-align:right" | 2
| grün
| Grün ist das Gras
|-
| c
| style="text-align:right" | 100
| style="text-align:right" | 90
| rot
| Rot ist die Liebe
|}

Erläuterungen

• Das sortable in class="wikitable sortable" erlaubt die Sortierung der Tabelle nach wählbaren Spalten.
• Mit class="unsortable" können einzelne Spalten von der Sortierbarkeit ausgenommen werden.

Layout

Tabellenüberschriften, Trennstriche

Das folgende Beispiel zeigt, wie man eine Tabellenüberschrift erzeugt und wie sich Trennstriche zwischen bestimmten Zellen realisieren lassen:

{| style="text-align:right;width:150px;" |+ Addition von vier Zahlen |- | <tt>365</tt> |- | <tt>+ 123</tt> |- | <tt>+ 235</tt> |- | <tt>+ 277</tt> |- | style="border-top: 1pt black solid" | <tt>1000</tt> |}

Addition von vier Zahlen 365 + 123 + 235 + 277 1000

Erläuterungen

• Die Zeile, die mit |+ beginnt, bezeichnet den Titel der Tabelle. Beachte: Das +-Zeichen muss unmittelbar auf das |-Zeichen folgen (kein Leerzeichen dazwischen).
• Der Befehl border-top: 1pt weist der Zelle einen oberen Rand mit definierter Breite zu. Weitere Befehle sind: border-left, border-right und border-bottom für einen Rand links, rechts oder unten. border: 1pt setzt alle vier Ränder.
• Der Befehl width="150px" weist der Tabelle als Breite 150 Pixel zu.
• Die Ausrichtung von Text rechtsbündig in einer Zelle erreicht man durch die CSS-Anweisung style="text-align:right".

Verbundene Tabellenzellen

Zellen innerhalb einer Tabelle können verbunden werden:

colspan

A	B	C
eine Zeile

{| class="wikitable" style="text-align:center"
| A
| B
| C
|-
| colspan="3" style="background:#EED5B7" | eine Zeile
|}

rowspan

A	eine Spalte
B
C

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

colspan + rowspan

A
B	eine Spalte
C

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

Tabellen nebeneinander

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

Linke Tabelle Überschrift 1 Überschrift 2 Feld 1 Feld 2 Rechte Tabelle Überschrift 1 Überschrift 2 Feld 1 Feld 2

Sollen die Tabellen nicht von Text (einschließlich nachfolgender Überschriften) umflossen werden, kann

<br style="clear:both;" />

unterhalb angefügt werden.

Gleich breite Spalten

{| class="wikitable" |- | style="width: 5em;" | a: 5em | style="width:10em;" | b: 10em | style="width: 7em;" | c: 7em |} {| class="wikitable" |- | style="width: 5em;" | a: 5em | style="width:10em;" | b: 10em | style="width: 7em;" | c: 7em |}

a: 5em b: 10em c: 7em a: 5em b: 10em c: 7em

CSS-Klassen für Tabellen

Um Tabellen sowohl in ihren Inhalten als auch bereits im Kopfbereich weitgehend frei von Elementen zu halten, die die Darstellungsweise betreffen, wurden für das global wirksame CSS einige Klassen entwickelt, die es erlauben, wichtige Stile mit wenigen anschaulichen Anweisungen festzulegen.

wikitable

Mittels class="wikitable" im Tabellenkopf lässt sich eine schwach grau getönte Tabelle mit sichtbaren, wenngleich dezenten Zellgrenzen erstellen. Zwischen Zellinhalt und Rand wird etwas „Luft“ gelassen. Die Standardtabelle ohne wikitable ist rahmenlos und hat einen weißen Hintergrund, was für Layout-Zwecke teilweise erwünscht ist, sich jedoch in bestimmten Fällen zu schlecht vom Text absetzt.

sortable

Mittels class="sortable" werden Spalten sortierbar. Das heißt, wenn JavaScript für die Wikipedia aktiviert ist, können Tabellen durch Klick auf das entsprechende Symbol in einem Spaltenkopf nach dieser Spalte auf- und absteigend sortiert werden. Die mitunter unsortierte Ausgangs-Darstellung erhält man durch Neuladen der Seite. Einzelne Spalten, für die eine Sortierung als unsinnig angesehen wird, können mittels der spaltenweisen Angabe von class="unsortable" markiert werden, so werden Sortierfunktion und -symbol unterdrückt. Mit der gleichen Angabe können auch einzelne Tabellenzeilen von der Sortierung ausgenommen werden.