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: Unterschied zwischen den Versionen

Aus GuildWiki
Zur Navigation springenZur Suche springen
Keine Bearbeitungszusammenfassung
 
(übersetzungen)
Zeile 3: Zeile 3:
Generel sollte man die Verwendung von Tabellen vermeiden, ausser es geht wirklich nicht anders. Der Tabellenaufbau kompliziert meist das bearbeiten von Seiten.
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 ==
== Zusammenfassung Wiki Tabellencode ==


{|cellpadding="5" cellspacing="0" border="1"
{|cellpadding="5" cellspacing="0" border="1"
Zeile 23: Zeile 23:


*Die angegebenen Zeichen müssen am '''Zeilenanfang''' stehen, ausgenommen die Doppelten || und !! für optional aufeinanderfolgende Zeilen in einer Reihe.
*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.  
*'''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.  
**Cells and caption (<nowiki>| or ||, ! or !!, and |+</nowiki>) hold content. So separate any attributes from content with a single pipe (|). Cell content may follow on same line or on following lines.
**Kästchen, Überschriften und Kopfzeilen (<nowiki>| oder ||, ! oder !!, und |+</nowiki>) 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.
**Table and row marks (<nowiki>{| and |-</nowiki>) 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!
**Tabellen- und Zeilenzeichen (<nowiki>{| und |-</nowiki>) 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.
*'''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.
*'''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==
==Einfache Tabelle==


===Einfach Form===
===Einfach Form===
Die folgende Tabelle hat keine Ränder oder gute Leerräume. Zeigt aber den einfachen Wiki Code für eine Tabellenstruktur
Die folgende Tabelle hat keine Ränder oder zusätzliche Leerräume. Zeigt aber den einfachen Wiki Code für eine Tabellenstruktur
{| width="100%"
{| width="100%"
|+
|+
Zeile 63: Zeile 63:


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


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.
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 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.
HTML Eigenschaften können zu den Tabellenbeispielen, die auf dieser Seite stehen, hinzugefügt werden, wurden in diesem Beispiel jedoch der Einfachkeit halber ausgelassen.
{| width="100%"
{| width="100%"
|width="50%"|
|width="50%"|
{|
{|
|  Orange    ||  Apfel  ||  more
|  Orange    ||  Apfel  ||  mehr
|-
|-
|  Brot    ||  Torte    ||  more
|  Brot    ||  Torte    ||  mehr
|-
|-
|  Butter  || Eis ||  and more
|  Butter  || Eis ||  und mehr
|}
|}
|width="50%"|
|width="50%"|
<pre>
<pre>
{|
{|
|  Orange    ||  Apfel  ||  more
|  Orange    ||  Apfel  ||  mehr
|-
|-
|  Brot    ||  Torte    ||  more
|  Brot    ||  Torte    ||  mehr
|-
|-
|  Butter  || Eis ||  and more
|  Butter  || Eis ||  und mehr
|}
|}
</pre>
</pre>
Zeile 218: Zeile 218:


====cellspacing="0" border="1"====
====cellspacing="0" border="1"====
Mit "cellspacing=0" werden Zellenzwischenräume entfernt.
{| width="100%"
{| width="100%"
|width="50%"|
|width="50%"|
Zeile 245: Zeile 246:
|}
|}
====cellpadding="20" cellspacing="0" border="1"====
====cellpadding="20" cellspacing="0" border="1"====
"cellpadding" legt eine Standardgröße für Zellen fest.
{| width="100%"
{| width="100%"
|width="50%"|
|width="50%"|
Zeile 447: Zeile 449:
|width="50%"|
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
{| border="1" cellpadding="20" cellspacing="0"
|+Essenssachen
|+Speisen
|-
|-
|Orange
|Orange
Zeile 461: Zeile 463:
<pre>
<pre>
{| border="1" cellpadding="20" cellspacing="0"
{| border="1" cellpadding="20" cellspacing="0"
|+Essenssachen
|+Speisen
|-
|-
|Orange
|Orange
Zeile 480: Zeile 482:
|width="50%"|
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:#e76700;"|''Essenssachen''
|+align="bottom" style="color:#e76700;"|''Speisen''
|-
|-
|Orange
|Orange
Zeile 494: Zeile 496:
<pre>
<pre>
{| border="1" cellpadding="20" cellspacing="0"
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:#e76700;"|''Essenssachen''
|+align="bottom" style="color:#e76700;"|''Speisen''
|-
|-
|Orange
|Orange
Zeile 508: Zeile 510:
|}
|}


==Table with H1, H2, H3 etc. headings==
==Tabellen mit H1, H2, H3 etc. Überschriften==


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


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


Keep the heading hierarchy consistant with the rest of the page so that the table of contents at page top works correctly.
Achte darauf, dass die Überschriften innerhalb von Tabellen zu den außerhalb der Tabellen passen, damit die Inhaltstabelle am Seitenanfang alles korrekt anzeigt.


{| width="100%"
{| width="100%"
Zeile 520: Zeile 522:
{| border="1" cellpadding="20" cellspacing="0"
{| border="1" cellpadding="20" cellspacing="0"
|colspan="2"|
|colspan="2"|
===Yummiest===
===Am leckersten===
|-
|-
|Orange
|Orange
Zeile 535: Zeile 537:
{| border="1" cellpadding="20" cellspacing="0"
{| border="1" cellpadding="20" cellspacing="0"
|colspan="2"|
|colspan="2"|
===Yummiest===
===Am leckersten===
|-
|-
|Orange
|Orange

Version vom 10. Juli 2007, 14:46 Uhr

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
|-
|Butter
|Eis 
|}
Abgerufen von „https://www.guildwiki.de/gwiki/index.php?title=Hilfe:Tabellen&oldid=389928“