staging.inyokaproject.org

Tabellen

Tabellen dienen der übersichtlichen Darstellung von Daten mit inhaltlichem Zusammenhang. Im Wiki finden sie meist Verwendung, wenn es gilt eine Übersicht über Programme oder Funktionen zu geben oder selbige zu vergleichen. Tabellen zu erstellen ist recht einfach und wird hier mittels einiger Beispiele erklärt.

Seit September 2010 gibt es eine neue Vorlage für Tabellen, die das Erstellen von Tabellen einfacher macht und hier im folgenden beschrieben wird.

Wer die Beschreibung des "alten" / "low level" Tabellensyntax benötigt (die in älteren Artikeln verwendet wird und immer noch die Syntaxgrundlage bildet), findet diese unter Wiki/Tabellen/Basisformatierung. Normalerweise soll im Wiki aber immer die Tabellen-Vorlage verwendet werden und nicht die Low-Level Formatierung.

Einführung

Zelle 1 Zelle 2 Zelle 3
Zelle über drei Spalten

Diese recht einfache Tabelle wird mit diesem Code erzeugt:

{{{#!vorlage Tabelle
Zelle 1 
Zelle 2 
Zelle 3
+++
<-3> Zelle über drei Spalten
}}}

Prinzip

Eine Tabelle wird durch folgendes Grundgerüst erstellt:

{{{#!vorlage Tabelle
1. Zeile/1.Spalte
1. Zeile/2.Spalte
1. Zeile/3.Spalte
+++ Es folgt Zeile 2
2. Zeile/1.Spalte
2. Zeile/2.Spalte
2. Zeile/3.Spalte
}}}

Jeder Zeilenumbruch stellt eine Spalte in einer Tabellenzeile dar. Weitere Zeilen werden durch drei "+++"-Zeichen hinzugefügt, gefolgt von einem Zeilenumbruch. Jede Code-Zeile, die "+++" beinhaltet, bewirkt eine neue Tabellenzeile, weshalb diese Zeichenfolge nicht in normalen Zellen verwendet werden kann. Zusätzliche Angaben, wie z.B. eine Zeilennummerierung, sind bei diesem Zeilentrenner möglich und können den Tabellencode noch lesbarer machen.

Gliederung

Lange Tabellen sollen klar gegliedert und gut lesbar dargestellt sein. Das folgende Beispiel zeigt eine "typische", 2-spaltige Tabelle, wie sie oft im Wiki Verwendung findet:

Beispieltabelle
Überschrift 1. Spalte Überschrift 2. Spalte
erste Zeile, erste Spalte erste Zeile, zweite Spalte
zweite Zeile, erste Spalte zweite Zeile, zweite Spalte
dritte Zeile, erste Spalte dritte Zeile, zweite Spalte

Die farbigen Teile werden durch vordefinierte Styles erstellt. Der Code obiger Tabelle sieht wie folgt aus:

{{{#!vorlage Tabelle
<-2 tableclass="zebra_start3" rowclass="titel" :> Beispieltabelle
+++
<rowclass="kopf" :> Überschrift 1. Spalte
<:>Überschrift 2. Spalte
+++
erste Zeile, erste Spalte
erste Zeile, zweite Spalte
+++
zweite Zeile, erste Spalte
zweite Zeile, zweite Spalte
+++
dritte Zeile, erste Spalte
dritte Zeile, zweite Spalte
}}}

Fertige Styles

Um die stets wiederkehrenden Syntax-Elemente der Tabellengliederung zu vereinfachen, können verschiedene vordefinierte Klassen genutzt werden. Für die Farbgebung der Titelzeile (=1. Zeile) und der Zeile mit den Spaltenüberschriften (=2. Zeile) gibt es eine Standardfarbe passend zum Design des Wiki bzw. der Seiten von ubuntuusers.de sowie Farben, die farblich auf verschiedene Ubuntu-Derivate abgestimmt sind.

Tabellenzeilen Standard / Ubuntu

Diese Tabellenfarben sind bevorzugt einzusetzen, wenn eine Tabelle verwendet wird:

Standardfarbe
1. Spalte 2. Spalte
1. Zeile, 1. Spalte 1. Zeile, 2. Spalte
2. Zeile, 1. Spalte 2. Zeile, 2. Spalte

Quelltext:

{{{#!vorlage Tabelle
<-2 rowclass="titel" :>Standardfarbe
+++
<rowclass="kopf" :>1. Spalte
<:>2. Spalte
+++
1. Zeile, 1. Spalte
1. Zeile, 2. Spalte
+++
2. Zeile, 1. Spalte
2. Zeile, 2. Spalte
}}}

Tabellenzeilen Xubuntu

