Hilfe:Tabellen: Unterschied zwischen den Versionen

Hilfeseite Diskussion
Quelltext anzeigen Versionsgeschichte
VisuellWikitext
K (hat „Tamriel-Almanach:Tabellen“ nach „Hilfe:Tabellen“ verschoben)
 
(13 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{| border="0" cellspacing="0" cellpadding="0" height="10" width="100%"
{| class="hintergrund border_1"
{{Hauptseite/Tab2|[[Hauptseite|Almanach]]}}
|-
{{Hauptseite/Tab2|[[Hauptseite/News|News]]}}
| [[Hauptseite/Hilfe|Hilfe]] > '''Tabellen'''
{{Hauptseite/Tab2|[[Hauptseite/Exzellent|Exzellent]]}}
{{Hauptseite/Tab2|[[Hauptseite/Artikel|Artikel]]}}
{{Hauptseite/Tab2|[[Hauptseite/Projekte|Projekte]]}}
{{Hauptseite/Tab1|Hilfe}}
| style="border-bottom:1px solid #000"  width="80"|  
|}
|}
<!-- ENDE TABS -->
<!-- BEGINN RAHMEN -->
{| width="100%" style="background-color:#e8eaf7; padding:5px; border-bottom:1px solid #000; border-left:1px solid #000; border-right:1px solid #000;" cellspacing="5" valign="top"|
|- <!-- RAHMEN: Kopf -->
| style="background-color:#e8eaf7;padding:5px" valign="top" |
< [[Hauptseite/Hilfe|Hilfe]] < [[Tamriel-Almanach:Formatieren|Formatieren]] < '''Tabellen'''


Die vom Tamriel-Almanach 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.
Diese Seite beschreibt die Verwendung von '''Tabellen''' im Tamriel-Almanach. Solltest du Probleme beim Erstellen einer Tabelle haben, wird dir auf der [[Hilfe_Diskussion:Tabellen|Diskussionsseite]] oder im [[Spezial:Webchat|Chat]] von den Mitautoren gerne und in der Regel auch schnell geholfen.


== Wann Tabellen einsetzen? ==
== Einführung ==
=== Vorteil von Tabellen ===
Tabellen sind eine spezielle, strukturierte Form von Datenlisten. Im Gegensatz zu normalen Listen ermöglichen sie eine differenziertere, mehrdimensionale und übersichtlichere Darstellung mit vielen Informationen pro Eintrag und, falls gewünscht, auch eine Sortierbarkeit der einzelnen Spalten. Hierbei kann der Leser Daten numerisch nach Größe sortieren lassen, Begriffe können alphabetisch oder beides nach Rangordnung sortiert werden. Dadurch kann auch Mehrfachdarstellung vermieden werden. Alles Wissen kann übersichtlich in ''einer'' Tabelle verknüpft werden; Wissen wird zunehmend auch maschinenlesbar und Informationen können automatisch miteinander verknüpft werden.


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.
=== Links und Bilder in Tabellen ===
Durch Links können in der Tabelle weiterführende oder vertiefende Artikel übersichtlich mit einzelnen Begriffen verknüpft werden. Ein Bild sagt mehr als tausend Worte gilt oft auch für Tabellen, exzessive Bildverwendungen können eine Tabelle jedoch auch unübersichtlich machen und überladen.


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 [[Tamriel-Almanach:Textgestaltung]]).
== Technische Grundlagen ==
Um die Zellen einer Tabelle zu formatieren, lassen sich sowohl für die Tabelle als Ganzes als auch für einzelne Zellen HTML-Attribute angeben. Wir verwenden hier im Almanach einheitliche Tabellen, weswegen hauptsächlich mit dem <tt>class</tt>-Attribut gearbeitet werden sollte. In Einzelfällen kann auch das <tt>style</tt>-Attribut verwendet werden, wodurch sich beliebige CSS-Formatierungen realisieren lassen. Einzelne Zeilen einer Tabelle lassen sich ebenfalls formatieren, einzelne Spalten jedoch nicht, dies muss zellenweise geschehen.


== Tabellensyntax ==
Die meisten Tabellen sollten die Klasse '''wikitable''' besitzen (''class="wikitable"''), da sie so dem Schema der hier verwendeten Tabellen entsprechen.


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


=== Einfache Tabellen ===
Jede Zelle 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. 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. Wichtig ist auch, dass jede Zelle mit einem Zeilenumbruch beendet wird.
 
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:
Eine Tabelle mit zwei Zellen in einer Tabellenzeile sieht im Text so aus:


{| class="prettytable" border="1"
{| class="wikitable"
!style="background-color: #d1d4e0;" | Eingabe
|-
!style="background-color: #d1d4e0;" | Ergebnis
! Eingabe
! Ergebnis
|-
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{|</nowiki><br />
<nowiki>{|</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
Zeile 48: Zeile 37:
<nowiki>|}</nowiki>
<nowiki>|}</nowiki>
</div>
</div>
|<div style="margin:1em;">
|<div style="margin:1em">
{|  
{|
| Zelle 1
| Zelle 1
| Zelle 2
| Zelle 2
Zeile 57: Zeile 46:


Bitte beachten:
Bitte beachten:
<div style="border:1px solid #000000; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{| | Zelle |}</nowiki>
<nowiki>{| |Einzelzelle |}</nowiki>
</div>
</div>
funktioniert nicht! Der Zeilenvorschub (Return) ist wichtiger Bestandteil der Tabellensyntax.
funktioniert nicht! Der Zeilenvorschub (Return) ist wichtiger Bestandteil der Tabellensyntax.


==== Tabelle mit mehreren Tabellenzeilen ====
=== 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.
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.
Dies lässt sich beliebig oft wiederholen.


{| class="prettytable" border="1"
{| class="wikitable"
!style="background-color: #d1d4e0;" | Eingabe
|-
!style="background-color: #d1d4e0;" | Ergebnis
! Eingabe
! Ergebnis
|-
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{|</nowiki><br />
<nowiki>{|</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
Zeile 80: Zeile 70:
<nowiki>|}</nowiki>
<nowiki>|}</nowiki>
</div>
</div>
|<div style="margin:1em;">
|<div style="margin:1em">
{|
{|
| Zelle 1
| Zelle 1
Zeile 91: Zeile 81:
|}
|}


Zum Platzsparen ist es möglich, mehrere Tabellenzellen in einer Quelltextzeile unterzubringen; in diesem Fall muss man die Zellen mit '''<nowiki>||</nowiki>''' trennen. Eine Tabelle mit drei Zeilen stellt sich also folgendermaßen dar:
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:


{| class="prettytable" border="1"
{| class="wikitable"
! colspan=3; style="background-color: #d1d4e0;" | Eingabe
|-
!style="background-color: #d1d4e0;" | Ergebnis
! colspan="3" | Eingabe
! Ergebnis
|-
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{|</nowiki><br />
<nowiki>{|</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
Zeile 110: Zeile 101:
</div>
</div>
| bzw.
| bzw.
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{|</nowiki><br />
<nowiki>{|</nowiki><br />
<nowiki>| Zelle 1 || Zelle 2</nowiki><br />
<nowiki>| Zelle 1 || Zelle 2</nowiki><br />
Zeile 119: Zeile 110:
<nowiki>|}</nowiki><br />
<nowiki>|}</nowiki><br />
</div>
</div>
|<div style="margin:1em;">
|<div style="margin:1em">
{|
{|
| Zelle 1
| Zelle 1
Zeile 133: Zeile 124:
|}
|}


==== Tabellen im Schreibmaschinenstil ohne Formatierungen ====
== Komplexere Tabellen ==
 
Die einfachste und schnellste Art, eine Tabelle zu erstellen, ist der Schreibmaschinenstil (siehe auch [[Tamriel-Almanach: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 eine Umrandungen. Die Umrandung wird in der ersten Zeile (direkt hinter dem '''{|''') festgelegt. Es kann eingestellt werden, ob ein Rahmen existieren soll oder nicht. Dafür werden die Klassen '''border_0''' (kein Rahmen) und '''border_1''' (Rahmen) verwendet. Für besondere Fälle kann die Rahmenstärke auch mit dem Argument '''border="x"''', wobei '''x''' die Stärke des Rahmens ist, eingestellt werden.
 
Bis jetzt haben unsere Tabellen noch keine Umrandungen. Die Umrandung wird in der ersten Zeile (direkt hinter dem '''<nowiki>{|</nowiki>''') festgelegt. Momentan kann nur die Rahmenstärke festgelegt werden – mit dem Argument: '''<nowiki>border="x"</nowiki>''', wobei „x“ die Stärke des Rahmens ist (siehe aber auch [[#Formatierungen|Formatierungen]]).


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


{| class="prettytable" border="1"
{| class="wikitable"
!style="background-color: #d1d4e0;" | Eingabe
|-
!style="background-color: #d1d4e0;" | Ergebnis
! Eingabe
! Ergebnis
|-
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{| border="1"</nowiki><br />
<nowiki>{| class="border_1"</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
<nowiki>| Zelle 2</nowiki><br />
<nowiki>| Zelle 2</nowiki><br />
Zeile 172: Zeile 149:
<nowiki>|}</nowiki>
<nowiki>|}</nowiki>
</div>
</div>
|<div align=center style="margin:1em;">
|<div align="center" style="margin:1em">
{| border="1"
{| class="border_1"
| Zelle 1
| Zelle 1
| Zelle 2
| Zelle 2
Zeile 183: Zeile 160:
| Zelle 6
| Zelle 6
|}
|}
Mit ''border="3"'' erhält man:
Mit ''class="border_0"'' erhält man:
{| border="3"
{| class="border_0"
| Zelle 1
| Zelle 1
| Zelle 2
| Zelle 2
Zeile 197: Zeile 174:
|}
|}


==== Titelzeilen ====
=== Titelzeilen ===


Eine Tabelle mit Titelzeile erreicht man, indem die Zellen, die hervorgehoben werden sollen, mit '''<nowiki>!</nowiki>''' statt '''<nowiki>|</nowiki>''' eingeleitet werden. In diesen Zellen erscheint der Text nun zentriert und fett:
Eine Tabelle mit Titelzeile (Spaltenköpfe) erreicht man, indem die Zellen, die hervorgehoben werden sollen, mit „!“ statt „|“ eingeleitet werden. In diesen Zellen erscheint der Text nun zentriert und fett.


{| class="prettytable" border="1"
{| class="wikitable"
!style="background-color: #d1d4e0;" | Eingabe
|-
!style="background-color: #d1d4e0;" | Ergebnis
! Eingabe
! Ergebnis
|-
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{| border="1"</nowiki><br />
<nowiki>{| class="wikitable"</nowiki><br />
<nowiki>! Was</nowiki><br />
<nowiki>! Was</nowiki><br />
<nowiki>! Warum</nowiki><br />
<nowiki>! Warum</nowiki><br />
Zeile 220: Zeile 198:
<nowiki>|}</nowiki>
<nowiki>|}</nowiki>
</div>
</div>
|<div style="margin:1em;">
|<div style="margin:1em">
{| border="1"
{| class="wikitable"
! Was
! Was
! Warum
! Warum
Zeile 237: Zeile 215:
|}
|}


==== Rowspanning und Colspanning ====
=== Spalten- und zeilenübergreifende Darstellung ===


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
Auch mit der neuen Wiki-Syntax ist es, genauso wie bei HTML, möglich, dass eine Zelle über mehrere Spalten reicht ''(colspan)'' oder Zeilen überspannt ''(rowspan)''. Rowspan- und colspan-Angaben werden der Zelle als Attribute mitgegeben, und zwar nach dem Prinzip


<div style="border:1px solid #000000; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>| Attribute | Inhalt</nowiki>
<nowiki>| Attribute | Inhalt</nowiki>
</div>
</div>


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


{| class="prettytable" border="1"
{| class="wikitable"
!style="background-color: #d1d4e0;" | Eingabe
|-
!style="background-color: #d1d4e0;" | Ergebnis
! Eingabe
! Ergebnis
|-
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{| border="1"</nowiki><br />
<nowiki>{| class="wikitable"</nowiki><br />
<nowiki>! A</nowiki><br />
<nowiki>! A</nowiki><br />
<nowiki>! B</nowiki><br />
<nowiki>! B</nowiki><br />
Zeile 258: Zeile 237:
<nowiki>|-</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
<nowiki>| colspan="2" align="center" | Zelle 2</nowiki><br />
<nowiki>| colspan="2" | Zelle 2</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 3</nowiki><br />
<nowiki>| Zelle 3</nowiki><br />
Zeile 265: Zeile 244:
<nowiki>|}</nowiki><br />
<nowiki>|}</nowiki><br />
</div>
</div>
|<div style="margin:1em;">
|<div style="margin:1em">
{| border="1"
{| class="wikitable"
! A
! A
! B
! B
Zeile 272: Zeile 251:
|-
|-
| Zelle 1
| Zelle 1
| colspan="2" align="center" | Zelle 2
| colspan="2" | Zelle 2
|-
|-
| Zelle 3
| Zelle 3
Zeile 281: Zeile 260:
|}
|}


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


{| class="prettytable" border="1"
{| class="wikitable"
!style="background-color: #d1d4e0;" | Eingabe
|-
!style="background-color: #d1d4e0;" | Ergebnis
! Eingabe
! Ergebnis
|-
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{| border="1"</nowiki><br />
<nowiki>{| class="wikitable"</nowiki><br />
<nowiki>! A</nowiki><br />
<nowiki>! A</nowiki><br />
<nowiki>! B</nowiki><br />
<nowiki>! B</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| rowspan="2" align="center" | Zelle 1</nowiki><br />
<nowiki>| rowspan="2" | Zelle 1</nowiki><br />
<nowiki>| Zelle 2</nowiki><br />
<nowiki>| Zelle 2</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|-</nowiki><br />
Zeile 298: Zeile 278:
<nowiki>|}</nowiki><br />
<nowiki>|}</nowiki><br />
</div>
</div>
|<div style="margin:1em;">
|<div style="margin:1em">
{| border="1"
{| class="wikitable"
! A
! A
! B
! B
|-
|-
| rowspan="2" align="center" | Zelle 1
| rowspan="2" | Zelle 1
| Zelle 2
| Zelle 2
|-
|-
Zeile 311: Zeile 291:
|}
|}


==== Leere Zellen in Tabellen mit Rahmen ====
Und kombiniert:
 
{| class="wikitable"
Leere Zellen werden in einer Tabelle nicht umrahmt. Um in manchen Browsern trotzdem einen Rahmen zu bekommen, kann man ein geschütztes HTML-Leerzeichen '''&amp;nbsp;''' setzen. So sieht normalerweise eine Tabelle mit Leerzellen aus:
 
{| border="1"
! colspan="4" align="center" | 'normal'
|-
|-
| Zelle 1
! Eingabe
| Zelle 2
! Ergebnis
|
|
|-
|-
|
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
|
<nowiki>{| class="wikitable"</nowiki><br />
|
<nowiki>! A</nowiki><br />
|
<nowiki>! B</nowiki><br />
|-
<nowiki>! C</nowiki><br />
| Zelle 9
|
|
| Zelle 12
|-
| Zelle 13
| Zelle 14
| Zelle 15
| Zelle 16
|}
 
 
Das gleiche Beispiel mit geschützten HTML-Leerzeichen im Text:
 
{| class="prettytable" border="1"
!style="background-color: #d1d4e0;" | Eingabe
!style="background-color: #d1d4e0;" | Ergebnis
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{| border="1"</nowiki><br />
<nowiki>!colspan="4" align="center" | 'sicherer'</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
<nowiki>| rowspan="2" colspan="2" | A1 & B1 & A2 & B2</nowiki><br />
<nowiki>| Zelle 2</nowiki><br />
<nowiki>| C1</nowiki><br />
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>| C2</nowiki><br />
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 9</nowiki><br />
<nowiki>| A3</nowiki><br />
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>| B3</nowiki><br />
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>| C3</nowiki><br />
<nowiki>| Zelle 12</nowiki><br />
<nowiki>|}</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;">
|<div style="margin:1em">
{| border="1"
{| class="wikitable"
! colspan="4" align="center" | 'sicherer'
! A
|-
! B
| Zelle 1
! C
| Zelle 2
| &nbsp;
| &nbsp;
|-
|-
| &nbsp;
| rowspan="2" colspan="2" | A1 & B1 & A2 & B2
| &nbsp;
| C1
| &nbsp;
| &nbsp;
|-
|-
| Zelle 9
| C2
| &nbsp;
| &nbsp;
| Zelle 12
|-
|-
| Zelle 13
| A3
| Zelle 14
| B3
| Zelle 15
| C3
| Zelle 16
|}
|}
</div>
</div>
|}
|}


==== Verschachtelte Tabellen ====
=== 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:
Das Verschachteln ist mit der neuen Wiki-Syntax sehr 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! Eine Tabelle, in der eine weitere Tabelle steckt, sieht im Text so aus:


{| class="prettytable" border="1"
{| class="wikitable"
!style="background-color: #d1d4e0;" | Eingabe
|-
!style="background-color: #d1d4e0;" | Ergebnis
! Eingabe
! Ergebnis
|-
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{| border="1"</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
<nowiki>|</nowiki><br />
<nowiki>|</nowiki><br />
<nowiki> {| border="2"</nowiki><br />
<nowiki> {|</nowiki><br />
<nowiki> | Zelle A</nowiki><br />
<nowiki> | Zelle A</nowiki><br />
<nowiki> |-</nowiki><br />
<nowiki> |-</nowiki><br />
Zeile 418: Zeile 351:
<nowiki>|}</nowiki>
<nowiki>|}</nowiki>
</div>
</div>
|<div style="margin:1em;">
|<div style="margin:1em">
{| border="1"
{|  
| Zelle 1
| Zelle 1
|
|
  {| border="2"
  {|  
  | Zelle A
  | Zelle A
  |-
  |-
Zeile 432: Zeile 365:
|}
|}


==== Beschriftung ====
=== Aufzählungszeichen ===


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.
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:
{| class="wikitable"
 
{| class="prettytable" border="1"
!style="background-color: #d1d4e0;" | Eingabe
!style="background-color: #d1d4e0;" | Ergebnis
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
<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 style="margin:1em;">
{| border="1"
|+ Dies ist eine Beschriftung, die ''ziemlich'' lang ist.
| Zelle 1
| Zelle 2
|-
|-
| Zelle 3
! Eingabe
| Zelle 4
! Ergebnis
|}
</div>
|}
 
==== 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.
 
{| class="prettytable" border="1"
!style="background-color: #d1d4e0;" | Eingabe
!style="background-color: #d1d4e0;" | Ergebnis
|-
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{| border="1"</nowiki><br />
<nowiki>{| </nowiki><br />
<nowiki>|* erster Eintrag</nowiki><br />
<nowiki>|* erster Eintrag</nowiki><br />
<nowiki>* zweiter Eintrag</nowiki><br />
<nowiki>* zweiter Eintrag</nowiki><br />
<nowiki>|}</nowiki><br />
<nowiki>|}</nowiki><br />
</div>
</div>
|<div style="margin:1em;">
|<div style="margin:1em">
{| border="1"
{|  
|* erster Eintrag
|* erster Eintrag
* zweiter Eintrag
* zweiter Eintrag
Zeile 485: Zeile 387:
</div>
</div>
|-
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{| border="1"</nowiki><br />
<nowiki>{| </nowiki><br />
<nowiki>|</nowiki><br />
<nowiki>|</nowiki><br />
<nowiki>* erster Eintrag</nowiki><br />
<nowiki>* erster Eintrag</nowiki><br />
Zeile 492: Zeile 394:
<nowiki>|}</nowiki><br />
<nowiki>|}</nowiki><br />
</div>
</div>
|<div style="margin:1em;">
|<div style="margin:1em">
{| border="1"
{|  
|
|
* erster Eintrag
* erster Eintrag
Zeile 501: Zeile 403:
|}
|}


== Formatierungen ==
== Sortierbare Tabellen ==
Tabellen können auch nach ihren Werten pro Spalte sortiert werden. Dazu muss <tt>class="sortable"</tt> im Tabellenkopf angegeben werden.
 
Eine sortierbare Tabelle erkennt man daran, dass sie in den Spaltenköpfen kleine Doppelpfeilsymbole zeigt. Bei Anklicken werden die Zeilen der Tabelle nach den Werten der jeweiligen Spalte sortiert.
 
{| class="wikitable"
|-
! Eingabe
! Ergebnis
|-
| <div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{| class="wikitable sortable"</nowiki><br />
<nowiki>! Spalte 1</nowiki><br />
<nowiki>! Spalte 2</nowiki><br />
<nowiki>! Spalte 3</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| 12346</nowiki><br />
<nowiki>| € 234,44</nowiki><br />
<nowiki>| fghij</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| 98765</nowiki><br />
<nowiki>| € 77,55</nowiki><br />
<nowiki>| abcde</nowiki><br />
<nowiki>|}</nowiki><br />
| <div style="margin-left:1em"><!--linker Rand für die Ergebnistabelle-->
{| class="wikitable sortable"
! Spalte 1
! Spalte 2
! Spalte 3
|-
| 12346
| € 234,44
| fghij
|-
| 98765
| € 77,55
| abcde
|}
</div>
|}
 
''Einschränkungen:'' Bei komplexen Tabellen (d.&nbsp;h. solchen mit ungleichmäßigen Reihen und Spalten) ist eine Sortierung nicht möglich.


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.
Das Sortieren funktioniert nur bei aktivem JavaScript – weil der Leser das unter Umständen ausgeschaltet hat, und auch, weil der Artikel noch druckfähig sein soll, muss die Tabelle bei der Eingabe im WikiCode schon sinnvoll sortiert sein.


=== Spaltenbreiten ===
Der Datentyp der obersten Zelle bestimmt den Sortierungsmodus. Erkannt werden einfache Datumsangaben, Währungen, Prozentwerte und Zahlen. Passt keiner dieser Datentypen, wird der Text in Kleinbuchstaben gewandelt und ''alphabetisch'' nach der Reihenfolge des Unicode sortiert


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.
=== Zellen von der Sortierung ausschließen ===
==== Eine Spalte nicht sortieren ====
Man kann eine Spalte unsortierbar machen durch einfügen von <code>class="unsortable"</code> in den Attributen der Kopfzeile.


{| class="prettytable" border="1"
{| class="wikitable"
!style="background-color: #d1d4e0;" | Eingabe
|- class="hintergrundfarbe6"
!style="background-color: #d1d4e0;" | Ergebnis
! Eingabe
! Ergebnis
|-
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{| border="1"</nowiki><br />
<nowiki>{| class="wikitable sortable"</nowiki><br />
<nowiki>! width="10%" | 10&amp;nbsp;%</nowiki><br />
<nowiki>! Zahlen !! Alphabet !! Datum</nowiki><br />
<nowiki>! width="20%" | 20&amp;nbsp;%</nowiki><br />
<nowiki>! Währung !! </nowiki><b style="color:red"><nowiki>class="unsortable" |</nowiki></b><nowiki> Unsortierbar</nowiki><br />
<nowiki>! width="40%" | 40&amp;nbsp;%</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| 1 || Z || 02-02-2004 || 5,00 || Diese</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| 2 || y || 13-apr-2005 || || Spalte</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| 3 || X || 17.aug.2006 || 6,50 || ist</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| A</nowiki><br />
<nowiki>| 4 || w || 01.Jan.2005 || 4,20 || unsortierbar</nowiki><br />
<nowiki>| B</nowiki><br />
<nowiki>|-</nowiki>
<nowiki>| C</nowiki><br />
<nowiki>| 5 || V || 05/12/2006 || 7,15 || wie man sieht.</nowiki><br />
<nowiki>|}</nowiki>
<nowiki>|}</nowiki><br /></div>
</div>
| <div style="margin-left:1em"><!-- linker Rand für die Ergebnistabelle-->
|<div style="margin:1em;">
{|class="wikitable sortable"
{| border="1"
! Zahlen !! Alphabet !! Datum !! Währung !! class="unsortable" | Unsortierbar
! width="10%" | 10&nbsp;%
|-
! width="20%" | 20&nbsp;%
| 1 || Z || 02-02-2004 || 5,00 || Diese
! width="40%" | 40&nbsp;%
|-
| 2 || y || 13-apr-2005 || || Spalte
|-
| 3 || X || 17.aug.2006 || 6,50 || ist
|-
| 4 || w || 01.Jan.2005 || 4,20 || unsortierbar
|-
|-
| A
| 5 || V || 05/12/2006 || 7,15 || wie man sieht.
| B
| C
|}
|}
</div>
</div>
|}
==== Die letzte Zeile nicht sortieren ====
Manchmal ist es erwünscht, die letzte Tabellenzeile von der Sortierung auszuschließen. Das kann mit <code>class="sortbottom"</code> in der entsprechenden Tabellenzeile erreicht werden.
Alle Zeilen, die mit <code>class="sortbottom"</code> versehen sind, werden unten in der Tabelle angeordnet und untereinander sortiert.
{| class="wikitable"
|-
! Eingabe
! Ergebnis
|-
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{| border="1"</nowiki><br />
<nowiki>{|class="wikitable sortable"</nowiki><br />
<nowiki>! width="50" | 50</nowiki><br />
<nowiki>! Name !! Vorname !! Größe</nowiki><br />
<nowiki>! width="100" | 100</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>! width="200" | 200</nowiki><br />
<nowiki>| John || Smith || 1,85</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Ron || Ray || 1,89</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| A</nowiki><br />
<nowiki>| Mario || Bianchi || 1,72</nowiki><br />
<nowiki>| B</nowiki><br />
<nowiki>|- </nowiki><b style="color:red"><nowiki>class="sortbottom"</nowiki></b><br />
<nowiki>| C</nowiki><br />
<nowiki>| colspan="2" | Durchschnitt: || 1,82</nowiki><br />
<nowiki>|}</nowiki>
<nowiki>|}</nowiki></div>
</div>
| <div style="margin-left:1em"><!--linker Rand für die Ergebnistabelle-->
|<div style="margin:1em;">
{| class="wikitable sortable"
{| border="1"
! Name !! Vorname !! Größe
! width="50" | 50
|-
! width="100" | 100
| John || Smith || 1,85
! width="200" | 200
|-
| Ron || Ray || 1,89
|-
|-
| A
| Mario || Bianchi || 1,72
| B
|- class="sortbottom"
| C
| colspan="2" | Durchschnitt: || 1,82
|}
|}
</div>
</div>
|}
|}


=== Zellenabstände mit ''cellspacing'' und ''cellpadding'' ===
==Aufklappende Tabellen==
Im Almanach ist es möglich, Tabellen zu erstellen, die auf- und wieder zugeklappt werden können.


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 '''<nowiki>style="border-collapse:collapse;"</nowiki>''' lässt zusammenfallende Zellumrandungen verschwinden.
===Aufgeklappte Tabelle===
Für eine Tabelle, die beim Laden der Seite bereits aufgeklappt, aber geschlossen werden kann, ist lediglich <code>class="collapsible"</code> notwendig. Bei mehreren Spalten erscheint das Feld zum Zu- und Aufklappen immer in der ersten Spalte. Daher ist es meist sinnvoll, aus der Überschrift eine einzige Spalte via ''colspan'' zu machen.


{| class="prettytable" border="1"
{| class="wikitable"
!style="background-color: #d1d4e0;" | Eingabe
|-
!style="background-color: #d1d4e0;" | Ergebnis
! Eingabe
! Ergebnis
|-
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{|</nowiki><br />
<nowiki>{|class="collapsible wikitable"</nowiki><br />
<nowiki>| Alpha || Beta || Gamma</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>! colspan = "2" |Überschrift</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Delta || Epsilon || Zeta</nowiki><br />
<nowiki>|C</nowiki><br />
<nowiki>|}</nowiki>
<nowiki>|D</nowiki><br />
<nowiki>|}</nowiki></div>
| <div style="margin-left:1em"><!--linker Rand für die Ergebnistabelle-->
{|class="collapsible wikitable"
|-
! colspan = "2" |Überschrift
|-
|C
|D
|}
</div>
</div>
|<div style="margin:1em;">
{|
| Alpha || Beta || Gamma
|-
|-
| Delta || Epsilon || Zeta
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{|class="collapsible wikitable"</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>!Spalte A</nowiki><br />
<nowiki>!Spalte B</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|C</nowiki><br />
<nowiki>|D</nowiki><br />
<nowiki>|}</nowiki></div>
| <div style="margin-left:1em"><!--linker Rand für die Ergebnistabelle-->
{|class="collapsible wikitable"
|-
!Spalte A
!Spalte B
|-
|C
|D
|}
|}
</div>
</div>
|}
===Zugeklappte Tabelle===
Eine anfangs zugeklappte Tabelle benötigt <code>class="collapsible collapsed"</code>. Ansonsten gelten die selben Regeln wie bei der geöffneten Tabelle.
{| class="wikitable"
|-
! Eingabe
! Ergebnis
|-
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{| border="1"</nowiki><br />
<nowiki>{|class="collapsible collapsed wikitable"</nowiki><br />
<nowiki>| Alpha || Beta || Gamma</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>! colspan = "2" |Überschrift</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Delta || Epsilon || Zeta</nowiki><br />
<nowiki>|C</nowiki><br />
<nowiki>|}</nowiki><br />
<nowiki>|D</nowiki><br />
</div>
<nowiki>|}</nowiki></div>
|<div style="margin:1em;">
| <div style="margin-left:1em"><!--linker Rand für die Ergebnistabelle-->
{| border="1"
{|class="collapsible collapsed wikitable"
| Alpha || Beta || Gamma
|-
! colspan = "2" |Überschrift
|-
|-
| Delta || Epsilon || Zeta
|C
|D
|}
|}
</div>
</div>
|}
== 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.
=== Tabellenbreiten ===
Tabellenbreiten können relativ und absolut als Klasse angegeben werden. <code>class="w50rel"</code> wäre beispielsweise die halbe Breite des Browsers bzw. des Bereichs, in dem die Tabelle eingefügt wurde und <code>class="w200abs"</code> eine Breite von 200 Pixeln.
{| class="wikitable"
|-
! Eingabe
! Ergebnis
|-
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{| border="1" cellspacing="10" cellpadding="0"</nowiki><br />
<nowiki>{| class="wikitable w50rel"</nowiki><br />
<nowiki>| Alpha || Beta || Gamma</nowiki><br />
<nowiki>! A</nowiki><br />
<nowiki>! B</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Delta || Epsilon || Zeta</nowiki><br />
<nowiki>| C</nowiki><br />
<nowiki>| D</nowiki><br />
<nowiki>|}</nowiki>
<nowiki>|}</nowiki>
</div>
</div>
|<div style="margin:1em;">
|<div style="margin:1em">
{| border="1" cellspacing="10" cellpadding="0"
{| class="wikitable w50rel"
| Alpha || Beta || Gamma
! A
! B
|-
|-
| Delta || Epsilon || Zeta
| C
| D
|}
|}
</div>
</div>
|-
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{| border="1" cellspacing="0" cellpadding="10"</nowiki><br />
<nowiki>{| class="wikitable w200abs"</nowiki><br />
<nowiki>| Alpha || Beta || Gamma</nowiki><br />
<nowiki>! A</nowiki><br />
<nowiki>! B</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Delta || Epsilon || Zeta</nowiki><br />
<nowiki>| C</nowiki><br />
<nowiki>|}</nowiki><br />
<nowiki>| D</nowiki><br />
<nowiki>|}</nowiki>
</div>
</div>
|<div style="margin:1em;">
|<div style="margin:1em">
{| border="1" cellspacing="0" cellpadding="10"
{| class="wikitable w200abs"
| Alpha || Beta || Gamma
! A
! B
|-
|-
| Delta || Epsilon || Zeta
| C
| D
|}
|}
</div>
</div>
|}
=== Spaltenbreiten ===
Spaltenbreiten können relativ und absolut angegeben werden. Die Breitenangabe ist nur bei einer Zelle der Spalte notwendig und sinnvoll. Sind nur einige Spalten zu schmal oder zu breit, genügt eine relative Breitenangabe in nur diesen Spalten. Ist der Inhalt einer Zelle größer als die vorgegebene Spaltenbreite, dann wird die Spalte automatisch erweitert und die Vorgabe der Spaltenbreite damit unwirksam.
Für die unterschiedlichen Breiten wurden im Almanach Klassen angelegt.
{| class="wikitable"
|-
! Eingabe
! Ergebnis
|-
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{| border="1" cellspacing="10" cellpadding="10"</nowiki><br />
<nowiki>{| class="wikitable"</nowiki><br />
<nowiki>| Alpha || Beta || Gamma</nowiki><br />
<nowiki>! class="w10rel" | 10 %</nowiki><br />
<nowiki>! 30 %</nowiki><br />
<nowiki>! class="w60rel" | 60 %</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Delta || Epsilon || Zeta</nowiki><br />
<nowiki>| A</nowiki><br />
<nowiki>|}</nowiki><br />
<nowiki>| B</nowiki><br />
<nowiki>| C</nowiki><br />
<nowiki>|}</nowiki>
</div>
</div>
|<div style="margin:1em;">
|<div style="margin:1em">
{| border="1" cellspacing="10" cellpadding="10"
{| class="wikitable"
| Alpha || Beta || Gamma
! class="w60rel" | 10 %
! class="w30rel" | 30 %
! class="w60rel" | 60 %
|-
|-
| Delta || Epsilon || Zeta
| A
| B
| C
|}
|}
</div>
</div>
|-
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{| border="1" cellspacing="0" cellpadding="10" style="border-collapse:collapse;"</nowiki><br />
<nowiki>{| class="wikitable"</nowiki><br />
<nowiki>| Alpha || Beta || Gamma</nowiki><br />
<nowiki>! class="w100abs" | 100px</nowiki><br />
<nowiki>! class="w150abs" | 150px</nowiki><br />
<nowiki>! class="w200abs" | 200px</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Delta || Epsilon || Zeta</nowiki><br />
<nowiki>| A</nowiki><br />
<nowiki>| B</nowiki><br />
<nowiki>| C</nowiki><br />
<nowiki>|}</nowiki>
<nowiki>|}</nowiki>
</div>
</div>
|<div style="margin:1em;">
|<div style="margin:1em">
{| border="1" cellspacing="0" cellpadding="10" style="border-collapse:collapse;"
{| class="wikitable"
| Alpha || Beta || Gamma
! class="w100abs" | 100px
! class="w150abs" | 150px
! class="w200abs" | 200px
|-
|-
| Delta || Epsilon || Zeta
| A
| B
| C
|}
|}
</div>
</div>
Zeile 660: Zeile 712:


=== Ausrichtung ===
=== 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. Für die Ausrichtung wird der Einsatz von CSS-Befehlen empfohlen, das '''vertical-align''' gilt jeweils für die ganze Zeile, das '''text-align''' nur für die jeweilige Zelle.


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.
Im Almanach werden jedoch Klassen für die Ausrichtung verwendet.


{| class="prettytable" border="1"
{| class="wikitable"
!style="background-color: #d1d4e0;" | Eingabe
|-
!style="background-color: #d1d4e0;" | Ergebnis
! Eingabe
! Ergebnis
|-
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{| border="1" cellspacing="0"</nowiki><br />
<nowiki>{| class="wikitable"</nowiki><br />
<nowiki>!</nowiki><br />
<nowiki>!</nowiki><br />
<nowiki>! align="left" | Links</nowiki><br />
<nowiki>! style="text-align:left" | Links</nowiki><br />
<nowiki>! align="center" | Zentriert</nowiki><br />
<nowiki>! class="center" | Zentriert</nowiki><br />
<nowiki>! align="right" | Rechts</nowiki><br />
<nowiki>! style="text-align:right" | Rechts</nowiki><br />
<nowiki>|- valign="top" </nowiki><br />
<nowiki>|- style="vertical-align:top" </nowiki><br />
<nowiki>! height="38" | Oben</nowiki><br />
<nowiki>! style="text-align:left; padding:1em" | Oben</nowiki><br />
<nowiki>| align="left" | xx</nowiki><br />
<nowiki>| style="text-align:left" | xx</nowiki><br />
<nowiki>| align="center" | xxx</nowiki><br />
<nowiki>| class="center" | xxx</nowiki><br />
<nowiki>| align="right" | xx</nowiki><br />
<nowiki>| style="text-align:right" | xx</nowiki><br />
<nowiki>|- valign="middle" </nowiki><br />
<nowiki>|- style="vertical-align:middle" </nowiki><br />
<nowiki>! height="38" | Mitte</nowiki><br />
<nowiki>! style="text-align:left; padding:1em" | Mitte</nowiki><br />
<nowiki>| align="left" | x</nowiki><br />
<nowiki>| style="text-align:left" | x</nowiki><br />
<nowiki>| align="center" | x</nowiki><br />
<nowiki>| class="center" | x</nowiki><br />
<nowiki>| align="right" | x</nowiki><br />
<nowiki>| style="text-align:right" | x</nowiki><br />
<nowiki>|- valign="bottom" </nowiki><br />
<nowiki>|- style="vertical-align:bottom" </nowiki><br />
<nowiki>! height="38" | Unten</nowiki><br />
<nowiki>! style="text-align:left; padding:1em" | Unten</nowiki><br />
<nowiki>| align="left" | x</nowiki><br />
<nowiki>| style="text-align:left" | x</nowiki><br />
<nowiki>| align="center" | x</nowiki><br />
<nowiki>| class="center" | x</nowiki><br />
<nowiki>| align="right" | x</nowiki><br />
<nowiki>| style="text-align:right" | x</nowiki><br />
<nowiki>|}</nowiki>
<nowiki>|}</nowiki>
</div>
</div>
|<div style="margin:1em;">
|<div style="margin:1em">
{| border="1" cellspacing="0"
{| class="wikitable"
!
!
! align="left" | Links
! style="text-align:left" | Links
! align="center" | Zentriert
! class="center" | Zentriert
! align="right" | Rechts
! style="text-align:right" | Rechts
|- valign="top"
|- style="vertical-align:top"
! height="38" | Oben
! style="text-align:left; padding:1em" | Oben
| align="left" | xx
| style="text-align:left" | xx
| align="center" | xxx
| class="center" | xxx
| align="right" | xx
| style="text-align:right" | xx
|- valign="middle"
|- style="vertical-align:middle"
! height="38" | Mitte
! style="text-align:left; padding:1em" | Mitte
| align="left" | x
| style="text-align:left" | x
| align="center" | x
| class="center" | x
| align="right" | x
| style="text-align:right" | x
|- valign="bottom"
|- style="vertical-align:bottom"
! height="38" | Unten
! style="text-align:left; padding:1em" | Unten
| align="left" | x
| style="text-align:left" | x
| align="center" | x
| class="center" | x
| align="right" | x
| style="text-align:right" | x
|}
|}
</div>
</div>
|}
|}


=== Andere HTML-Formatierungen ===
Es ist auch möglich, andere HTML-Formatierungen zu übernehmen, z.B. Zellen farbig zu hinterlegen ('''<nowiki>style="background:#204B2C;"</nowiki>'''; ''siehe:'' [[Tamriel-Almanach:Farben|Farbtabelle]]) oder Rahmen andere Farben zu geben.
{| class="prettytable" border="1"
!style="background-color: #d1d4e0;" | Eingabe
!style="background-color: #d1d4e0;" | Ergebnis
|-
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{|</nowiki><br />
<nowiki>| style="background:#d1d4e0;" | 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:#d1d4e0;" | A
| B
|-
| C
| D
|}
</div>
|}


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

Aktuelle Version vom 10. Juli 2012, 22:54 Uhr

Hilfe > Tabellen


Diese Seite beschreibt die Verwendung von Tabellen im Tamriel-Almanach. Solltest du Probleme beim Erstellen einer Tabelle haben, wird dir auf der Diskussionsseite oder im Chat von den Mitautoren gerne und in der Regel auch schnell geholfen.

Einführung

Vorteil von Tabellen

Tabellen sind eine spezielle, strukturierte Form von Datenlisten. Im Gegensatz zu normalen Listen ermöglichen sie eine differenziertere, mehrdimensionale und übersichtlichere Darstellung mit vielen Informationen pro Eintrag und, falls gewünscht, auch eine Sortierbarkeit der einzelnen Spalten. Hierbei kann der Leser Daten numerisch nach Größe sortieren lassen, Begriffe können alphabetisch oder beides nach Rangordnung sortiert werden. Dadurch kann auch Mehrfachdarstellung vermieden werden. Alles Wissen kann übersichtlich in einer Tabelle verknüpft werden; Wissen wird zunehmend auch maschinenlesbar und Informationen können automatisch miteinander verknüpft werden.

Links und Bilder in Tabellen

Durch Links können in der Tabelle weiterführende oder vertiefende Artikel übersichtlich mit einzelnen Begriffen verknüpft werden. Ein Bild sagt mehr als tausend Worte gilt oft auch für Tabellen, exzessive Bildverwendungen können eine Tabelle jedoch auch unübersichtlich machen und überladen.

Technische Grundlagen

Um die Zellen einer Tabelle zu formatieren, lassen sich sowohl für die Tabelle als Ganzes als auch für einzelne Zellen HTML-Attribute angeben. Wir verwenden hier im Almanach einheitliche Tabellen, weswegen hauptsächlich mit dem class-Attribut gearbeitet werden sollte. In Einzelfällen kann auch das style-Attribut verwendet werden, wodurch sich beliebige CSS-Formatierungen realisieren lassen. Einzelne Zeilen einer Tabelle lassen sich ebenfalls formatieren, einzelne Spalten jedoch nicht, dies muss zellenweise geschehen.

Die meisten Tabellen sollten die Klasse wikitable besitzen (class="wikitable"), da sie so dem Schema der hier verwendeten Tabellen entsprechen.

Einfache Tabelle

In der MediaWiki-Syntax beginnt jede Tabelle 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.

Jede Zelle 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. 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. 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:

{| |Einzelzelle |}

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

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

Komplexere Tabellen

Rahmen

Bis jetzt haben unsere Tabellen eine Umrandungen. Die Umrandung wird in der ersten Zeile (direkt hinter dem {|) festgelegt. Es kann eingestellt werden, ob ein Rahmen existieren soll oder nicht. Dafür werden die Klassen border_0 (kein Rahmen) und border_1 (Rahmen) verwendet. Für besondere Fälle kann die Rahmenstärke auch mit dem Argument border="x", wobei x die Stärke des Rahmens ist, eingestellt werden.

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

Eingabe Ergebnis

{| class="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 class="border_0" erhält man:

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

Titelzeilen

Eine Tabelle mit Titelzeile (Spaltenköpfe) 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

{| class="wikitable"
! 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

Spalten- und zeilenübergreifende Darstellung

Auch mit der neuen Wiki-Syntax ist es, genauso wie bei HTML, möglich, dass eine Zelle über mehrere Spalten reicht (colspan) oder Zeilen überspannt (rowspan). 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

{| class="wikitable"
! A
! B
! C
|-
| Zelle 1
| colspan="2" | 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

{| class="wikitable"
! A
! B
|-
| rowspan="2" | Zelle 1
| Zelle 2
|-
| Zelle 4
|}
A B
Zelle 1 Zelle 2
Zelle 4

Und kombiniert:

Eingabe Ergebnis

{| class="wikitable"
! A
! B
! C
|-
| rowspan="2" colspan="2" | A1 & B1 & A2 & B2
| C1
|-
| C2
|-
| A3
| B3
| C3
|}
A B C
A1 & B1 & A2 & B2 C1
C2
A3 B3 C3

Verschachtelte Tabellen

Das Verschachteln ist mit der neuen Wiki-Syntax sehr 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! Eine Tabelle, in der eine weitere Tabelle steckt, sieht im Text so aus:

Eingabe Ergebnis

| Zelle 1
|
{|
| Zelle A
|-
| Zelle B
|}
| Zelle 3
|}

Zelle 1
Zelle A
Zelle B
Zelle 3

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

{|
|* erster Eintrag
* zweiter Eintrag
|}
* erster Eintrag
  • zweiter Eintrag

{|
|
* erster Eintrag
* zweiter Eintrag
|}
  • erster Eintrag
  • zweiter Eintrag

Sortierbare Tabellen

Tabellen können auch nach ihren Werten pro Spalte sortiert werden. Dazu muss class="sortable" im Tabellenkopf angegeben werden.

Eine sortierbare Tabelle erkennt man daran, dass sie in den Spaltenköpfen kleine Doppelpfeilsymbole zeigt. Bei Anklicken werden die Zeilen der Tabelle nach den Werten der jeweiligen Spalte sortiert.

Eingabe Ergebnis

{| class="wikitable sortable"
! Spalte 1
! Spalte 2
! Spalte 3
|-
| 12346
| € 234,44
| fghij
|-
| 98765
| € 77,55
| abcde
|}
Spalte 1 Spalte 2 Spalte 3
12346 € 234,44 fghij
98765 € 77,55 abcde

Einschränkungen: Bei komplexen Tabellen (d. h. solchen mit ungleichmäßigen Reihen und Spalten) ist eine Sortierung nicht möglich.

Das Sortieren funktioniert nur bei aktivem JavaScript – weil der Leser das unter Umständen ausgeschaltet hat, und auch, weil der Artikel noch druckfähig sein soll, muss die Tabelle bei der Eingabe im WikiCode schon sinnvoll sortiert sein.

Der Datentyp der obersten Zelle bestimmt den Sortierungsmodus. Erkannt werden einfache Datumsangaben, Währungen, Prozentwerte und Zahlen. Passt keiner dieser Datentypen, wird der Text in Kleinbuchstaben gewandelt und alphabetisch nach der Reihenfolge des Unicode sortiert

Zellen von der Sortierung ausschließen

Eine Spalte nicht sortieren

Man kann eine Spalte unsortierbar machen durch einfügen von class="unsortable" in den Attributen der Kopfzeile.

Eingabe Ergebnis

{| class="wikitable sortable"
! Zahlen !! Alphabet !! Datum
! Währung !! class="unsortable" | Unsortierbar
|-
| 1 || Z || 02-02-2004 || 5,00 || Diese
|-
| 2 || y || 13-apr-2005 || || Spalte
|-
| 3 || X || 17.aug.2006 || 6,50 || ist
|-
| 4 || w || 01.Jan.2005 || 4,20 || unsortierbar
|- | 5 || V || 05/12/2006 || 7,15 || wie man sieht.

|}
Zahlen Alphabet Datum Währung Unsortierbar
1 Z 02-02-2004 5,00 Diese
2 y 13-apr-2005 Spalte
3 X 17.aug.2006 6,50 ist
4 w 01.Jan.2005 4,20 unsortierbar
5 V 05/12/2006 7,15 wie man sieht.

Die letzte Zeile nicht sortieren

Manchmal ist es erwünscht, die letzte Tabellenzeile von der Sortierung auszuschließen. Das kann mit class="sortbottom" in der entsprechenden Tabellenzeile erreicht werden. Alle Zeilen, die mit class="sortbottom" versehen sind, werden unten in der Tabelle angeordnet und untereinander sortiert.

Eingabe Ergebnis

{|class="wikitable sortable"
! Name !! Vorname !! Größe
|-
| John || Smith || 1,85
|-
| Ron || Ray || 1,89
|-
| Mario || Bianchi || 1,72
|- class="sortbottom"
| colspan="2" | Durchschnitt: || 1,82

|}
Name Vorname Größe
John Smith 1,85
Ron Ray 1,89
Mario Bianchi 1,72
Durchschnitt: 1,82

Aufklappende Tabellen

Im Almanach ist es möglich, Tabellen zu erstellen, die auf- und wieder zugeklappt werden können.

Aufgeklappte Tabelle

Für eine Tabelle, die beim Laden der Seite bereits aufgeklappt, aber geschlossen werden kann, ist lediglich class="collapsible" notwendig. Bei mehreren Spalten erscheint das Feld zum Zu- und Aufklappen immer in der ersten Spalte. Daher ist es meist sinnvoll, aus der Überschrift eine einzige Spalte via colspan zu machen.

Eingabe Ergebnis

{|class="collapsible wikitable"
|-
! colspan = "2" |Überschrift
|-
|C
|D

|}
Überschrift
C D

{|class="collapsible wikitable"
|-
!Spalte A
!Spalte B
|-
|C
|D

|}
Spalte A Spalte B
C D

Zugeklappte Tabelle

Eine anfangs zugeklappte Tabelle benötigt class="collapsible collapsed". Ansonsten gelten die selben Regeln wie bei der geöffneten Tabelle.

Eingabe Ergebnis

{|class="collapsible collapsed wikitable"
|-
! colspan = "2" |Überschrift
|-
|C
|D

|}

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.

Tabellenbreiten

Tabellenbreiten können relativ und absolut als Klasse angegeben werden. class="w50rel" wäre beispielsweise die halbe Breite des Browsers bzw. des Bereichs, in dem die Tabelle eingefügt wurde und class="w200abs" eine Breite von 200 Pixeln.

Eingabe Ergebnis

{| class="wikitable w50rel"
! A
! B
|-
| C
| D
|}

A B
C D

{| class="wikitable w200abs"
! A
! B
|-
| C
| D
|}

A B
C D

Spaltenbreiten

Spaltenbreiten können relativ und absolut angegeben werden. Die Breitenangabe ist nur bei einer Zelle der Spalte notwendig und sinnvoll. Sind nur einige Spalten zu schmal oder zu breit, genügt eine relative Breitenangabe in nur diesen Spalten. Ist der Inhalt einer Zelle größer als die vorgegebene Spaltenbreite, dann wird die Spalte automatisch erweitert und die Vorgabe der Spaltenbreite damit unwirksam.

Für die unterschiedlichen Breiten wurden im Almanach Klassen angelegt.

Eingabe Ergebnis

{| class="wikitable"
! class="w10rel" | 10 %
! 30 %
! class="w60rel" | 60 %
|-
| A
| B
| C
|}

10 % 30 % 60 %
A B C

{| class="wikitable"
! class="w100abs" | 100px
! class="w150abs" | 150px
! class="w200abs" | 200px
|-
| A
| B
| C
|}

100px 150px 200px
A B C

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. Für die Ausrichtung wird der Einsatz von CSS-Befehlen empfohlen, das vertical-align gilt jeweils für die ganze Zeile, das text-align nur für die jeweilige Zelle.

Im Almanach werden jedoch Klassen für die Ausrichtung verwendet.

Eingabe Ergebnis

{| class="wikitable"
!
! style="text-align:left" | Links
! class="center" | Zentriert
! style="text-align:right" | Rechts
|- style="vertical-align:top"
! style="text-align:left; padding:1em" | Oben
| style="text-align:left" | xx
| class="center" | xxx
| style="text-align:right" | xx
|- style="vertical-align:middle"
! style="text-align:left; padding:1em" | Mitte
| style="text-align:left" | x
| class="center" | x
| style="text-align:right" | x
|- style="vertical-align:bottom"
! style="text-align:left; padding:1em" | Unten
| style="text-align:left" | x
| class="center" | x
| style="text-align:right" | x
|}

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



Diese Seite basiert auf der Seite Hilfe:Tabellen aus der freien Enzyklopädie Wikipedia und steht unter der GNU-Lizenz für freie Dokumentation. 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 GNU-Lizenz für freie Dokumentation. In der Wikipedia ist eine Liste der Autoren verfügbar.
Abgerufen von „https://www.elderscrollsportal.de/wiki/index.php?title=Hilfe:Tabellen&oldid=116468“
Oben Unten
Zurück