JoelH: Die Seite wurde neu angelegt: „Die Wikisoftware bietet eine eigene '''Syntax''', um Tabellen darzustellen. Diese Syntax ist zwar an das verbreitete Wikipedia:HTML|HTML…“

2016-10-10T07:25:13Z

Die Seite wurde neu angelegt: „Die Wikisoftware bietet eine eigene '''Syntax''', um Tabellen darzustellen. Diese Syntax ist zwar an das verbreitete Wikipedia:HTML|HTML…“

Neue Seite

Die Wikisoftware bietet eine eigene '''Syntax''', um Tabellen darzustellen. Diese [[Wikipedia:Syntax|Syntax]] ist zwar an das verbreitete [[Wikipedia:HTML|HTML]] angelehnt, erleichtert jedoch durch eine vereinfachte Schreibweise die Arbeit an komplizierteren Tabellen. Diese Seite bietet eine Kurzübersicht, wie Tabellen erstellt werden.

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 <tt>style</tt>-Attribut verwendet werden, wodurch sich beliebige [[Wikipedia:Cascading Style Sheets|CSS]]-Formatierungen realisieren lassen. Einzelne Zeilen einer Tabelle lassen sich ebenfalls formatieren, einzelne Spalten jedoch nicht, dies muss zellenweise geschehen.
{{TOC_rechts}}
== Wann Tabellen einsetzen? ==

'''Tabellen''' sind ein gutes Mittel, um gleichartige Informationen übersichtlich zu gestalten. Insbesondere als sortierbare Tabellen bieten sie einen schnellen Überblick beispielsweise über Jahreszahlen, Namen oder Orte.

Andererseits sind Tabellen komplizierter zu erstellen als normaler Text. Deshalb sollten sie nur dort eingesetzt werden, wo sie tatsächlich für bessere Übersicht sorgen, ansonsten sollten einfache Listen verwendet werden.

== Einfache Tabelle ==
Eine einfache Beispieltabelle:

{| class="std_table"
|-
! Autor !! erstes Heft !! letztes Heft !! Gesamt !! Bemerkung
|-
| [[Michelle Stern]] || 79 || 150 || 15 || Michelle Stern ist ein Pseudonym von Stefanie Jahnke
|-
| [[Sascha Vennemann]] || 81 || 148 || 7.5 || Lektor der Serie ab ca. Band 50
|-
| [[Simon Borner]] || 100 || 151 || 6.5 || Pseudonym von Christian Humberg
|-
| [[Jana Paradigi]] || 127 || 127 || 1 ||
|-
| [[Guido Seifert]] || 120 || 148 || 5 ||
|-
| [[Stan Hamilton]] || 123 || 140 || 2 || unbekanntes Pseudonym
|-
| [[Thomas Höhl]] || 129 || 149 || 2 || hat seit Band 126 die redaktionelle Arbeit an Sternenfaust übernommen. Er schreibt jetzt die Exposés der Romane und ist ebenfalls als Autor für die Serie tätig.
|}

Die obige Tabelle wird durch den folgenden Quelltext erzeugt:
<pre>
{| class="std_table"
|-
! Autor !! erstes Heft !! letztes Heft !! Gesamt !! Bemerkung
|-
| [[Michelle Stern]] || 79 || 150 || 15 || Michelle Stern ist ein Pseudonym von Stefanie Jahnke
|-
| [[Sascha Vennemann]] || 81 || 148 || 7.5 || Lektor der Serie ab ca. Band 50
|-
| [[Simon Borner]] || 100 || 151 || 6.5 || Pseudonym von Christian Humberg
|-
| [[Jana Paradigi]] || 127 || 127 || 1 ||
|-
| [[Guido Seifert]] || 120 || 148 || 5 ||
|-
| [[Stan Hamilton]] || 123 || 140 || 2 || unbekanntes Pseudonym
|-
| [[Thomas Höhl]] || 129 || 149 || 2 || hat seit Band 126 die redaktionelle Arbeit an Sternenfaust übernommen. Er schreibt jetzt die Exposés der Romane und ist ebenfalls als Autor für die Serie tätig.
|}
</pre>

'''Erläuterungen'''