Xubuntu Farben
1. Spalte 2. Spalte
1. Zeile, 1. Spalte 1. Zeile, 2. Spalte
2. Zeile, 1. Spalte 2. Zeile, 2. Spalte

Quelltext:

{{{#!vorlage Tabelle
<-2 rowclass="xfce-titel" :>Xubuntu Farben
+++
<rowclass="xfce-kopf" :>1. Spalte
<:>2. Spalte
+++
1. Zeile, 1. Spalte
1. Zeile, 2. Spalte
+++
2. Zeile, 1. Spalte
2. Zeile, 2. Spalte
}}}

Tabellenzeilen Lubuntu

Lubuntu Farben
1. Spalte 2. Spalte
1. Zeile, 1. Spalte 1. Zeile, 2. Spalte
2. Zeile, 1. Spalte 2. Zeile, 2. Spalte

Quelltext:

{{{#!vorlage Tabelle
<-2 rowclass="lxde-titel" :>Lubuntu Farben
+++
<rowclass="lxde-kopf" :>1. Spalte
<:>2. Spalte
+++
1. Zeile, 1. Spalte
1. Zeile, 2. Spalte
+++
2. Zeile, 1. Spalte
2. Zeile, 2. Spalte
}}}

Tabellenzeilen Kubuntu

Kubuntu Farben
1. Spalte 2. Spalte
1. Zeile, 1. Spalte 1. Zeile, 2. Spalte
2. Zeile, 1. Spalte 2. Zeile, 2. Spalte

Quelltext:

{{{#!vorlage Tabelle
<-2 rowclass="kde-titel" :>Kubuntu Farben
+++
<rowclass="kde-kopf" :>1. Spalte
<:2. Spalte
+++
1. Zeile, 1. Spalte
1. Zeile, 2. Spalte
+++
2. Zeile, 1. Spalte
2. Zeile, 2. Spalte
}}}

Textausrichtung

Wird keine Angabe zur Textausrichtung gemacht, so wird automatisch linksbündig ausgerichtet. Andere Textausrichtungen wie zentriert etc. lassen sich wie im folgenden gezeigt erreichen. Für Titelzeilen in Tabellen und Spaltenüberschriften ist es grundsätzlich empfehlenswert, den Text zentriert auszurichten.

Textausrichtung
<(> <:> <)> <^> <v>
Linksbündig Zentriert Rechtsbündig Oben Unten

Zellen verbinden

Zellen können über Zeilen und über Spalten hinweg verbunden werden.

Zellen verbinden
<|2> <-2> < >
Zelle über zwei Zeilen Zelle über zwei Spalten leer
leer leer leer
leer leer leer leer

Zur Veranschaulichung der Code dazu:

{{{#!vorlage Tabelle
<-4 rowclass="titel"> Zellen verbinden
+++
<rowclass="kopf" :> `<|2>`
<-2 :> `<-2>`
<:> `< >`
+++
<|2 :> Zelle über zwei Zeilen
<-2> Zelle über zwei Spalten
''leer''
+++
''leer''
''leer''
''leer''
+++
 ''leer''
 ''leer''
 ''leer''
 ''leer''
}}}

automatische Zebrasteifen für länger Tabellen

Bei längeren Tabellen können die Klassen tableclass "zebra", "zebra_start2" und "zebra_start3" eingesetzt werden, um die Lesbarkeit der Tabelle zu verbessern. Durch die Klasse wird jede 2. Zeile grau hinterlegt, so dass die Tabelle ein "Zebrastreifenmuster hat". Bei der Klasse "zebra" ist die 1. Hervorhebung in der 2. Zeile, bei der Klasse "zebra_start2" in der 3. Zeile und bei der Klasse "zebra_start3" in der 4. Zeile. Beispiele:

tableclass="zebra"
-V Version anzeigen
-h Hilfe anzeigen
-l Lizenz anzeigen
-s Testlauf (Simulation) durchführen

Quellcode:

{{{#!vorlage Tabelle
<tableclass="zebra">`-V`
Version anzeigen
+++
`-h`
Hilfe anzeigen
+++
`-l`
Lizenz anzeigen
+++
`-s`
Testlauf (Simulation) durchführen
}}}
tableclass="zebra_start2
Option Beschreibung
-V Version anzeigen
-h Hilfe anzeigen
-l Lizenz anzeigen
-s Testlauf (Simulation) durchführen

Quellcode:

{{{#!vorlage Tabelle
<tableclass="zebra_start2" rowclass="kopf">Option
Beschreibung
+++
`-V`
Version anzeigen
+++
`-h`
Hilfe anzeigen
+++
`-l`
Lizenz anzeigen
+++
`-s`
Testlauf (Simulation) durchführen
}}}
tableclass="zebra_start3"
Optionen des Programms
Option Beschreibung
-V Version anzeigen
-h Hilfe anzeigen
-l Lizenz anzeigen
-s Testlauf (Simulation) durchführen

