Änderungen

Wechseln zu: Navigation, Suche

Hilfe:Tabellenformatierung

12.997 Byte hinzugefügt, 07:05, 27. Jan. 2014
Hilfeseite für Tabellengestaltung
Auf dieser Seite wird erläutert, wie man '''Tabellen''' anlegt, anordnet und gestaltet.

==Grundlagen==
Jede Tabelle im Wiki beginnt mit <code>'''<nowiki>{|</nowiki>'''</code> und endet mit <code>'''<nowiki>|}</nowiki>'''</code>.
Dazwischen wird jede neue Zelle einer Zeile mit dem pipe-Symbol <code>'''<nowiki>|</nowiki>'''</code> begonnen, eine neue Zeile beginnt mit <code>'''<nowiki>|-</nowiki>'''</code>.

{| border="1" cellpadding="8" style="border-collapse:collapse;"
! style="background:#e0e0e0" | Code
! style="background:#e0e0e0" | Aussehen
! style="background:#e0e0e0" | Kommentar
|-
|
<pre>
{|
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|}
</pre>
|
{|
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|}
|Ganz einfaches Beispiel.
|-
|
<pre>
{|
|Zelle 1 ||Zelle 2
|-
|Zelle 3 ||Zelle 4
|}
</pre>
|
{|
|Zelle 1 ||Zelle 2
|-
|Zelle 3 ||Zelle 4
|}
|Alternative Angabe für neue Zellen.
|}
<br />

==Vordefinierte Tabellenarten==
Folgende vordefinierte Tabellenarten werden im Wiki verwendet (die Definitionen sind ggfs. nachzulesen/zu verändern in [[MediaWiki:Common.css]] und [[MediaWiki:Monobook.css]]):

{| border="1" cellpadding="8" style="border-collapse:collapse;"
! style="background:#e0e0e0" | Code
! style="background:#e0e0e0" | Aussehen
! style="background:#e0e0e0" | Kommentar
|-
|
<pre>
{| class="wikitable"
! Überschrift 1 !! Überschrift 2 !! Überschrift 3
|-
| Objekt 1 || Nummer 2 || Zahl 3
|-
| Objekt 2 || Nummer 3 || Zahl 1
|-
| Objekt 3 || Nummer 1 || Zahl 2
|}
</pre>
|
{| class="wikitable"
! Überschrift 1 !! Überschrift 2 !! Überschrift 3
|-
| Objekt 1 || Nummer 2 || Zahl 3
|-
| Objekt 2 || Nummer 3 || Zahl 1
|-
| Objekt 3 || Nummer 1 || Zahl 2
|}
|Die Standardtabelle des Wikis.
|-
|
<pre>
{| class="wikitable sortable"
! Überschrift 1 !! Überschrift 2 !! Überschrift 3
|-
| Objekt 1 || Nummer 2 || Zahl 3
|-
| Objekt 2 || Nummer 3 || Zahl 1
|-
| Objekt 3 || Nummer 1 || Zahl 2
|}
</pre>
|
{| class="wikitable sortable"
! Überschrift 1 !! Überschrift 2 !! Überschrift 3
|-
| Objekt 1 || Nummer 2 || Zahl 3
|-
| Objekt 2 || Nummer 3 || Zahl 1
|-
| Objekt 3 || Nummer 1 || Zahl 2
|}
|Standardtabelle mit Sortierfunktion.
|}
<br />

==Komplexere Tabellen==
===Rahmen===

{| border="1" cellpadding="8" style="border-collapse:collapse;"
! style="background:#e0e0e0" | Code
! style="background:#e0e0e0" | Aussehen
! style="background:#e0e0e0" | Kommentar
|-
|
<pre>
{| border="1"
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|}
</pre>
|
{| border="1"
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|}
|Rahmen um die Tabelle sowie die einzelnen Zellen.
|-
|
<pre>
{| border="1" style="border-collapse:collapse;"
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|}
</pre>
|
{| border="1" style="border-collapse:collapse;"
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|}
|Verschmelze die Rahmen von Tabelle und Zellen.
|-
|
<pre>
{| style="border:1px solid;"
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|}
</pre>
|
{| style="border:1px solid;"
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|}
|Nur Rahmen um die Tabelle.
|-
|
<pre>
{| style="border: 1px #DEB887 solid;"
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|}
</pre>
|
{| style="border: 1px #DEB887 solid;"
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|}
|Gefärbter Rahmen um die Tabelle.
|-
|
<pre>
{| border="1" style="border-collapse:collapse; border-color:#DEB887;"
|style="border-color:#DEB887;" |Zelle 1
|style="border-color:#DEB887;" |Zelle 2
|-
|style="border-color:#DEB887;" |Zelle 3
|style="border-color:#DEB887;" |Zelle 4
|}
</pre>
|
{| border="1" style="border-collapse:collapse; border-color:#DEB887;"
|style="border-color:#DEB887;" |Zelle 1
|style="border-color:#DEB887;" |Zelle 2
|-
|style="border-color:#DEB887;" |Zelle 3
|style="border-color:#DEB887;" |Zelle 4
|}
|Gefärbter Rahmen um jede Zelle.<br />Rahmenfarbe wird nicht vererbt und muss daher bei jeder Zelle einzeln definiert werden.
|}
<br />

