Ardapedia:Tabellen: Unterschied zwischen den Versionen

Aus Ardapedia
Keine Bearbeitungszusammenfassung
K (Brotkrumen)
 
(4 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
'''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.
{{Brotkrumen|Hilfe|Formatieren}}


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 [[Ardapedia:Textgestaltung|Textgestaltung]]).
{{Navigationsleiste Ardapedia Formatieren}}
Die von der Ardapedia verwendete MediaWiki-Software bietet eine eigene Syntax um Tabellen darzustellen. Diese Syntax ist zwar an das verbreitete HTML angelehnt, erleichtert jedoch durch eine vereinfachte Schreibweise die Arbeit an komplizierteren Tabellen.


==Grundlagen==
Um die Zellen einer Tabelle zu formatieren, lassen sich sowohl für die Tabellen als Ganzes als auch für einzelne Zellen HTML-Attribute angeben. Insbesondere kann das {{Code|style}}-Attribut verwendet werden, wodurch sich beliebige CSS-Formatierungen realisieren lassen. Zwar lassen sich auch einzelne Zeilen einer Tabelle formatieren, möchte man jedoch ein Attribut an eine bestimmte Spalte vergeben, so muss dies zellenweise geschehen.
Jede Tabelle im Wiki-Stil beginnt mit einer geschweiften Klammer '''{''' gefolgt von einem senkrechten Strich '''<nowiki>|</nowiki>''' und endet mit einem Strich '''<nowiki>|</nowiki>''' gefolgt von einer geschweiften Klammer '''}'''. Die öffnende Klammer '''muss''' als erstes Zeichen der Zeile stehen. (Aussnahme: Tabellen im Schreibmaschinenstil)


==Einfache Tabellen==
== Wann Tabellen einsetzen? ==


===Tabellen im Schreibmaschinenstil ohne Formatierungen===
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.


Die einfachste und schnellste 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.
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 [[Ardapedia:Textgestaltung]]).


'''Beispiel:'''
== Tabellensyntax ==


Klimatabelle
Jede Tabelle im Wiki-Stil beginnt mit einer geschweiften Klammer {{Code|<nowiki>{</nowiki>}} gefolgt von einem senkrechten Strich {{Code|<nowiki>|</nowiki>}} und endet mit einem Strich {{Code|<nowiki>|</nowiki>}} gefolgt von einer geschweiften Klammer {{Code|<nowiki>}</nowiki>}}. Die öffnende Klammer '''muss''' als erstes Zeichen der Zeile stehen.
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===
=== Einfache Tabellen ===
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.


====Beispiele====
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 Attribute (z. B. Rowspanning – siehe unten). Wichtig ist auch, dass jede Zelle mit einem Zeilenumbruch beendet wird.
Die einfachste Tabelle (sie beinhaltet nur eine Zelle) sieht im Text so aus:


<nowiki>{|
|Minimaltabelle im Schreibmaschinenstil
|}</nowiki>
Und stellt sich so dar:
{|
|Minimaltabelle
|}
Eine Tabelle mit zwei Zellen in einer Tabellenzeile sieht im Text so aus:
Eine Tabelle mit zwei Zellen in einer Tabellenzeile sieht im Text so aus:
<nowiki>{|
|Zelle 1
|Zelle 2
|}</nowiki>


Und stellt sich so dar:
{| {{Tabellendesign}}
{|
|- {{Highlight}}
|Zelle 1
! Eingabe
|Zelle 2
! Ergebnis
|-
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
<nowiki>{|</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
<nowiki>| Zelle 2</nowiki><br />
<nowiki>|}</nowiki>
</div></div>
|<div style="margin:1em;">
{|  
| Zelle 1
| Zelle 2
|}
</div>
|}
|}


===Tabelle mit mehreren Tabellenzeilen===
Bitte beachten:
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.
<div style="font-family:monospace; font-size:95%;"><div class="portalBox">
Dies läßt sich beliebig oft wiederholen.
<nowiki>{| | Zelle |}</nowiki>
====Beispiele====
</div></div>
Eine Tabelle mit zwei Tabellenzeilen mit je zwei Zellen sieht im Text so aus:
funktioniert nicht! Der Zeilenvorschub (Return) ist wichtiger Bestandteil der Tabellensytax.
<nowiki>{|
 
|Zelle 1
==== Tabelle mit mehreren Tabellenzeilen ====
|Zelle 2
 
|-
Natürlich benötigt man hauptsächlich Tabellen mit mehreren (Tabellen-)Zeilen. Der Beginn einer neuen Zeile wird deutlich gemacht, indem man hinter dem senkrechten Strich einen waagrechten {{Code|-}} setzt.
|Zelle 3
Dies lässt sich beliebig oft wiederholen.
|Zelle 4
 
|}</nowiki>
{| {{Tabellendesign}}
Und stellt sich so dar:
|- {{Highlight}}
! Eingabe
! Ergebnis
|-
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
<nowiki>{|</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
<nowiki>| Zelle 2</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 3</nowiki><br />
<nowiki>| Zelle 4</nowiki><br />
<nowiki>|}</nowiki>
</div></div>
|<div style="margin:1em;">
{|
{|
|Zelle 1
| Zelle 1
|Zelle 2
| Zelle 2
|-
|-
|Zelle 3
| Zelle 3
|Zelle 4
| Zelle 4
|}
|}
Eine mit drei Tabellenzeilen sieht im Text so aus:
</div>
<nowiki>{|
|}
|Zelle 1
 
|Zelle 2
Zum Platzsparen ist es möglich, mehrere Tabellenzellen in einer Quelltextzeile unterzubringen; in diesem Fall muss man die Zellen mit {{Code|<nowiki>||</nowiki>}} trennen. Eine Tabelle mit drei Zeilen stellt sich also folgendermaßen dar:
|-
 
|Zelle 3
{| {{Tabellendesign}}
|Zelle 4
|- {{Highlight}}
|-
! colspan=3 | Eingabe
|Zelle 5
! | Ergebnis
|Zelle 6
|-
|}</nowiki>
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
Und stellt sich so dar:
<nowiki>{|</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
<nowiki>| Zelle 2</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 3</nowiki><br />
<nowiki>| Zelle 4</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 5</nowiki><br />
<nowiki>| Zelle 6</nowiki><br />
<nowiki>|}</nowiki><br />
</div></div>
| bzw.
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
<nowiki>{|</nowiki><br />
<nowiki>| Zelle 1 || Zelle 2</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 3 || Zelle 4</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 5 || Zelle 6</nowiki><br />
<nowiki>|}</nowiki><br />
</div></div>
|<div style="margin:1em;">
{|
{|
|Zelle 1
| Zelle 1
|Zelle 2
| Zelle 2
|-
|-
|Zelle 3
| Zelle 3
|Zelle 4
| Zelle 4
|-
|-
|Zelle 5
| Zelle 5
|Zelle 6
| Zelle 6
|}
</div>
|}
|}
und so weiter.


==Komplexere Tabellen==
==== Tabellen im Schreibmaschinenstil ohne Formatierungen ====
 
Die einfachste und schnellste Art, eine Tabelle zu erstellen, ist der Schreibmaschinenstil (siehe auch [[Ardapedia:Textgestaltung|Textgestaltung – vorformatierter Text mit einem Leerzeichen am Zeilenanfang]]). 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. Dabei sollte bedacht werden, dass diese Formatierung die Breite der Druckversion nicht überschreitet (ca. 780px bei Normalschriftgröße) und auf kleineren Bildschirmen, PDAs etc. ärgerlich sein kann).
 
'''Beispiel und Ergebnis:'''
 
Klimatabelle
Monat                    JAN FEB MÄR APR MAI JUN JUL AUG SEP OKT NOV DEZ
-------------------------------------------------------------------------
Ø Tagestemperatur in °C    21  21  22  23  24  25  27  29  28  26  24  22
Ø Nachttemperatur in °C    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 pro Monat      6  4  3  2  2  1  0  0  2  5  6  7
Ø Wassertemperatur in °C  19  18  18  18  19  20  21  22  23  23  21  20
 
=== Komplexere Tabellen ===


===Rahmen===
==== 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.
 
Bis jetzt haben unsere Tabellen noch keine Umrandungen. Die Umrandung wird in der ersten Zeile (direkt hinter dem {{Code|<nowiki>{|</nowiki>}}) festgelegt. Momentan kann nur die Rahmenstärke festgelegt werden – mit dem Argument: {{Code|<nowiki>border="x"</nowiki>}}, wobei „x“ die Stärke des Rahmens ist (siehe aber auch [[#Formatierungen|Formatierungen]]).


====Beispiel====
Das letzte Beispiel von oben sieht mit Rahmen im Text so aus:
Das letzte Beispiel von oben sieht mit Rahmen im Text so aus:
<nowiki>{| border=1
 
|Zelle 1
{| {{Tabellendesign}}
|Zelle 2
|- {{Highlight}}
|-
! Eingabe
|Zelle 3
! Ergebnis
|Zelle 4
|-
|-
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
|Zelle 5
<nowiki>{| border="1"</nowiki><br />
|Zelle 6
<nowiki>| Zelle 1</nowiki><br />
|}</nowiki>
<nowiki>| Zelle 2</nowiki><br />
und stellt sich so dar:
<nowiki>|-</nowiki><br />
{| border=1
<nowiki>| Zelle 3</nowiki><br />
|Zelle 1
<nowiki>| Zelle 4</nowiki><br />
|Zelle 2
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 5</nowiki><br />
<nowiki>| Zelle 6</nowiki><br />
<nowiki>|}</nowiki>
</div></div>
|<div align=center style="margin:1em;">
{| border="1"
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|-
| Zelle 5
| Zelle 6
|}
Mit ''border="3"'' erhält man:
{| border="3"
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|-
| Zelle 5
| Zelle 6
|}
</div>
|}
 
==== Titelzeilen ====
 
Eine Tabelle mit Titelzeile erreicht man, indem die Zellen, die hervorgehoben werden sollen, mit {{Code|<nowiki>!</nowiki>}} statt {{Code|<nowiki>|</nowiki>}} eingeleitet werden. In diesen Zellen erscheint der Text nun zentriert und fett:
 
{| {{Tabellendesign}}
|- {{Highlight}}
! Eingabe
! Ergebnis
|-
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
<nowiki>{| border="1"</nowiki><br />
<nowiki>! Was</nowiki><br />
<nowiki>! Warum</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
<nowiki>| Zelle 2</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 3</nowiki><br />
<nowiki>| Zelle 4</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 5</nowiki><br />
<nowiki>| Zelle 6</nowiki><br />
<nowiki>|}</nowiki>
</div></div>
|<div style="margin:1em;">
{| border="1"
! Was
! Warum
|-
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|-
| Zelle 5
| Zelle 6
|}
</div>
|}
 
==== Rowspanning und Colspanning ====
 
Mit der Wiki-Syntax ist es genauso wie bei HTML möglich eine Zelle über mehrere Zeilen oder Spalten reichen zu lassen, ein so genanntes {{Code|rowspan}} bzw. {{Code|colspan}}. Rowspan- und colspan-Angaben werden der Zelle als Attribute mitgegeben, und zwar nach dem Prinzip
 
<div style="font-family:monospace; font-size:95%;"><div class="portalBox">
<nowiki>| Attribute | Inhalt</nowiki>
</div></div>
 
Eine Tabelle mit einer Zelle, die über zwei Spalten geht ({{Code|<nowiki>colspan="2"</nowiki>}}) sieht so aus:
 
{| {{Tabellendesign}}
|- {{Highlight}}
! Eingabe
! Ergebnis
|-
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
<nowiki>{| border="1"</nowiki><br />
<nowiki>! A</nowiki><br />
<nowiki>! B</nowiki><br />
<nowiki>! C</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
<nowiki>| colspan="2" align="center" | Zelle 2</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 3</nowiki><br />
<nowiki>| Zelle 4</nowiki><br />
<nowiki>| Zelle 5</nowiki><br />
<nowiki>|}</nowiki><br />
</div></div>
|<div style="margin:1em;">
{| border="1"
! A
! B
! C
|-
| Zelle 1
| colspan="2" align="center" | Zelle 2
|-
| Zelle 3
| Zelle 4
| Zelle 5
|}
</div>
|}
 
Eine Tabelle mit einer Zelle, die über zwei Zeilen geht ({{Code|<nowiki>rowspan="2"</nowiki>}}) sieht so aus:
 
{| {{Tabellendesign}}
|- {{Highlight}}
! Eingabe
! Ergebnis
|-
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
<nowiki>{| border="1"</nowiki><br />
<nowiki>! A</nowiki><br />
<nowiki>! B</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| rowspan="2" align="center" | Zelle 1</nowiki><br />
<nowiki>| Zelle 2</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 4</nowiki><br />
<nowiki>|}</nowiki><br />
</div></div>
|<div style="margin:1em;">
{| border="1"
! A
! B
|-
| rowspan="2" align="center" | Zelle 1
| Zelle 2
|-
| Zelle 4
|}
</div>
|}
 
==== Leere Zellen in Tabellen mit Rahmen ====
 
Leere Zellen werden in einer Tabelle nicht umrahmt. Um in manchen Browsern trotzdem einen Rahmen zu bekommen, kann man ein geschütztes HTML-Leerzeichen {{Code|&amp;nbsp;}} setzen. So sieht normalerweise eine Tabelle mit Leerzellen aus:
 
{| border="1"
! colspan="4" align="center" | 'normal'
|-
| Zelle 1
| Zelle 2
|
|
|-
|
|
|
|
|-
|-
|Zelle 3
| Zelle 9
|Zelle 4
|
|
| Zelle 12
|-
|-
|Zelle 5
| Zelle 13
|Zelle 6
| Zelle 14
| Zelle 15
| Zelle 16
|}
|}


===Rowspanning und Colspanning===
Auch mit den neuen Wiki-Befehlen ist es genauso wie bei HTML möglich eine Zelle über mehere Zeilen reichen zu lassen, ein so genanntes ''rowspan''.
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. Soll eine Zelle über mehrere Spalten reichen benutze man ''colspan''.


====Beispiel====
Das gleiche Beispiel mit geschützten HTML-Leerzeichen im Text:
Eine Tabelle, in der Zelle 2 über zwei Spalten reicht, sieht im Text so aus:
 
<nowiki>{| border=1
{| {{Tabellendesign}}
|Zelle 1  
|- {{Highlight}}
|rowspan=2 | Zelle 2, mit rowspan
! Eingabe
|Zelle 3
! Ergebnis
|-  
|-
|Zelle 4
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
|Zelle 5
<nowiki>{| border="1"</nowiki><br />
|}</nowiki>
<nowiki>!colspan="4" align="center" | 'sicherer'</nowiki><br />
und stellt sich so dar:
<nowiki>|-</nowiki><br />
{| border=1
<nowiki>| Zelle 1</nowiki><br />
|Zelle 1
<nowiki>| Zelle 2</nowiki><br />
|rowspan=2 | Zelle 2, mit rowspan
<nowiki>| &amp;nbsp;</nowiki><br />
|Zelle 3
<nowiki>| &amp;nbsp;</nowiki><br />
|-  
<nowiki>|-</nowiki><br />
|Zelle 4
<nowiki>| &amp;nbsp;</nowiki><br />
|Zelle 5
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 9</nowiki><br />
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>| Zelle 12</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 13</nowiki><br />
<nowiki>| Zelle 14</nowiki><br />
<nowiki>| Zelle 15</nowiki><br />
<nowiki>| Zelle 16</nowiki><br />
<nowiki>|}</nowiki>
</div></div>
|<div style="margin:1em;">
{| border="1"
! colspan="4" align="center" | 'sicherer'
|-
| Zelle 1
| Zelle 2
| &nbsp;
| &nbsp;
|-
| &nbsp;
| &nbsp;
| &nbsp;
| &nbsp;
|-
| Zelle 9
| &nbsp;
| &nbsp;
| Zelle 12
|-
| Zelle 13
| Zelle 14
| Zelle 15
| Zelle 16
|}
</div>
|}
|}


===Verschachtelte Tabellen===
==== Verschachtelte Tabellen ====
Das Verschachteln ist mit den neuen Wiki-Befehlen denkbar einfach. 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!
 
====Beispiel====
Das Verschachteln ist mit der Wiki-Syntax denkbar einfach. Man muss nur an der Stelle, an der man eine weitere Tabelle innerhalb einer anderen Tabelle wünscht, eine neue öffnende Klammer setzen. Eine Tabelle, in der eine weitere Tabelle steckt, sieht im Text so aus:
Eine Tabelle, in der eine weitere Tabelle steckt, sieht im Text so aus:
 
<nowiki>{| border=1
{| {{Tabellendesign}}
|Zelle 1
|- {{Highlight}}
|
! Eingabe
  {| border=2
! Ergebnis
  |Zelle A
|-
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
<nowiki>{| border="1"</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
<nowiki>|</nowiki><br />
<nowiki> {| border="2"</nowiki><br />
<nowiki> | Zelle A</nowiki><br />
<nowiki> |-</nowiki><br />
<nowiki> | Zelle B</nowiki><br />
<nowiki> |}</nowiki><br />
<nowiki>| Zelle 3</nowiki><br />
<nowiki>|}</nowiki>
</div></div>
|<div style="margin:1em;">
{| border="1"
| Zelle 1
|
  {| border="2"
  | Zelle A
  |-
  |-
  |Zelle B
  | Zelle B
  |}
  |}
|Zelle 3
| Zelle 3
|}</nowiki>
|}
und stellt sich so dar:
</div>
{| border=1
|}
|Zelle 1
 
|
==== Beschriftung ====
{| border=2
 
|Zelle A
Mit der Wiki-Syntax ist es leicht möglich, eine Beschriftung über der Tabelle anzugeben. Diese Beschriftung ist zentriert und maximal genauso breit wie die Tabelle mit automatischem Zeilenumbruch. Um eine Beschriftung einzubauen reicht es, nach dem senkrechten Strich und vor dem Text ein Plus {{Code|+}} zu setzen. Innerhalb der Beschriftung kann man ganz normal mit der Wiki-Syntax formatieren.
 
Eine Tabelle mit Beschriftung sieht im Text so aus:
 
{| {{Tabellendesign}}
|- {{Highlight}}
! Eingabe
! Ergebnis
|-
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
<nowiki>{| border="1"</nowiki><br />
<nowiki>|+ Dies ist eine Beschriftung, die ''ziemlich'' lang ist.</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
<nowiki>| Zelle 2</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 3</nowiki><br />
<nowiki>| Zelle 4</nowiki><br />
<nowiki>|}</nowiki>
</div></div>
|<div style="margin:1em;">
{| border="1"
|+ Dies ist eine Beschriftung, die ''ziemlich'' lang ist.
| Zelle 1
| Zelle 2
|-
|-
|Zelle B
| Zelle 3
| Zelle 4
|}
|}
|Zelle 3
</div>
|}
|}


===Beschriftung===
==== Aufzählungszeichen ====
Mit den neuen Wiki-Befehlen ist es leicht möglich, eine Beschriftung über der Tabelle zu implementieren. 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.


====Beispiel====
Will man Aufzählungszeichen in einer Tabelle verwenden, so muss der erste Listeneintrag in einer neuen Zeile beginnen. Andernfalls wird beim ersten Eintrag anstatt eines Aufzählungszeichens ein Sternchen angezeigt.
Eine Tabelle, mit Beschriftung, sieht im Text so aus:
 
<nowiki>{||border=1
{| {{Tabellendesign}}
|+ Dies ist eine '''Beschriftung''', die ''ziemlich'' lang ist.
|- {{Highlight}}
|Zelle 1
! Eingabe
|Zelle 2
! Ergebnis
|-
|-
|Zelle 3
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
|Zelle 4
<nowiki>{| border="1"</nowiki><br />
|}</nowiki>
<nowiki>|* erster Eintrag</nowiki><br />
und stellt sich so dar:
<nowiki>* zweiter Eintrag</nowiki><br />
{||border=1
<nowiki>|}</nowiki><br />
|+ Dies ist eine '''Beschriftung''', die ''ziemlich'' lang ist.
</div></div>
|Zelle 1
|<div style="margin:1em;">
|Zelle 2
{| border="1"
|* erster Eintrag
* zweiter Eintrag
|}
</div>
|-
|-
|Zelle 3
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
|Zelle 4
<nowiki>{| border="1"</nowiki><br />
<nowiki>|</nowiki><br />
<nowiki>* erster Eintrag</nowiki><br />
<nowiki>* zweiter Eintrag</nowiki><br />
<nowiki>|}</nowiki><br />
</div></div>
|<div style="margin:1em;">
{| border="1"
|
* erster Eintrag
* zweiter Eintrag
|}
</div>
|}
|}


== Formatierungen ==


== Bilder und Tabellen ==
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 und auch Bestrebungen zur Vereinheitlichung berücksichtigen (siehe auch [[#Formatvorlagen|Formatvorlagen]]).


Bilder in Tabellen zu formatieren ist möglich mit dem ''class''-Argument "rimage". ''Class''-Argumente können am Anfang einer Tabelle stehen und gelten dann für die ganze Tabelle (ähnlich wie Rahmen (siehe oben)) oder am Anfang einer Zelle.
=== Spaltenbreiten ===
Das Interessante ist, dass nicht nur das Bild formatiert wird, sondern auch der zugehörige Text, dies ist zum Beispiel nützlich für Bildunterschriften.
Das class-Argument wir mittels class=rimage  eingebunden. Dadurch wird die Größe der Zelle auf das Bild ausgedehnt, ein kleiner Abstand um das Bild zum Rahmen wird beibehalten, und der Text verkleinert und zentriert und das ganze auf die rechte Seite geschoben.
Der Artikeltext wird automatisch um das Bild herum angeordnet.


Um ein Bild mit einer Bildunterschrift anzuzeigen, verwendet man die folgende Struktur.
Spaltenbreiten können relativ und absolut angegeben werden, wobei absolute Angaben in Pixeln sinnvoll nur beim Einbinden von Grafiken eingesetzt werden sollten. Die Breitenangabe ist nur bei einer Zelle der Spalte notwendig und sinnvoll.
<nowiki>{| class=rimage
 
| [[Bild:Ardapedia-bilder_beispiel_drache.jpg]] Dies ist die Bildunterschrift.
{| {{Tabellendesign}}
|}</nowiki>
|- {{Highlight}}
Das Ergebnis im Text ist:
! Eingabe
<div style="border: 1px solid black; margin: 0.5em 3em; padding: 0.5em;">
! Ergebnis
{| class=rimage
|-
| [[Bild:Ardapedia-bilder_beispiel_drache.jpg]] Dies ist die Bildunterschrift.
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
<nowiki>{| border="1"</nowiki><br />
<nowiki>! width="10%" | 10&amp;nbsp;%</nowiki><br />
<nowiki>! width="20%" | 20&amp;nbsp;%</nowiki><br />
<nowiki>! width="40%" | 40&amp;nbsp;%</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| A</nowiki><br />
<nowiki>| B</nowiki><br />
<nowiki>| C</nowiki><br />
<nowiki>|}</nowiki>
</div></div>
|<div style="margin:1em;">
{| border="1"
! width="10%" | 10&nbsp;%
! width="20%" | 20&nbsp;%
! width="40%" | 40&nbsp;%
|-
| A
| B
| C
|}
</div>
|-
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
<nowiki>{| border="1"</nowiki><br />
<nowiki>! width="50" | 50</nowiki><br />
<nowiki>! width="100" | 100</nowiki><br />
<nowiki>! width="200" | 200</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| A</nowiki><br />
<nowiki>| B</nowiki><br />
<nowiki>| C</nowiki><br />
<nowiki>|}</nowiki>
</div></div>
|<div style="margin:1em;">
{| border="1"
! width="50" | 50
! width="100" | 100
! width="200" | 200
|-
| A
| B
| C
|}
</div>
|}
 
=== Zellenabstände mit ''cellspacing'' und ''cellpadding'' ===
 
Mit {{Code|cellspacing}} kann der Abstand zwischen den Zellen festgelegt werden. Je größer der Cellspacing-Wert, desto breiter wird der Steg zwischen den Zellen. Mit {{Code|cellpadding}} bestimmt man den Abstand des Zellinhaltes vom Zellrahmen. Das CSS-Attribut {{Code|<nowiki>style="border-collapse:collapse;"</nowiki>}} lässt zusammenfallende Zellumrandungen verschwinden.
 
{| {{Tabellendesign}}
|- {{Highlight}}
! Eingabe
! Ergebnis
|-
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
<nowiki>{|</nowiki><br />
<nowiki>| Alpha || Beta || Gamma</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Delta || Epsilon || Zeta</nowiki><br />
<nowiki>|}</nowiki>
</div></div>
|<div style="margin:1em;">
{|
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}
</div>
|-
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
<nowiki>{| border="1"</nowiki><br />
<nowiki>| Alpha || Beta || Gamma</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Delta || Epsilon || Zeta</nowiki><br />
<nowiki>|}</nowiki><br />
</div></div>
|<div style="margin:1em;">
{| border="1"
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}
</div>
|-
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
<nowiki>{| border="1" cellspacing="10" cellpadding="0"</nowiki><br />
<nowiki>| Alpha || Beta || Gamma</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Delta || Epsilon || Zeta</nowiki><br />
<nowiki>|}</nowiki>
</div></div>
|<div style="margin:1em;">
{| border="1" cellspacing="10" cellpadding="0"
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}
</div>
|-
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
<nowiki>{| border="1" cellspacing="0" cellpadding="10"</nowiki><br />
<nowiki>| Alpha || Beta || Gamma</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Delta || Epsilon || Zeta</nowiki><br />
<nowiki>|}</nowiki><br />
</div></div>
|<div style="margin:1em;">
{| border="1" cellspacing="0" cellpadding="10"
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}
</div>
|-
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
<nowiki>{| border="1" cellspacing="10" cellpadding="10"</nowiki><br />
<nowiki>| Alpha || Beta || Gamma</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Delta || Epsilon || Zeta</nowiki><br />
<nowiki>|}</nowiki><br />
</div></div>
|<div style="margin:1em;">
{| border="1" cellspacing="10" cellpadding="10"
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}
</div>
|-
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
<nowiki>{| border="1" cellspacing="0" cellpadding="10" style="border-collapse:collapse;"</nowiki><br />
<nowiki>| Alpha || Beta || Gamma</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Delta || Epsilon || Zeta</nowiki><br />
<nowiki>|}</nowiki>
</div></div>
|<div style="margin:1em;">
{| border="1" cellspacing="0" cellpadding="10" style="border-collapse:collapse;"
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}
</div>
|}
|}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas augue. Quisque dapibus, est sed mattis mollis, orci tortor pretium lorem, id feugiat leo tellus eget nibh. Phasellus vel dui. Aliquam sollicitudin ante et dolor. Fusce dictum eros vitae dolor. Aliquam erat volutpat. Etiam pede orci, aliquam sed, mattis quis, bibendum et, metus. Aenean libero. Aliquam erat volutpat. Vestibulum placerat risus quis lacus. Mauris ultrices venenatis est. Etiam accumsan euismod lorem. Ut sollicitudin mi at massa. Morbi aliquam wisi non justo. Suspendisse consectetuer dui vitae wisi. Nulla sed lectus sed lorem rhoncus fringilla. Aenean leo orci, ultrices et, ornare eu, imperdiet non, nunc. Praesent sed purus at quam convallis vehicula.


Sed pede wisi, eleifend vel, lobortis quis, molestie vitae, nisl. Quisque eget urna quis tellus dictum egestas. Nulla facilisi. Aliquam fermentum dapibus enim. Morbi in tellus vitae lacus ultrices volutpat. Aenean tortor ante, consectetuer eget, laoreet lobortis, lobortis id, metus. Fusce id enim. Aliquam erat volutpat. Quisque venenatis erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vulputate diam in sapien.
=== Ausrichtung ===
 
Genau wie in HTML kann man den Inhalt von Zellen in der Tabelle unterschiedlich ausrichten. Dabei kann man die Attribute einzelnen Zellen oder auch ganzen Zeilen zuweisen. Das {{Code|valign}} gilt jeweils für die ganze Zeile, das {{Code|align}} nur für die jeweilige Zelle.
 
{| {{Tabellendesign}}
|- {{Highlight}}
! Eingabe
! Ergebnis
|-
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
<nowiki>{| border="1" cellspacing="0"</nowiki><br />
<nowiki>!</nowiki><br />
<nowiki>! align="left" | Links</nowiki><br />
<nowiki>! align="center" | Zentriert</nowiki><br />
<nowiki>! align="right" | Rechts</nowiki><br />
<nowiki>|- valign="top" </nowiki><br />
<nowiki>! height="38" | Oben</nowiki><br />
<nowiki>| align="left" | xx</nowiki><br />
<nowiki>| align="center" | xxx</nowiki><br />
<nowiki>| align="right" | xx</nowiki><br />
<nowiki>|- valign="middle" </nowiki><br />
<nowiki>! height="38" | Mitte</nowiki><br />
<nowiki>| align="left" | x</nowiki><br />
<nowiki>| align="center" | x</nowiki><br />
<nowiki>| align="right" | x</nowiki><br />
<nowiki>|- valign="bottom" </nowiki><br />
<nowiki>! height="38" | Unten</nowiki><br />
<nowiki>| align="left" | x</nowiki><br />
<nowiki>| align="center" | x</nowiki><br />
<nowiki>| align="right" | x</nowiki><br />
<nowiki>|}</nowiki>
</div></div>
|<div style="margin:1em;">
{| border="1" cellspacing="0"
!
! align="left" | Links
! align="center" | Zentriert
! align="right" | Rechts
|- valign="top"
! height="38" | Oben
| align="left" | xx
| align="center" | xxx
| align="right" | xx
|- valign="middle"
! height="38" | Mitte
| align="left" | x
| align="center" | x
| align="right" | x
|- valign="bottom"
! height="38" | Unten
| align="left" | x
| align="center" | x
| align="right" | x
|}
</div>
</div>
|}


Siehe auch: [[Ardapedia:Bilder|Bilder hochladen und in Texte einfügen]]
=== Andere HTML-Formatierungen ===


Es ist auch möglich, andere HTML-Formatierungen zu übernehmen, z.B. Zellen farbig zu hinterlegen ({{Code|<nowiki>style="background:#FFD39B;"</nowiki>}}; ''siehe:'' [[Ardapedia:Farben|Farbtabelle]]) oder Rahmen andere Farben zu geben.


===Weitere Formatierungen===
{| {{Tabellendesign}}
Natürlich ist es mit den Wiki-Befehlen auch möglich, Zellen farbig zu hinterlegen (''bgcolor=#ABCDEF'', [[Ardapedia:Farbtabelle|Farbtabelle]]) oder Rahmen andere Farben zu geben.
|- {{Highlight}}
! Eingabe
! Ergebnis
|-
|<div style="border:1px solid #FF8247; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{|</nowiki><br />
<nowiki>| style="background:#FFD39B;" | A</nowiki><br />
<nowiki>| B</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| C</nowiki><br />
<nowiki>| D</nowiki><br />
<nowiki>|}</nowiki><br />
</div>
|<div style="margin:1em;">
{|
| style="background:#FFD39B;" | A
| B
|-
| C
| D
|}
</div>
|}
== Formatvorlagen ==


Es existieren [[Ardapedia:Vorlagen|Vorlagen]], um die Formatierung zu vereinfachen. Anstatt sich an die Tabellenparameter erinnern zu müssen, kann eine Formatvorlage verwendet werden. Diese ist nach dem {{Code|<nowiki>{|</nowiki>}} einzufügen. Die Verwendung ermöglicht ein konsistentes Tabellenlayout, eine Erleichterung beim Fehlerhandling, die Einhaltung der Konvention [[Ardapedia:Farben#Farben verwenden|„Farben verwenden“]] sowie einfache Anpassung des Layouts bei allen Tabellen.


Beispielsweise lässt sich mit der Vorlage {{Code|<nowiki>{{Tabellendesign}}</nowiki>}}, die den Code <span style="background-color:#FFD39B;"><tt>{{Tabellendesign}}</tt></span> enthält, und der Farbvorlage {{Code|<nowiki>{{Highlight}}</nowiki>}} folgende Tabelle erstellen, welche im Quelltext keine kompliziert erscheinenden Formatierungsparameter mehr enthält:


{| style="border:1px solid #388240; background-color:#336633;padding:5px;font-size:95%;"
{| {{Tabellendesign}}
|
|- {{Highlight}}
Dieser Artikel basiert auf dem Artikel [http://de.wikipedia.org/wiki/Wikipedia:Tabellen Tabellen] aus der freien Enzyklopädie [http://de.wikipedia.org Wikipedia] und steht unter der [http://www.gnu.org/licenses/fdl.txt GNU Lizenz für freie Dokumentation]. In der Wikipedia ist eine [http://de.wikipedia.org/w/wiki.phtml?title=Tabellen&amp;action=history Liste der Autoren] verfügbar, dort kann man den [http://de.wikipedia.org/w/wiki.phtml?title=Tabellen&amp;action=edit Artikel bearbeiten].
! Eingabe
! Ergebnis
|-
|<div style="margin:1em; font-family:monospace; font-size:95%;"><div class="portalBox">
<nowiki>{| {{Tabellendesign}}</nowiki><br />
<nowiki>! Treffpunkt Y- u. X-Achse</nowiki><br />
<nowiki>! Exempel</nowiki><br />
<nowiki>! Beispiel</nowiki><br />
<nowiki>! Muster</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| X1</nowiki><br />
<nowiki>| {{Highlight}} | X2</nowiki><br />
<nowiki>| X3</nowiki><br />
<nowiki>| X4</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Y1</nowiki><br />
<nowiki>| {{Highlight}} | Y2</nowiki><br />
<nowiki>| Y4</nowiki><br />
<nowiki>| {{Highlight}} | Y5</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Y6</nowiki><br />
<nowiki>| Y7</nowiki><br />
<nowiki>| {{Highlight}} | Y8</nowiki><br />
<nowiki>| {{Highlight}} | Y9</nowiki><br />
<nowiki>|}</nowiki>
</div></div>
|<div style="margin:1em;">
{| {{Tabellendesign}}
! Treffpunkt Y- u. X-Achse
! Exempel
! Beispiel
! Muster
|-
| X1
| {{Highlight}} | X2
| X3
| X4
|-
| Y1
| {{Highlight}} | Y2
| Y4
| {{Highlight}} | Y5
|-
| Y6
| Y7
| {{Highlight}} | Y8
| {{Highlight}} | Y9
|}
</div>
|}
|}


[[Kategorie:Ardapedia Hilfe|Tabellen]]
{{Wikipedia|Hilfe:Tabellen}}{{Wikipedia|Hilfe:Tabellen-Referenz}}
[[Kategorie:Hilfe|Tabellen]]

Aktuelle Version vom 9. Dezember 2011, 07:52 Uhr

» Hilfe » Formatieren » Tabellen

Hilfe

Die von der Ardapedia verwendete MediaWiki-Software bietet eine eigene Syntax um Tabellen darzustellen. Diese Syntax ist zwar an das verbreitete HTML angelehnt, erleichtert jedoch durch eine vereinfachte Schreibweise die Arbeit an komplizierteren Tabellen.

Um die Zellen einer Tabelle zu formatieren, lassen sich sowohl für die Tabellen als Ganzes als auch für einzelne Zellen HTML-Attribute angeben. Insbesondere kann das style-Attribut verwendet werden, wodurch sich beliebige CSS-Formatierungen realisieren lassen. Zwar lassen sich auch einzelne Zeilen einer Tabelle formatieren, möchte man jedoch ein Attribut an eine bestimmte Spalte vergeben, so muss dies zellenweise geschehen.

Wann Tabellen einsetzen?

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 Ardapedia:Textgestaltung).

Tabellensyntax

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.

Einfache Tabellen

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 Attribute (z. B. Rowspanning – siehe unten). Wichtig ist auch, dass jede Zelle mit einem Zeilenumbruch beendet wird.

Eine Tabelle mit zwei Zellen in einer Tabellenzeile sieht im Text so aus:

Eingabe Ergebnis

{|
| Zelle 1
| Zelle 2
|}

Zelle 1 Zelle 2

Bitte beachten:

{| | Zelle |}

funktioniert nicht! Der Zeilenvorschub (Return) ist wichtiger Bestandteil der Tabellensytax.

Tabelle mit mehreren Tabellenzeilen

Natürlich benötigt man hauptsächlich Tabellen mit mehreren (Tabellen-)Zeilen. Der Beginn einer neuen Zeile wird deutlich gemacht, indem man hinter dem senkrechten Strich einen waagrechten - setzt. Dies lässt sich beliebig oft wiederholen.

Eingabe Ergebnis

{|
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|}

Zelle 1 Zelle 2
Zelle 3 Zelle 4

Zum Platzsparen ist es möglich, mehrere Tabellenzellen in einer Quelltextzeile unterzubringen; in diesem Fall muss man die Zellen mit || trennen. Eine Tabelle mit drei Zeilen stellt sich also folgendermaßen dar:

Eingabe Ergebnis

{|
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|-
| Zelle 5
| Zelle 6
|}

 bzw.

{|
| Zelle 1 || Zelle 2
|-
| Zelle 3 || Zelle 4
|-
| Zelle 5 || Zelle 6
|}
Zelle 1 Zelle 2
Zelle 3 Zelle 4
Zelle 5 Zelle 6

Tabellen im Schreibmaschinenstil ohne Formatierungen

Die einfachste und schnellste Art, eine Tabelle zu erstellen, ist der Schreibmaschinenstil (siehe auch Textgestaltung – vorformatierter Text mit einem Leerzeichen am Zeilenanfang). 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. Dabei sollte bedacht werden, dass diese Formatierung die Breite der Druckversion nicht überschreitet (ca. 780px bei Normalschriftgröße) und auf kleineren Bildschirmen, PDAs etc. ärgerlich sein kann).

Beispiel und Ergebnis: 

Klimatabelle
Monat                     JAN FEB MÄR APR MAI JUN JUL AUG SEP OKT NOV DEZ
-------------------------------------------------------------------------
Ø Tagestemperatur in °C    21  21  22  23  24  25  27  29  28  26  24  22
Ø Nachttemperatur in °C    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 pro Monat       6   4   3   2   2   1   0   0   2   5   6   7
Ø Wassertemperatur in °C   19  18  18  18  19  20  21  22  23  23  21  20

Komplexere Tabellen

Rahmen

Bis jetzt haben unsere Tabellen noch keine Umrandungen. Die Umrandung wird in der ersten Zeile (direkt hinter dem {|) festgelegt. Momentan kann nur die Rahmenstärke festgelegt werden – mit dem Argument: border="x", wobei „x“ die Stärke des Rahmens ist (siehe aber auch Formatierungen).

Das letzte Beispiel von oben sieht mit Rahmen im Text so aus:

Eingabe Ergebnis

{| border="1"
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|-
| Zelle 5
| Zelle 6
|}

Zelle 1 Zelle 2
Zelle 3 Zelle 4
Zelle 5 Zelle 6

Mit border="3" erhält man:

Zelle 1 Zelle 2
Zelle 3 Zelle 4
Zelle 5 Zelle 6

Titelzeilen

Eine Tabelle mit Titelzeile erreicht man, indem die Zellen, die hervorgehoben werden sollen, mit ! statt | eingeleitet werden. In diesen Zellen erscheint der Text nun zentriert und fett:

Eingabe Ergebnis

{| border="1"
! Was
! Warum
|-
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|-
| Zelle 5
| Zelle 6
|}

Was Warum
Zelle 1 Zelle 2
Zelle 3 Zelle 4
Zelle 5 Zelle 6

Rowspanning und Colspanning

Mit der Wiki-Syntax ist es genauso wie bei HTML möglich eine Zelle über mehrere Zeilen oder Spalten reichen zu lassen, ein so genanntes rowspan bzw. colspan. Rowspan- und colspan-Angaben werden der Zelle als Attribute mitgegeben, und zwar nach dem Prinzip

| Attribute | Inhalt

Eine Tabelle mit einer Zelle, die über zwei Spalten geht (colspan="2") sieht so aus:

Eingabe Ergebnis

{| border="1"
! A
! B
! C
|-
| Zelle 1
| colspan="2" align="center" | Zelle 2
|-
| Zelle 3
| Zelle 4
| Zelle 5
|}
A B C
Zelle 1 Zelle 2
Zelle 3 Zelle 4 Zelle 5

Eine Tabelle mit einer Zelle, die über zwei Zeilen geht (rowspan="2") sieht so aus:

Eingabe Ergebnis

{| border="1"
! A
! B
|-
| rowspan="2" align="center" | Zelle 1
| Zelle 2
|-
| Zelle 4
|}
A B
Zelle 1 Zelle 2
Zelle 4

Leere Zellen in Tabellen mit Rahmen

Leere Zellen werden in einer Tabelle nicht umrahmt. Um in manchen Browsern trotzdem einen Rahmen zu bekommen, kann man ein geschütztes HTML-Leerzeichen &nbsp; setzen. So sieht normalerweise eine Tabelle mit Leerzellen aus:

'normal'
Zelle 1 Zelle 2
Zelle 9 Zelle 12
Zelle 13 Zelle 14 Zelle 15 Zelle 16


Das gleiche Beispiel mit geschützten HTML-Leerzeichen im Text:

Eingabe Ergebnis

{| border="1"
!colspan="4" align="center" | 'sicherer'
|-
| Zelle 1
| Zelle 2
| &nbsp;
| &nbsp;
|-
| &nbsp;
| &nbsp;
| &nbsp;
| &nbsp;
|-
| Zelle 9
| &nbsp;
| &nbsp;
| Zelle 12
|-
| Zelle 13
| Zelle 14
| Zelle 15
| Zelle 16
|}

'sicherer'
Zelle 1 Zelle 2    
       
Zelle 9     Zelle 12
Zelle 13 Zelle 14 Zelle 15 Zelle 16

Verschachtelte Tabellen

Das Verschachteln ist mit der Wiki-Syntax denkbar einfach. Man muss nur an der Stelle, an der man eine weitere Tabelle innerhalb einer anderen Tabelle wünscht, eine neue öffnende Klammer setzen. Eine Tabelle, in der eine weitere Tabelle steckt, sieht im Text so aus:

Eingabe Ergebnis

{| border="1"
| Zelle 1
|
{| border="2"
| Zelle A
|-
| Zelle B
|}
| Zelle 3
|}

Zelle 1
Zelle A
Zelle B
Zelle 3

Beschriftung

Mit der Wiki-Syntax ist es leicht möglich, eine Beschriftung über der Tabelle anzugeben. Diese Beschriftung ist zentriert und maximal genauso breit wie die Tabelle mit automatischem 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 der Wiki-Syntax formatieren.

Eine Tabelle mit Beschriftung sieht im Text so aus:

Eingabe Ergebnis

{| border="1"
|+ Dies ist eine Beschriftung, die ''ziemlich'' lang ist.
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|}

Dies ist eine Beschriftung, die ziemlich lang ist.
Zelle 1 Zelle 2
Zelle 3 Zelle 4

Aufzählungszeichen

Will man Aufzählungszeichen in einer Tabelle verwenden, so muss der erste Listeneintrag in einer neuen Zeile beginnen. Andernfalls wird beim ersten Eintrag anstatt eines Aufzählungszeichens ein Sternchen angezeigt.

Eingabe Ergebnis

{| border="1"
|* erster Eintrag
* zweiter Eintrag
|}
* erster Eintrag
  • zweiter Eintrag

{| border="1"
|
* erster Eintrag
* zweiter Eintrag
|}
  • erster Eintrag
  • zweiter Eintrag

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 und auch Bestrebungen zur Vereinheitlichung berücksichtigen (siehe auch Formatvorlagen).

Spaltenbreiten

Spaltenbreiten können relativ und absolut angegeben werden, wobei absolute Angaben in Pixeln sinnvoll nur beim Einbinden von Grafiken eingesetzt werden sollten. Die Breitenangabe ist nur bei einer Zelle der Spalte notwendig und sinnvoll.

Eingabe Ergebnis

{| border="1"
! width="10%" | 10&nbsp;%
! width="20%" | 20&nbsp;%
! width="40%" | 40&nbsp;%
|-
| A
| B
| C
|}

10 % 20 % 40 %
A B C

{| border="1"
! width="50" | 50
! width="100" | 100
! width="200" | 200
|-
| A
| B
| C
|}

50 100 200
A B C

Zellenabstände mit cellspacing und cellpadding

Mit cellspacing kann der Abstand zwischen den Zellen festgelegt werden. Je größer der Cellspacing-Wert, desto breiter wird der Steg zwischen den Zellen. Mit cellpadding bestimmt man den Abstand des Zellinhaltes vom Zellrahmen. Das CSS-Attribut style="border-collapse:collapse;" lässt zusammenfallende Zellumrandungen verschwinden.

Eingabe Ergebnis

{|
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1"
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}
Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1" cellspacing="10" cellpadding="0"
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1" cellspacing="0" cellpadding="10"
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}
Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1" cellspacing="10" cellpadding="10"
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}
Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1" cellspacing="0" cellpadding="10" style="border-collapse:collapse;"
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

Ausrichtung

Genau wie in HTML kann man den Inhalt von Zellen in der Tabelle unterschiedlich ausrichten. Dabei kann man die Attribute einzelnen Zellen oder auch ganzen Zeilen zuweisen. Das valign gilt jeweils für die ganze Zeile, das align nur für die jeweilige Zelle.

Eingabe Ergebnis

{| border="1" cellspacing="0"
!
! align="left" | Links
! align="center" | Zentriert
! align="right" | Rechts
|- valign="top"
! height="38" | Oben
| align="left" | xx
| align="center" | xxx
| align="right" | xx
|- valign="middle"
! height="38" | Mitte
| align="left" | x
| align="center" | x
| align="right" | x
|- valign="bottom"
! height="38" | Unten
| align="left" | x
| align="center" | x
| align="right" | x
|}

Links Zentriert Rechts
Oben xx xxx xx
Mitte x x x
Unten x x x

Andere HTML-Formatierungen

Es ist auch möglich, andere HTML-Formatierungen zu übernehmen, z.B. Zellen farbig zu hinterlegen (style="background:#FFD39B;"; siehe: Farbtabelle) oder Rahmen andere Farben zu geben.

Eingabe Ergebnis

{|
| style="background:#FFD39B;" | A
| B
|-
| C
| D
|}
A B
C D

Formatvorlagen

Es existieren Vorlagen, um die Formatierung zu vereinfachen. Anstatt sich an die Tabellenparameter erinnern zu müssen, kann eine Formatvorlage verwendet werden. Diese ist nach dem {| einzufügen. Die Verwendung ermöglicht ein konsistentes Tabellenlayout, eine Erleichterung beim Fehlerhandling, die Einhaltung der Konvention „Farben verwenden“ sowie einfache Anpassung des Layouts bei allen Tabellen.

Beispielsweise lässt sich mit der Vorlage {{Tabellendesign}}, die den Code class="standardTemplateContainer cellborders" cellspacing="0" cellpadding="4" style="border-collapse:collapse; empty-cells:show; padding:1em; margin:4px 0 8px 0;" enthält, und der Farbvorlage {{Highlight}} folgende Tabelle erstellen, welche im Quelltext keine kompliziert erscheinenden Formatierungsparameter mehr enthält:

Eingabe Ergebnis

{| {{Tabellendesign}}
! Treffpunkt Y- u. X-Achse
! Exempel
! Beispiel
! Muster
|-
| X1
| {{Highlight}} | X2
| X3
| X4
|-
| Y1
| {{Highlight}} | Y2
| Y4
| {{Highlight}} | Y5
|-
| Y6
| Y7
| {{Highlight}} | Y8
| {{Highlight}} | Y9
|}

Treffpunkt Y- u. X-Achse Exempel Beispiel Muster
X1 X2 X3 X4
Y1 Y2 Y4 Y5
Y6 Y7 Y8 Y9


Diese Seite basiert auf der Seite Hilfe:Tabellen aus der freien Enzyklopädie Wikipedia und steht unter der Creative Commons Attribution/Share-Alike-Lizenz. In der Wikipedia ist eine Liste der Autoren verfügbar.


Diese Seite basiert auf der Seite Hilfe:Tabellen-Referenz aus der freien Enzyklopädie Wikipedia und steht unter der Creative Commons Attribution/Share-Alike-Lizenz. In der Wikipedia ist eine Liste der Autoren verfügbar.
Abgerufen von „https://www.ardapedia.org/w/index.php?title=Ardapedia:Tabellen&oldid=90240“