AnimexxWiki:Tutorial-7 [Diskussion]
Tabellen
Tabellen sind ein gutes Mittel, um gleichartige Informationen übersichtlich zu gestalten. Jedoch sollte man Tabellen nicht als grafisches Gestaltungsmittel einsetzen, sondern nur dann benutzen, wenn zwischen Tabellenzellen und ihren Zeilen und Spalten semantische Beziehungen bestehen. Sie dienen beispielsweise dann ihrem Zweck, wenn die Informationen in gewisser Weise sortiert werden können, nach Jahreszahlen oder mit alphabetischer Anordnung.
Andererseits sind Tabellen komplizierter als normaler Text. Deshalb sollten sie nur dort eingesetzt werden, wo sie tatsächlich für bessere Übersicht sorgen. Überlege immer, ob du die Informationen nicht auch in einer einfachen Liste unterbringen kannst (siehe Textgestaltung).
Grundlagen
Jede Tabelle im Wiki-Stil beginnt mit einer geschweiften Klammer { gefolgt von einem senkrechten Strich | und endet mit einem Strich | gefolgt von einer geschweiften Klammer }. Die öffnende Klammer muss als erstes Zeichen der Zeile stehen (Ausnahme: Tabellen im Schreibmaschinenstil). Außerdem wird die Schriftgröße in Tabellen generell kleiner dargestellt als im normalen Text. Um die gewünschte Schriftgröße zu erhalten, füge einfach ein font-size:100% oder ähnliches ein.
Einfache Tabellen
Tabellen im Schreibmaschinenstil ohne Formatierungen
Die einfachste und schnellste Wiki Art, eine Tabelle zu erstellen ist der Schreibmaschinenstil. Dazu stellt man jeder Tabellenzeile ein Leerzeichen voran. Spalten und Layout werden visuell im Bearbeitungsmodus angepasst. Das Ergebnis entspricht anschließend genau der Ansicht im Bearbeitungsmodus.
Wie es dargestellt wird |
Klimatabelle Monat JAN FEB MÄR APR MAI JUN JUL AUG SEP OKT NOV DEZ ----------------------------------------------------------------------- Ø Tagestemperatur 21 21 22 23 24 25 27 29 28 26 24 22 Ø Nachttemperatur 15 15 15 16 17 18 20 21 20 19 18 16 Ø Sonnenstunden pro Tag 6 6 7 8 9 9 9 9 8 7 6 5 Ø Regentage/Monat 6 4 3 2 2 1 0 0 2 5 6 7 Ø Wassertemperatur 19 18 18 18 19 20 21 22 23 23 21 20 |
|
Was du schreibst |
Klimatabelle Monat JAN FEB MÄR APR MAI JUN JUL AUG SEP OKT NOV DEZ ----------------------------------------------------------------------- Ø Tagestemperatur 21 21 22 23 24 25 27 29 28 26 24 22 Ø Nachttemperatur 15 15 15 16 17 18 20 21 20 19 18 16 Ø Sonnenstunden pro Tag 6 6 7 8 9 9 9 9 8 7 6 5 Ø Regentage/Monat 6 4 3 2 2 1 0 0 2 5 6 7 Ø Wassertemperatur 19 18 18 18 19 20 21 22 23 23 21 20 |
Tabelle mit einer Tabellenzeile
Jede Zeile innerhalb der beiden Klammern beginnt mit einem senkrechten Strich. Dieser macht den Beginn einer neuen Zelle deutlich. Direkt hinter diesem Strich steht entweder der Inhalt der Zelle oder eine Style-Argument (z.B. Rowspanning - siehe unten). Der Strich kann am Anfang der Textzeile stehen oder auch mittendrin, dann muss man zwei Striche schreiben. Jedoch sollte man ihn nur am Anfang einer Textzeile verwenden um die Tabellenstruktur übersichtlich zu halten.
Wie es dargestellt wird | ||
| ||
| ||
Was du schreibst | ||
{| |Zelle 1 |Zelle 2 |} |
Tabelle mit mehreren Tabellenzeilen
Natürlich benötigt man hauptsächlich Tabellen mit mehreren (Tabellen-)Zeilen. Eine neue Zeile wird deutlich gemacht, indem hinter dem senkrechten Strich einen waagrechten - setzt. Dies läßt sich beliebig oft wiederholen.
Wie es dargestellt wird | ||||
| ||||
| ||||
Was du schreibst | ||||
{| |Zelle 1 |Zelle 2 |- |Zelle 3 |Zelle 4 |} |
Komplexere Tabellen
Rahmen
Bis jetzt haben unsere Tabellen noch keine Umrandungen. Die Umrandung wird in der ersten Zeile (direkt hinter dem {| ) festgelegt, dabei ist zu beachten, eine Leerstelle zu lassen. Momentan kann nur die Rahmenstärke festgelegt werden, mit dem Argument: border=n wobei n die Stärke des Rahmens ist.
Eine Tabelle mit Titelzeile, die mit ! statt | eingeleitet werden, sieht wie folgt aus:
Wie es dargestellt wird | ||||||||
| ||||||||
| ||||||||
Was du schreibst | ||||||||
{| border=1 !Was !Warum |- |Zelle 1 |Zelle 2 |- |Zelle 3 |Zelle 4 |- |Zelle 5 |Zelle 6 |} |
Rowspanning und Colspanning
Auch mit den neuen Wiki-Befehlen ist es genauso wie bei HTML möglich eine Zelle über mehrere Zeilen oder Spalten reichen zu lassen, ein so genanntes rowspan bzw. colspan.
Um rowspan einzuschalten muss man vor der betreffenden Zelle, aber unbedingt in der gleichen Zeile, das rowspan-Argument einfügen, etwa in der Form rowspan=n wobei n für die Anzahl der Zeilen steht, über die die Zelle reichen soll. Genauso funktioniert es, wenn eine Zelle über mehrere Spalten reichen soll, man benutze dann colspan.
Eine Tabelle mit einer Zelle, die über zwei Reihen geht ("rowspan=2") sieht so aus:
Wie es dargestellt wird | ||||||||
| ||||||||
| ||||||||
Was du schreibst | ||||||||
{| border=1 ! A ! B ! C |- | rowspan="2" | Zelle 1 | Zelle 2 | Zelle 3 |- | Zelle 4 | Zelle 5 |} |
Eine Tabelle mit einer Zelle, die über zwei Spalten geht ("colspan=2") sieht wie folgt aus:
Wie es dargestellt wird | |||||||||
| |||||||||
| |||||||||
Was du schreibst | |||||||||
{| border=1 ! A ! B ! C |- | Zelle 1 | colspan=2 align="center" | Zelle 2 |- | Zelle 3 | Zelle 4 | Zelle 5 |} |
und wird erzeugt, indem die Spalten, die zusammengefasst werden sollen, mit "| colspan=n |" statt "|" eingeleitet werden (zusätzlich ist die "Zelle 2" zentriert (align="center"); siehe unten).
Verschachtelte Tabellen
Das Verschachteln ist mit den Wiki-Befehlen relativ simpel. Man muss nur an der Stelle, an der man eine weitere Tabelle, innerhalb einer anderen Tabelle wünscht, eine neue öffnende Klammer setzen. Wichtig ist es nur, dass dort am Anfang der Textzeile ausnahmsweise kein senkrechter Strich stehen darf!
Eine Tabelle, in der eine weitere Tabelle steckt, sieht im Text so aus:
Wie es dargestellt wird | |||||
| |||||
| |||||
Was du schreibst | |||||
{| border=1 |Zelle 1 | {| border=2 |Zelle A |- |Zelle B |} |Zelle 3 |} |
Beschriftung
Du kannst auch eine Beschriftung über der Tabelle schreiben. Diese Beschriftung ist zentriert und maximal genauso breit wie die Tabelle mit automatischen Zeilenumbruch. Um eine Beschriftung einzubauen reicht es nach dem senkrechten Strich und vor dem Text ein Plus + zu setzen. Innerhalb der Beschriftung kann man ganz normal mit Wiki-Befehlen formatieren.
Eine Tabelle, mit Beschriftung, sieht im Text so aus:
Wie es dargestellt wird | ||||
| ||||
| ||||
Was du schreibst | ||||
{|border=1 |+ Dies ist eine '''Beschriftung''', die ''ziemlich'' lang ist. |Zelle 1 |Zelle 2 |- |Zelle 3 |Zelle 4 |} |
Formatierungen
Farben, Ränder, Abstände und Spaltenbreiten können durch CSS Styles vielfältig beeinflusst werden. Bevor man sich dazu entschließt, sollte man über die Notwendigkeit des Unterfangens nachgedacht haben.
Spaltenbreiten
Spaltenbreiten können relativ und absolut angegeben werden. Die Angabe ist nur bei einer Zelle der Spalte notwendig und sinnvoll.
Wie es dargestellt wird | ||||||
| ||||||
| ||||||
Was du schreibst | ||||||
{| border="1" !width="10%"|10% !width="20%"|20% !width="40%"|40% |- |A |B |C |} |
Wie es dargestellt wird | ||||||
| ||||||
| ||||||
Was du schreibst | ||||||
{| border="1" !width="50"|50 !width="100"|100 !width="200"|200 |- |A |B |C |} |
Absolute Angaben in Pixel sind eher bei Grafiken sinnvoll.
Rahmen, cellspacing & -padding
Wie es dargestellt wird | ||||||
| ||||||
| ||||||
Was du schreibst | ||||||
{| |Alpha || Beta || Gamma |- |Delta || Epsilon || Zeta |} |
Wie es dargestellt wird | ||||||
| ||||||
| ||||||
Was du schreibst | ||||||
{| border="1" |Alpha || Beta || Gamma |- |Delta || Epsilon || Zeta |} |
Wie es dargestellt wird | ||||||
| ||||||
| ||||||
Was du schreibst | ||||||
{| border="1" cellspacing="5" cellpadding="0" |Alpha || Beta || Gamma |- |Delta || Epsilon || Zeta |} |
Wie es dargestellt wird | ||||||
| ||||||
| ||||||
Was du schreibst | ||||||
{| border="1" cellspacing="0" cellpadding="5" |Alpha || Beta || Gamma |- |Delta || Epsilon || Zeta |} |
Wie es dargestellt wird | ||||||
| ||||||
| ||||||
Was du schreibst | ||||||
{| border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse;" |Alpha || Beta || Gamma |- |Delta || Epsilon || Zeta |} |
Ausrichtung
Genau wie in HTML kann man den Inhalt von Zellen in der Tabelle unterschiedlich ausrichten:
Wie es dargestellt wird | ||||||||||||||||
| ||||||||||||||||
| ||||||||||||||||
Was du schreibst | ||||||||||||||||
{| border="1" cellspacing="0" ! !align="left"|Links !align="center"|Zentriert !align="Right"|Rechts |- !valign="top" height="38"|Oben |valign="top" align="left"| a |valign="top" align="center"| b |valign="top" align="right"| c |- !valign="middle" height="38"|Mitte |valign="middle" align="left"| d |valign="middle" align="center"| e |valign="middle" align="right"| f |- !valign="bottom" height="38"|Unten |valign="bottom" align="left"| g |valign="bottom" align="center"| h |valign="bottom" align="right"| i |} |
Andere HTML Formatierungen
Mit Animexx Wiki ist es auch möglich, einige HTML Formatierungen zu übernehmen, z.B. Zellen farbig zu hinterlegen (bgcolor=#ABCDEF, Farbtabelle) oder Rahmen andere Farben zu geben.
Wie es dargestellt wird | ||||||||||
| ||||||||||
| ||||||||||
Was du schreibst | ||||||||||
{| style="background-color:#8DB6CD; border: solid 1px; border-color:#000000" |colspan="3" style="background-color:#8DB6CD; border: solid 1px; border-color:#FFF2CA; text-align:center" | Spalten |- bgcolor="#EED3B9" |rowspan="3" bgcolor="#8DB6CD" | Reihen | und | dann |- |bgcolor="#EED3B9" | noch |bgcolor="#FFF2CA" | solche |- bgcolor="#EED3B9" | bunten | Tabellen |} |
Das wäre wirklich alles, was du über das Wiki wissen musst. Wenn du Probleme hast oder einen Fehler findest, den du selber nicht ausbessern kannst, wende dich an das Helpdesk.
Letzte Änderungen | Hilfe Spezialseiten |