===Hervorgehobene Zellen===
Um Zellen hervorzuheben benutzt man statt dem pipe-Symbol das Ausrufezeichen '''!''', um die Zelle zu beginnen. Der hervorgehobene Text wird dabei automatisch fett und zentriert.

{| border="1" cellpadding="8" style="border-collapse:collapse;"
! style="background:#e0e0e0" | Code
! style="background:#e0e0e0" | Aussehen
! style="background:#e0e0e0" | Kommentar
|-
|
<pre>
{| border="1"
!Zelle 1
!Zelle 2 - Inhalt
|-
|Zelle 3 - Inhalt
|Zelle 4
|}
</pre>
|
{| border="1"
!Zelle 1
!Zelle 2 - Inhalt
|-
|Zelle 3 - Inhalt
|Zelle 4
|}
|Hervorgehobene Zellen in erster Zeile ergeben Titelzeile.
|-
|
<pre>
{| border="1"
!Zelle 1 !!Zelle 2 - Inhalt
|-
|Zelle 3 - Inhalt ||Zelle 4
|}
</pre>
|
{| border="1"
!Zelle 1 !!Zelle 2 - Inhalt
|-
|Zelle 3 - Inhalt ||Zelle 4
|}
|Platzsparende Variante.
|}
<br />

===Tabellenattribute===