* Die Zeichenfolge (Tag) <code>{|</code> beginnt eine Tabelle, während <code>|}</code> sie abschließt. Beide Tags müssen im Quelltext an einem Zeilenanfang stehen.
* Das Attribut <code>class="std_table"</code> bewirkt, dass die ganze Tabelle nach den Vorgaben der Klasse <code>std_table</code> 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 <code>!</code> markierte Kopfzeilen vor.
* Zeilen, die mit einem Ausrufezeichen (<code>!</code>) 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 (<code>|</code>).
* Das Tag <code>|-</code> beginnt eine neue Tabellenzeile, falls es im Quelltext an einem Zeilenanfang steht.
* Die Zeichen <code>||</code> bzw. <code>!!</code> trennen nebeneinander liegende Tabellenzellen.
* Nebeneinander liegende Zellen können auch durch einen Zeilenumbruch gefolgt von einem einfachen <code>|</code>-Zeichen dargestellt werden (siehe nächste Tabelle).
* Die Zeichenfolge <code>&nbsp;</code> anstatt eines normalen Leerzeichens verhindert einen Zeilenumbruch zwischen den beiden Wörtern, die dieses geschützte Leerzeichen umschließen.
* Die Jahreszahlen werden durch <code><tt></code> mit fester Zeichenbreite dargestellt, um sicherzugehen, dass sie gleichmäßig untereinander ausgerichtet werden.

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

{| class="std_table 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
|}

Diese sortierbare Tabelle wird durch folgenden Code erzeugt:
<pre>
{| class="std_table 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
|}
</pre>

'''Erläuterungen'''
* Das <code>sortable</code> in <code>class="std_table sortable"</code> erlaubt die Sortierung der Tabelle nach wählbaren Spalten.
* Mit <code>class="unsortable"</code> 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:
{|
| 

<pre>
{| style="text-align:right;"
|+ 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>
|}
</pre>

| style="width:2em" | 
| 

{| style="text-align:right;"
|+ 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>
|}

|} 

'''Erläuterungen'''

* 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.

=== Zellfärbung, Spaltenbreite, Textausrichtung ===
Dieses Beispiel erläutert, wie man sortierbare Tabellen erstellt, wie man Zellen färbt, den Zelleninhalt rechts ausrichtet und die Spaltenbreite einstellt.

{| class="std_table sortable"
|+ style="padding-bottom:1em;" | Kaiser der Flavischen Dynastie
|- class="hintergrundfarbe6"
! width="15%" | Kaiser !! width="30%" | Vollständiger Name
! width="15%" | Regierungszeit !! class="unsortable" width="40%" | Anmerkungen
|-
| [[Vespasian]] || Titus Flavius Vespasianus
| style="text-align:right" | 69–79 || konsolidierte Verwaltung und Finanzen des Reiches
|-
| [[Titus]] || Titus Flavius Vespasianus
| style="text-align:right" | Mitte 79–81 || eröffnete das [[Kolosseum]] in Rom
|-
| [[Domitian]] || Titus Flavius Domitianus
| style="text-align:right" | 81–96 || beendete römische Expansion in Germanien
|-
| [[Lucius Antonius Saturninus|Saturninus]] || Lucius Antonius Saturninus
| style="text-align:right" class="hintergrundfarbe5" | 89 || Gegenkaiser in Germanien, gefallen
|}

Der Quelltext hierfür sieht folgendermaßen aus:

<pre>
{| class="std_table sortable"
|+ style="padding-bottom:1em;" | Kaiser der Flavischen Dynastie [[…]]
|- class="hintergrundfarbe6"
! width="15%" | Kaiser !! width="30%" | Vollständiger Name
! width="15%" | Regierungszeit !! class="unsortable" width="40%" | Anmerkungen
|-
| [[Vespasian]] || Titus Flavius Vespasianus
| style="text-align:right" | 69–79 || konsolidierte Verwaltung und Finanzen des Reiches
|-
| [[Titus]] || Titus Flavius Vespasianus
| style="text-align:right" | Mitte 79–81 || eröffnete das [[Kolosseum]] in Rom
|-
| [[Domitian]] || Titus Flavius Domitianus
| style="text-align:right" | 81–96 || beendete römische Expansion in Germanien
|-
| [[Lucius Antonius Saturninus|Saturninus]] || Lucius Antonius Saturninus
| style="text-align:right" class="hintergrundfarbe5" | 89 || Gegenkaiser in Germanien, gefallen
|}
</pre>

'''Erläuterungen'''

