Tabellen können in Media Wiki Seiten entweder direkt mit HTML Tabellenelementen geschrieben werden oder mit dem Wikicode. HTML Tabellenelemente und ihr Gebrauch werden auf verschiedenen Webseiten beschrieben und werden hier nicht besprochen. Der Wikicode nutzt Buchstaben Symbole um die Tabelle Struktur im Artikel zu bilden, die in der Ansicht durch HTML Tabellenelementen ersetzt werden.
Generel sollte man die Verwendung von Tabellen vermeiden, ausser es geht wirklich nicht anders. Der Tabellenaufbau kompliziert meist das bearbeiten von Seiten.
Zusammenfassung Wiki Tabellen Code
Wiki Code |
vgl. HTML Code |
Beschreibung
|
{| |
<table> |
Tabellenanfang
|
|+ |
|
Tabellenüberschrift, optional; nur einmal pro Tabelle zwischen Tabellenanfang und erster Reihe definierbar
|
|- |
<tr> |
neue Tabellenzeile
|
! |
<th> |
Tabellenzeilen Kopf, optional. Consecutive table headers may be added on same line separated by double marks (!!) or start on new lines, each with its own single mark (!).
|
| |
<td> |
Tabellenzelle, Pflicht! Consecutive table data cells may be added on same line separated by double marks (||) or start on new lines, each with its own single mark (|).
|
|} |
</table> |
Tabellenende
|
- Die angegebenen Zeichen müssen am Zeilenanfang stehen, ausgenommen die Doppelten || und !! für optional aufeinanderfolgende Zeilen in einer Reihe.
- XHTML - Eigenschaften. Each mark, except table end, optionally accepts one or more XHTML attributes. Attributes must be on the same line as the mark. Separate attributes from each other with a single space.
- Cells and caption (| or ||, ! or !!, and |+) hold content. So separate any attributes from content with a single pipe (|). Cell content may follow on same line or on following lines.
- Table and row marks ({| and |-) do not directly hold content. Do not add pipe (|) after their optional attributes. If you erroneously add a pipe after attributes for the table mark or row mark the parser will delete it and your final attribute if it was touching the erroneous pipe!
- Content may (a) follow its cell mark on the same line after any optional XHTML attributes or (b) on lines below the cell mark. Content that uses wiki markup that itself needs to start on a new line, such as lists, headers, or nested tables, must of course be on its own new line.
Einfache Tabelle
Einfach Form
Die folgende Tabelle hat keine Ränder oder gute Leerräume. Zeigt aber den einfachen Wiki Code für eine Tabellenstruktur
Anzeige in Wiki
|
Wiki Code
|
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{|
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|
Alternative
For more table-ish looking wiki markup cells can be listed on one line separated by ||. This does not scale well for longer cell content such as paragraphs. It works well for short bits of content however, such as our example table.
Extra spaces within cells in the wiki markup can be added, as I have done in the wiki markup below, to make the wiki markup itself look better but they do not effect the actual table rendering.
HTML attributes can be added to this table following the examples in other tables on this page but have been left out of the following example for simplicity.
Orange |
Apfel |
more
|
Brot |
Torte |
more
|
Butter |
Eis |
and more
|
|
{|
| Orange || Apfel || more
|-
| Brot || Torte || more
|-
| Butter || Eis || and more
|}
|
Mit HTML Eigenschaften
Durch das hinzufügen von HTML Eigenschaften lässt sich das Aussehen der Tabelle verändern.
border="1"
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{| border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|
align="center" border="1"
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{| align="center" border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|
align="right" border="1"
Eigenschaften lassen sich auch auf individuelle Zellen anwenden. Zahlen zum Beispiel sehen besser aus, wenn sie rechtsbündig stehen.
Orange
|
Apfel
|
12,333.00
|
Brot
|
Torte
|
500.00
|
Butter
|
Eis
|
1.00
|
|
{| border="1"
|Orange
|Apfel
|align="right"|12,333.00
|-
|Brot
|Torte
|align="right"|500.00
|-
|Butter
|Eis
|align="right"|1.00
|}
|
Man kann Eigenschaften auch nur auf bestimmte Reihen anwenden.
Orange
|
Apfel
|
12,333.00
|
Brot
|
Torte
|
500.00
|
Butter
|
Eis
|
1.00
|
|
{| border="1"
|Orange
|Apfel
|align="right"|12,333.00
|-
|Brot
|Torte
|align="right"|500.00
|- style="font-style:italic;color:green;"
|Butter
|Eis
|align="right"|1.00
|}
|
cellspacing="0" border="1"
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{| cellspacing="0" border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|
cellpadding="20" cellspacing="0" border="1"
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{| cellpadding="20" cellspacing="0" border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|
Mit HTML Eigenschaften und CSS Definitionen
CSS Angaben können in Kombination mit oder ohne HTML Eigenschaften verwendet werden.
style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{| style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|
Table mit TH Kopfzeile
TH (HTML Tabellenkopf) kann mit einem ! vor dem | erstellt werden. Diese Kopfzeile erscheint für gewöhnlich in fett und zentriert.
Tabellenkopf
pro Spalte
lecker
|
leckerer
|
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{| border="1" cellpadding="20" cellspacing="0"
!lecker
!leckerer
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|
Colspan="2"
leckerer
|
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{| border="1" cellpadding="20" cellspacing="0"
! colspan="2"|leckerer
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|
seitliche Überschrift
standardmäßig
Obst
|
Orange
|
Apfel
|
Hauptspeise
|
Brot
|
Torte
|
Zutaten
|
Butter
|
Eis
|
|
{| border="1" cellpadding="20" cellspacing="0"
!Obst
|Orange
|Apfel
|-
!Hauptspeise
|Brot
|Torte
|-
!Zutaten
|Butter
|Eis
|}
|
rechtsbündig
Seitliche Überschriften können wie folgt rechtbündig angeordnet werden.
Obst
|
Orange
|
Apfel
|
Hauptspeise
|
Brot
|
Torte
|
Zutaten
|
Butter
|
Eis
|
|
{| border="1" cellpadding="20" cellspacing="0"
!align="right" |Obst
|Orange
|Apfel
|-
!align="right" |Hauptspeise
|Brot
|Torte
|-
!align="right" |Zutaten
|Butter
|Eis
|}
|
Beschriftung
Eine Tabellenbeschriftung kann wie folgt über jeder Tabelle hinzugefügt werden.
Essenssachen
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{| border="1" cellpadding="20" cellspacing="0"
|+Essenssachen
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|
Eigenschaften können der Beschriftung wie folgt zugewiesen werden
Essenssachen
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:#e76700;"|''Essenssachen''
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|
Table with H1, H2, H3 etc. headings
HTML H1, H2, H3, H4 etc. headings can be created the standard wiki markup way with ==equal== signs and must be on a line all by themselves to work.
Preview the whole table. If you click on an edit tab for a heading within a table, edit, and preview, the parent table will display erroneously broken because part of it will be missing.
Keep the heading hierarchy consistant with the rest of the page so that the table of contents at page top works correctly.
Yummiest
|
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{| border="1" cellpadding="20" cellspacing="0"
|colspan="2"|
===Yummiest===
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|