Quellcode:

{{{#!vorlage Tabelle
<-2 tableclass="zebra_start3" rowclass="titel">Optionen des Programms
+++
<rowclass="kopf">Option
Beschreibung
+++
`-V`
Version anzeigen
+++
`-h`
Hilfe anzeigen
+++
`-l`
Lizenz anzeigen
+++
`-s`
Testlauf (Simulation) durchführen
}}}

Zeilenumbruch in einer Zelle

Um innerhalb einer Zelle einen Zeilenumbruch zu erzwingen kann [[BR]] genutzt werden.

Zeilenumbruch
Text [[BR]] Text Text Text
eine Zelle
mit Zeilenumbruch
eine Zelle ohne Zeilenumbruch

Zelle als Befehl formatieren

Möchte man ein Zelle in einer Tabelle wie die Befehlsbox im Fließtext formatieren, kann man dies wie folgt machen:

Befehl Erklärung
ls -la ausführliche Ausgabe
{{{#!vorlage Tabelle
<rowclass="kopf">Befehl
Erklärung
+++
<cellclass="befehl">ls -la
ausführliche Ausgabe
}}}

manuelle CSS Formatierung

Achtung!

Der folgende Abschnitt dient der Vervollständigung der Dokumentation zu Tabellen. Manuelle CSS-Formatierung sollten im Wiki grundsätzlich vermieden werden, da sie eventuell mit der Standard CSS-Formatierung des Wikis kollidieren oder ungewollte Nebeneffekte entstehen.

Im Wiki findet man zwar in einigen Artikeln noch manuelle Formatierung, die aber in der Regel aus Zeiten stammen, wo eine manuelle Formatierung noch notwendig (und erlaubt) war.

Für die manuelle Formatierung kennt Inyoka drei Möglichkeiten:

  1. <tablestyle=CSS-DIREKTIVEN>: hiermit wird der Stil der kompletten Tabelle bestimmt. Ein Beispiel wäre z.B. <tablestyle="width: 50%;">, welche die Breite der Tabelle auf 50% Inhaltsbreite fest legt. tablestyle muss, wenn es verwendet wird, immer in der 1. Zeile der Tabelle stehen.

  2. <rowstyle=CSS-DIREKTIVEN>: hiermit wird der Stil einer Tabellenzeile bestimmt. Ein Beispiel wäre z.B. <rowstyle="heigth:1.5em";>, welches die Zeilenhöhe auf 1.5em festlegen würde.

  3. <cellstyle=CSS-DIREKTIVEN>: hiermit wird der Stil einer einzelnen Zelle festgelegt. Ein Beispiel wäre z.B. <cellstyle="background-color:#ff0000;">, womit die Hintergrundfarbe der Zelle auf rot gesetzt würde.

Wie in den Beispielen zu sehen ist, müssen die Direktiven in spitze Klammern < > eingeschlossen sein. Die CSS-DIREKTIVEN sind so, als würde man sie direkt in ein Stylesheet oder als Inline-Stil in HTML schreiben. Es können beliebig viele Direktiven kombiniert werden wie z.B. <rowstyle="height:1.5em"; background-color:#ff000;">.

Die Direktiven können mit dem normalen Markup von Inyoka gemischt würden. So würde z.B. <cellstyle="background-color:#ff0000;" :> die Zeile rot hinterlegen und der Inhalt zentriert ausgerichtet werden.

Besondere Tabellen

Dienste

Informationen, welche Funktionen die einzelnen Programme unterstützen, sollen in einer tabellarischen Übersicht mit folgenden Farben hinterlegt werden:

Funktionsübersicht
Programm/Dienst Dienst 1 Dienst 2 Dienst 3 Dienst 4
Beispielprogramm 1 Ja Ja Bedingt Nein
Beispielprogramm 2 Nein Ja Ja Nein
Beispieldienst 1 Nein Ja Ja Nein
Beispieldienst 2 Ja Ja Bedingt Nein

Die Werte in Zeile 4 bis 8 geben die prozentuale Ausdehnung der jeweiligen Spalte auf dem Monitor an und können problemlos variiert werden.