{| border="1" cellpadding="8" style="border-collapse:collapse;"
! style="background:#e0e0e0" | Code
! style="background:#e0e0e0" | Aussehen
! style="background:#e0e0e0" | Kommentar
|-
|
<pre>
{| border="1" style="border-spacing:10px;"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
</pre>
|
{| border="1" style="border-spacing:10px;"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
|Definiere Abstände zwischen den Zellen.
|-
|
<pre>
{| border="1" style="padding:10px;"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
</pre>
|
{| border="1" style="padding:10px;"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
|Definiere Abstand Zelleninhalt zu Zellenrahmen.
|-
|
<pre>
{| border="1" style="border-spacing:10px; padding:10px;"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
</pre>
|
{| border="1" style="border-spacing:10px; padding:10px;"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
|Kombination.
|-
|
<pre>
{| border="1" style="background:#FFF7A5;"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
</pre>
|
{| border="1" style="background:#FFF7A5;"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
|Hintergrundfarbe der gesamten Tabelle. Liste der Farben unter [[Wikipedia:de:Webfarben|Webfarben]].
|-
|
<pre>
{| border="1" style="width:100%;"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
</pre>
|
{| border="1" style="width:100%;"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
|Tabellenbreite festgelegt durch relative Angabe in Prozent der zur Verfügung stehenden Breite.
|-
|
<pre>
{| border="1" style="width:150px;"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
</pre>
|
{| border="1" style="width:150px;"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
|Tabellenbreite festgelegt durch absolute Angabe in Pixeln.
|-
|
<pre>
{| border="1" style="float:right;"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
</pre>
|
{| border="1" style="float:right;"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
|Tabelle wird rechts angeordnet.
|-
|
<pre>
{| border="1" class="centered"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
</pre>
|
{| border="1" class="centered"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
|Tabelle wird zentriert angeordnet.
|-
|
<pre>
{| border="1" style="text-align:center;"
!Zelle 1 mit viel Inhalt
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
</pre>
|
{| border="1" style="text-align:center;"
!Zelle 1 mit viel Inhalt
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
|Tabelleninhalt wird zentriert.
|}
<br />

===Zeilenattribute===

{| border="1" cellpadding="8" style="border-collapse:collapse;"
! style="background:#e0e0e0" | Code
! style="background:#e0e0e0" | Aussehen
! style="background:#e0e0e0" | Kommentar
|-
|
<pre>
{| border="1"
!Zelle 1
!Zelle 2
|- style="vertical-align:top;"
|Zelle 3
|Zelle 4
|- style="vertical-align:middle;"
|Zelle 5
|Zelle 6
|- style="vertical-align:bottom;"
|Zelle 7
|Zelle 8
|}
</pre>
|
{| border="1"
|
!Zelle 1
!Zelle 2
|- style="vertical-align:top;"
!Inhalt<br />Oben
|Zelle 3
|Zelle 4
|- style="vertical-align:middle;"
!Inhalt<br />Zentriert
|Zelle 5
|Zelle 6
|- style="vertical-align:bottom;"
!Inhalt<br />Unten
|Zelle 7
|Zelle 8
|}
|Vertikale Ausrichtung des Zelleninhalts einer ganzen Zeile.
|-
|
<pre>
{| border="1"
!Überschrift 1
!Überschrift 2
|- style="text-align:left;"
|Zelle 3
|Zelle 4
|- style="text-align:center;"
|Zelle 5
|Zelle 6
|- style="text-align:right;"
|Zelle 7
|Zelle 8
|}
</pre>
|
{| border="1"
!Überschrift 1
!Überschrift 2
|- style="text-align:left;"
|Zelle 3
|Zelle 4
|- style="text-align:center;"
|Zelle 5
|Zelle 6
|- style="text-align:right;"
|Zelle 7
|Zelle 8
|}
|Horizontale Ausrichtung des Zelleninhalts einer ganzen Zeile.
|-
|
<pre>
{| border="1"
!Zelle 1
!Zelle 2
|- style="background-color:#FFF7A5;"
|Zelle 3
|Zelle 4
|-
|Zelle 5
|Zelle 6
|}
</pre>
|
{| border="1"
!Zelle 1
!Zelle 2
|- style="background-color:#FFF7A5;"
|Zelle 3
|Zelle 4
|-
|Zelle 5
|Zelle 6
|}
|Hintergrundfarbe einer Zeile. Liste der Farben unter [[Wikipedia:de:Webfarben|Webfarben]].
|}
<br />

===Zellenattribute===

Es ist möglich, einzelnen Zellen individuelle Attribute zuzuweisen. Dabei benutzt man folgenden Code:
:<code>'''<nowiki>| Zellenattribute | Zelleninhalt</nowiki>'''</code>

{| border="1" cellpadding="8" style="border-collapse:collapse;"
! style="background:#e0e0e0" | Code
! style="background:#e0e0e0" | Aussehen
! style="background:#e0e0e0" | Kommentar
|-
|
<pre>
{| border="1"
!Zelle 1
!Zelle 2
|-
|colspan="2"|Zelle 3
|-
|Zelle 5
|Zelle 6
|}
</pre>
|
{| border="1"
!Zelle 1
!Zelle 2
|-
|colspan="2"|Zelle 3
|-
|Zelle 5
|Zelle 6
|}
|Verbinde Zellen in horizontaler Richtung.
|-
|
<pre>
{| border="1"
!Zelle 1
!Zelle 2
|-
|rowspan="2"|Zelle 3
|Zelle 4
|-
|Zelle 5
|}
</pre>
|
{| border="1"
!Zelle 1
!Zelle 2
|-
|rowspan="2"|Zelle 3
|Zelle 4
|-
|Zelle 5
|}
|Verbinde Zellen in vertikaler Richtung.
|-
|
<pre>
{| border="1"
!Zelle 1
!Zelle 2
!Zelle 3
|-
|rowspan="2" colspan="2"|Zelle 4
|Zelle 5
|-
|Zelle 6
|-
|Zelle 7
|Zelle 8
|Zelle 9
|}
</pre>
|
{| border="1"
!Zelle 1
!Zelle 2
!Zelle 3
|-
|rowspan="2" colspan="2"|Zelle 4
|Zelle 5
|-
|Zelle 6
|-
|Zelle 7
|Zelle 8
|Zelle 9
|}
|Kombination.
|-
|
<pre>
{| border="1"
! Überschrift 1
! Überschrift 2
! Überschrift 3
|-
| style="text-align:left;" | Zelle 1
| style="text-align:center;" | Zelle 2
| style="text-align:right;" | Zelle 3
|}
</pre>
|
{| border="1"
! Überschrift 1
! Überschrift 2
! Überschrift 3
|-
| style="text-align:left;" | Zelle 1
| style="text-align:center;" | Zelle 2
| style="text-align:right;" | Zelle 3
|}
|Horizontale Ausrichtung des Zelleninhalts einzelner Zellen.
|-
|
<pre>
{| border="1"
|-
!Wichtiger<br />Inhalt
| style="vertical-align:top;" | Zelle 1
| style="vertical-align:middle;" | Zelle 2
| style="vertical-align:bottom;" | Zelle 3
|}
</pre>
|
{| border="1"
|-
!Wichtiger<br />Inhalt
| style="vertical-align:top;" | Zelle 1
| style="vertical-align:middle;" | Zelle 2
| style="vertical-align:bottom;" | Zelle 3
|}
|Vertikale Ausrichtung des Zelleninhalts einzelner Zellen.
|-
|
<pre>
{| border="1"
!Zelle 1
!Zelle 2
|-
|Zelle 3
| style="background-color:#FFF7A5" |Zelle 4
|-
|Zelle 5
|Zelle 6
|}
</pre>
|
{| border="1"
!Zelle 1
!Zelle 2
|-
|Zelle 3
| style="background-color:#FFF7A5" |Zelle 4
|-
|Zelle 5
|Zelle 6
|}
|Hintergrundfarbe einer Zelle. Liste der Farben unter [[Wikipedia:de:Webfarben|Webfarben]].
|-
|
<pre>
{| border="1"
!style="width:75%;" |Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
</pre>
|
{| border="1"
!style="width:75%;" |Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
|Spaltenbreite festgelegt durch relative Angabe in Prozent der Gesamtbreite der Tabelle.
|-
|
<pre>
{| border="1"
!style="padding:10px 0px 10px 0px;" |Zelle 1
!Zelle 2
|-
|Zelle 3
|style="padding:0px 10px 0px 10px;" |Zelle 4
|}
</pre>
|
{| border="1"
!style="padding:10px 0px 10px 0px;" |Zelle 1
!Zelle 2
|-
|Zelle 3
|style="padding:0px 10px 0px 10px;" |Zelle 4
|}
|Abstand zum Rahmen der Zelle, wobei in der Reihenfolge oben, rechts, unten, links festgelegt wird.<br />Alternativ padding-top, padding-right, padding-bottom und padding-left benutzen.
|}
<br />

===Verschachtelte Tabellen===
Es ist möglich mehrere Tabellen ineinander zu verschachteln (''nested tables'').

{| border="1" cellpadding="8" style="border-collapse:collapse;"
! style="background:#e0e0e0" | Code
! style="background:#e0e0e0" | Aussehen
! style="background:#e0e0e0" | Kommentar
|-
|
<pre>
{| border="1"
!Zelle 1
!Zelle 2
!Zelle 3
|-
| Zelle 4
|
{| border="1"
| Zelle A
|-
| Zelle B
|}
| Zelle 6
|}
</pre>
|
{| border="1"
!Zelle 1
!Zelle 2
!Zelle 3
|-
| Zelle 4
|
{| border="1"
| Zelle A
|-
| Zelle B
|}
| Zelle 6
|}
|Bei komplizierten verschachtelten Tabellen verliert man möglicherweise den Überblick über den Quellcode.
|}
<br />

==Anordnung von Tabellen==
Da nicht alle Leser dieselben Bildschirmauflösungen, Einstellungen und ähnliches haben, sind die Anordnungen nicht bei jedem gleich und es kann ungewollt zu Fehldarstellungen kommen. Um eine Tabelle richtig, d.h. möglichst kompatibel darzustellen, hilft die folgende Anweisung, um die Tabelle als Objekt am rechten Rand zu platzieren, wobei X für die Tabelle steht:
:<code>'''<nowiki><div style="width:100%; float:right;"> X </div></nowiki>'''</code>

Alternativ kann man die den Tabellenstyle auch so definieren:
:<code>'''style="clear:right; float:right;"'''</code>

==Links==
*[http://meta.wikimedia.org/wiki/Help:Table Help:Table] - Hilfeartikel im Metawiki (Englisch)


[[Kategorie:Hilfe]]
202
Bearbeitungen