News (06 Aug 2024): Das Wiki läuft jetzt auf einem neuen Server. Aufgrund eines Upgrades von PHP mussten die Wiki-Software und die DPL-Erweiterung aktualisiert werden. Bitte meldet Fehler auf der Hauptseiten-Diskussion.

Hilfe:Tabellen

Aus GuildWiki
Zur Navigation springenZur Suche springen

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 Tabellencode

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. Außer dem Tabellenende akzeptiert jedes Zeichen ein oder mehrere optionale XHTML Eigenschaften. Die Eigenschaften müssen auf derselben Zeile stehen, wie das Zeichen und werden mit einem Leerzeichen voneinander getrennt.
    • Kästchen, Überschriften und Kopfzeilen (| oder ||, ! oder !!, und |+) haben einen Textinhalt. Daher werden Eigenschaften vom Inhalt mit einem einfachen Pipesymbol (|) getrennt. Der Kästcheninhalt kann auf derselben oder darauffolgenden Zeilen wie die Eigenschaften stehen.
    • Tabellen- und Zeilenzeichen ({| und |-) haben keinen direkten Inhalt. Setze kein Pipesymbol (|) nach ihren optionalen Eigenschaften. Wird fehlerhafterweise ein Pipesymbol nach den Eigenschaften gesetzt, wird der Parser dieses und die letzte Eigenschaft löschen, falls es direkt am Pipesymbol war.
  • Inhalt kann (a) dem Kästchenzeichen auf derselben Zeile nach optionalen XHTML-Eigenschaften folgen oder (b) in Zeilen unter dem Kästchenzeichen. Inhalte mit Wiki Markup, die selbst eine neue Zeile benötigen, z.B. Listen, Überschriften oder verschachtelte Tabellen, müssen selbstverständlich auf ihren eigenen neuen Zeilen stehen.

Einfache Tabelle

Einfach Form

Die folgende Tabelle hat keine Ränder oder zusätzliche 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

Damit der Wikicode mehr wie eine Tabelle aussieht, können Tabellenzellen auf einer Zeile von || getrennt stehen. Dies ist ungünstig bei längerem Zelleninhalt, hilft aber bei kürzeren Inhalten wie im Beispiel der Übersichtlichkeit.

Zusätzliche Leerzeichen innerhalb der Tabelle können zur besseren Übersichtlichkeit hunzugefügt werden, wie in der Tabelle unten. Diese wirken sich nicht auf die Tabelle selbst aus.

HTML Eigenschaften können zu den Tabellenbeispielen, die auf dieser Seite stehen, hinzugefügt werden, wurden in diesem Beispiel jedoch der Einfachkeit halber ausgelassen.

Orange Apfel mehr
Brot Torte mehr
Butter Eis und mehr 
{|
|  Orange    ||   Apfel   ||   mehr
|-
|   Brot    ||   Torte     ||   mehr
|-
|   Butter   || Eis ||  und mehr
|}

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"

Mit "cellspacing=0" werden Zellenzwischenräume entfernt.

Orange Apfel
Brot Torte
Butter Eis 
{| cellspacing="0" border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis 
|}

cellpadding="20" cellspacing="0" border="1"

"cellpadding" legt eine Standardgröße für Zellen fest.

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.

Speisen
Orange Apfel
Brot Torte
Butter Eis 
{| border="1" cellpadding="20" cellspacing="0"
|+Speisen
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis 
|}

Eigenschaften können der Beschriftung wie folgt zugewiesen werden

Speisen
Orange Apfel
Brot Torte
Butter Eis 
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:#e76700;"|''Speisen''
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis 
|}

Tabellen mit H1, H2, H3 etc. Überschriften

HTML H1, H2, H3, H4 etc. können mit den dem Standardwikicode ==entsprechenden== Zeichen erzeugt werden und müssen alleine in einer Zeile stehen, um zu funktionieren.

Wenn du dir eine Vorschau der Seite zeigen lässt, so achte darauf, dass die ganze Tabelle in der Vorschau ist. Wenn man auf den Bearbeiten-button einer Überschrift in einer Tabelle klickt, wird die Vorschau fälschlicherweise keine Tabelle oder nur Bruchstücke zeigen, weil wichtige Teile der Tabelle fehlen.

Achte darauf, dass die Überschriften innerhalb von Tabellen zu den außerhalb der Tabellen passen, damit die Inhaltstabelle am Seitenanfang alles korrekt anzeigt.

Am leckersten

Orange Apfel
Brot Torte
Butter Eis 
{| border="1" cellpadding="20" cellspacing="0"
|colspan="2"|
===Am leckersten===
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butte
|Eis 
|}

Am leckersten

|- |Orange |Apfel |- |Brot |Torte |- |Butter |Eis |}

|}

Abgerufen von „https://www.guildwiki.de/gwiki/index.php?title=Hilfe:Tabellen&oldid=389927“