{{{#!vorlage Tabelle
<-5 rowclass="titel">Funktionsübersicht
+++
<cellstyle="width: 40%;" rowclass="kopf"> Programm/Dienst
<cellstyle="width: 15%;"> Dienst 1
<cellstyle="width: 15%;"> Dienst 2
<cellstyle="width: 15%;"> Dienst 3
<cellstyle="width: 15%;"> Dienst 4
+++
Beispielprogramm 1
<cellclass="gruen">Ja
<cellclass="gruen">Ja
<cellclass="gelb">Bedingt
<cellclass="grau">Nein
+++
Beispielprogramm 2
<cellclass="grau"> Nein
<cellclass="gruen">Ja
<cellclass="gruen">Ja
<cellclass="grau">Nein
+++
<-5 rowclass="highlight"> 
+++
Beispieldienst 1
<cellclass="grau">Nein
<cellclass="gruen">Ja
<cellclass="gruen">Ja
<cellclass="grau">Nein
+++
Beispieldienst 2
<cellclass="gruen">Ja
<cellclass="gruen">Ja
<cellclass="gelb">Bedingt
<cellclass="grau">Nein
}}}

⚓︎ Wiki/Icons/games.png

Spiele-Infobox

Bei Spiele-Artikeln ist es praktisch, Informationen zum Spiel und Systemvoraussetzungen in einer Tabelle am Ende des Artikels zusammenzufassen. Damit dabei ein einheitliches Muster mit Wiedererkennungswert entsteht, sollte diese Vorlage genutzt werden:

Spielname
Originaltitel: Originaltitel meist Englisch (Hier kann auch der Alternativtiel oder der Ursprungstitel angegeben werden.)
Genre: Genre z.B. Adventure
Sprache: Länderfähnchen z.B. 🇩🇪 🇬🇧
Veröffentlichung: Jahr der Veröffentlichung / Fortlaufende Entwicklung = Erscheinungsjahr gefolgt von + z.B. 2013+
Publisher: Name des Herausgebers (Alternativ kann der Entwickler aufgeführt werden.)
Systemvoraussetzungen: Minimale offizielle Systemvoraussetzung
Medien: Bezeichnung (Anzahl) - z.B. Diskette (7) / CD (1) / DVD (1) / Download
Strichcode / EAN / GTIN: 5901234123457
Läuft mit: z.B. DOSBox, ScummVM, Wine und/oder nativ
[[Bild(Wiki/Icons/games.png, 48, right)]] 
= Infobox =
{{{#!vorlage Tabelle
<-2 rowclass="verlauf">Spielname
+++
Originaltitel:
Originaltitel meist Englisch (Hier kann auch der Alternativtiel oder der Ursprungstitel angegeben werden.)
+++
Genre:
Genre z.B. Adventure
+++
Sprache:
Länderfähnchen z.B. {de} {en} 
+++
Veröffentlichung:
Jahr der Veröffentlichung / Fortlaufende Entwicklung = Erscheinungsjahr gefolgt von + z.B. 2013+
+++
Publisher:
Name des Herausgebers (Alternativ kann der Entwickler aufgeführt werden.)
+++
Systemvoraussetzungen:
Minimale offizielle Systemvoraussetzung
+++
Medien:
Bezeichnung (Anzahl) - z.B. Diskette (7) / CD (1) / DVD (1) / Download
+++
Strichcode / EAN / GTIN:
[ean:5901234123457:]
+++
<-2 rowclass="kopf">
+++
Läuft mit:
z.B. [:DOSBox:], [:Spiele/ScummVM: ScummVM], [:Wine:] und/oder nativ
}}}
EAN13byGrzexs.png
EAN / GTIN

Hinweis:

Der 13-stellige Strichcode ist auf dem Spielekarton zu ersehen. Aufgeschlüsselt setzt er sich aus dem Herstellungsland (Ziffern 1+2), Hersteller (Ziffern 3-7), Artikelnummer (Ziffern 8-12) und der Prüfziffer (Ziffer 13) zusammen: 59 - 01234 - 12345 - 7

Einige Hersteller verwenden den 12-stelligen UPC - dieser ist kompatibel mit der EAN.

Textbausteine in Tabellen

Möchte man Wiki/Textbausteine in Tabellen verwenden, so muss folgende Schreibweise verwendet werden:

{{{#!vorlage Tabelle
Hinweis- und andere Textbausteine müssen mit folgender Syntax in Tabellen eingetragen werden:
[[Vorlage(Hinweis, "Dies ist ein Hinweistext")]]
+++
Befehle werden mithilfe von folgender Syntax in Tabellen eingetragen:
[[Vorlage(Befehl, "sudo apt-get install irgendetwas")]]
}}}

Ergebnis:

Hinweis- und andere Textbausteine müssen mit folgender Syntax in Tabellen eingetragen werden:

Hinweis:

Dies ist ein Hinweistext

Befehle werden mit Hilfe der folgenden Syntax in Tabellen eingetragen:
sudo apt-get install irgendetwas 

Diese Revision wurde am 23. September 2021 11:25 von mubuntuHH erstellt.
Die folgenden Schlagworte wurden dem Artikel zugewiesen: Wiki, Syntax