* Der Befehl <code>width="15%"</code> weist einer Spalte 15 % der Gesamtbreite der Tabelle als Breite zu.
* Die Ausrichtung von Text rechtsbündig in einer Zelle erreicht man durch die Cascading Style Sheets-Anweisung <code>style="text-align:right"</code>.
* Andere Hintergrundfarben können mittels <code>|- class="hintergrundfarbeX"</code> nach <code>|-</code> für die ganze Zeile oder <code>|</code> für eine einzelne Zelle vergeben werden, wobei das <code>X</code> für eine Zahl von 1 bis 9 steht, die wiederum eine von 9 Standardfarben gemäß [[Hilfe:Farben#Hintergrundfarben]] bezeichnet. Außerhalb des Artikelnamensraumes können Farben außer durch ihren englischen Namen auch als sechs hexadezimale Zeichen eingegeben werden, wobei die ersten beiden für die Intensität des Rotanteils von 00 bis ff (0 bis 256 dezimal) stehen, die nächsten beiden für den Grünanteil und die letzten beiden für den Blauanteil, das heißt, dass <code>#ff0000</code> die Farbe Rot bedeutet, <code>#00ff00</code> steht für Grün und <code>#0000ff</code> steht für Blau. Durch eine Mischung erhält man beispielsweise Violett: <code>#ff00ff</code>.
* Leere Zellen können durch einen einfachen Abstand erzeugt werden, sie werden beim Sortieren an den Anfang gestellt, solche mit <code>&nbsp;</code> an das Ende.

=== Verbundene Tabellenzellen ===
Zellen innerhalb einer Tabelle können verbunden werden:

'''colspan'''

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

<pre style="width:75%">
{| class="std_table" style="text-align:center"
| A
| B
| C
|-
| colspan="3" | eine Zeile
|}
</pre>
<br style="clear:both;" clear="all" />

'''rowspan'''

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

<pre style="width:75%">
{| class="std_table" style="text-align:center"
| A
| rowspan="3" | eine Spalte
|-
| B
|-
| C
|}
</pre>
<br style="clear:both;" clear="all" />

'''colspan + rowspan'''

{| class="std_table 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
|}

<pre style="width:75%">
{| class="std_table" style="text-align:center"
| colspan="2" style="text-align:center" | A
|- style="text-align:center"
| B
| rowspan="2"| eine Spalte
|- style="text-align:center"
| C
|}
</pre>

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

=== Tabellen nebeneinander ===
{|
| 

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

<div style="float:left;">
{| class="std_table"
|+ Rechte Tabelle
! Überschrift 1 || Überschrift 2
|-
| Feld 1 || Feld 2
|}
</div>
</pre>

| style="width:2em" | 
| 

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

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

|} 

=== Gleich breite Spalten ===
{|
| 

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

| style="width:2em" | 
| 

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

|} 

'''Anmerkung'''<br />
Auf Pixelangaben (also auf Angaben mit der Einheit ''px'' statt ''[[Em (Schriftsatz)|em]]'') sollte verzichtet werden.

== 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.

=== std_table ===
Mittels <code>class="std_table"</code> im Tabellenkopf lässt sich eine blaugrau getönte Tabelle mit sichtbaren, wenngleich dezenten Zellgrenzen erstellen. Zwischen Zellinhalt und Rand wird etwas „Luft“ gelassen. Die Standardtabelle ohne <code>std_table</code> 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 <code>class="sortable"</code> 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 <code>class="unsortable"</code> markiert werden, so werden Sortierfunktion und -symbol unterdrückt. Mit der gleichen Angabe können auch einzelne Tabellen''zeilen'' von der Sortierung ausgenommen werden.

=== Ausrichtung der Tabelle ===

Normalerweise werden Tabellen in Artikeln linksbündig ohne Textumfluss dargestellt. Um Tabellen rechtsbündig oder mit Textumfluss darzustellen, können folgende CSS-Klassen genutzt werden.

{| class="std_table float-left"
|+ Linksbündig mit Textumfluss
|-
! Name !! Vorname !! Nachname
|-
|
| Bernd
| Müller
|-
|
| Hans
| Zehnder
|-
|
| Stefan
| Ackermann
|}

{| class="std_table float-right"
|+ Rechtsbündig mit Textumfluss
|-
! Name !! Vorname !! Nachname
|-
| Bernd
| Müller
|-
| Hans
| Zehnder
|-
| Stefan
| Ackermann
|}

Mit der Klasse „float-left“ (<code>class="std_table float-left"</code>) kann eine Tabelle linksbündig mit Textumfluss dargestellt werden. Analog dazu kann mit der Klasse „float-right“ (<code>class="std_table float-right"</code>) eine Tabelle rechtsbündig mit Textumfluss dargestellt werden.
[[Kategorie:Hilfeseiten|Tabellen]]

Hilfe:Tabellen - Versionsgeschichte

JoelH: Die Seite wurde neu angelegt: „Die Wikisoftware bietet eine eigene '''Syntax''', um Tabellen darzustellen. Diese Syntax ist zwar an das verbreitete Wikipedia:HTML|HTML…“