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:
<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.<rowstyle=CSS-DIREKTIVEN>
: hiermit wird der Stil einer Tabellenzeile bestimmt. Ein Beispiel wäre z.B.<rowstyle="heigth:1.5em";>
, welches die Zeilenhöhe auf1.5em
festlegen würde.<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 }}}
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 }}}
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 |
Links¶