Difference between revisions of "Tables"
LukasHoenig (talk | contribs) |
Fbaeckmann (talk | contribs) m |
Hier beschreiben wir die Bearbeitung von Tabellen im Wiki-Code. Für die schnelle Bearbeitung von Tabellen empfiehlt sich der WYSIWYG-Editor. Dennoch kann in Einzelfällen die klassische Bearbeitung mit Wiki-Tags notwendig sein.
Funktion[edit | edit source]
Tabellen sind ein sehr wichtiges Mittel zur Gestaltung von Wiki-Seiten. Nicht nur, dass sich damit Inhalte übersichtlich darstellen lassen, Tabellen dienen gelegentlich auch dem Design einer Seite. Die Grundstruktur der Hauptseite oder der Themenportalseite beruht beispielsweise auf einer Tabelle. Tabellen sollten allerdings nur sehr behutsam zur Strukturierung ganzer Seiten eingesetzt werden. Der Quellcode wird für Außenstehende schnell unübersichtlich und für die Lesegeräte von Sehbehinderten stellen sie eine Barriere dar. Deshalb rät auch die Wikipedia ihren Nutzern ganz grundsätzlich davon ab, Tabellen als grafisches Element für ganze Seiten zu verwenden.
Das MediaWiki bietet eine eigene Syntax, um Tabellen darzustellen. Diese Syntax ist an das verbreitete HTML angelehnt, aber wesentlich einfacher.
Trotzdem bleibt die Bearbeitung von Tabellen komplex. Der Einsatz von Editoren produziert HTML-Code, der für die Bearbeitung durch andere eine Barriere darstellt.
Einfache Tabellen[edit | edit source]
Eingabe | Ergebnis | Kommentar dazu | ||||||
---|---|---|---|---|---|---|---|---|
File:HilfeTabelle1.jpg |
|
Hier sehen Sie die Syntax für eine einfache Tabelle. |
||||||
File:HilfeTabelle2.jpg |
|
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. |
||||||
Wieder was gelernt:
|
||||||||
Um schnell eine einfache Tabelle zu erstellen, reicht es bei BlueSpice Wiki, in der Editieransicht auf den Button "Insert a Table" File:Button insert table.jpg zu klicken. |
Komplexere Tabellen[edit | edit source]
Einen Artikel darüber finden Sie hier: Tabellen für Fortgeschrittene
Rahmen[edit | edit source]
Eingabe | Ergebnis | Kommentar dazu | ||||
---|---|---|---|---|---|---|
File:HilfeTabelle3.jpg |
|
Die Umrandung wird in der ersten Zeile der Tabelle (direkt hinter dem {|) festgelegt. Die Rahmenstärke wird in Pixel angegeben: border="x" |
||||
Hinweis: Die klassischen Tabellenränder wirken oft etwas altbacken. Deshalb gibt es für das Tabellen-Layout Style-Vorlagen. |
Titelzeilen[edit | edit source]
Eingabe | Ergebnis | Kommentar dazu | ||||||
---|---|---|---|---|---|---|---|---|
File:HilfeTabelle4.jpg |
|
Titelzeilen werden mit ! statt | eingeleitet. |
||||||
Hinweis: {{Tabelle1}} ist eine Style-Vorlage ;-) |
Zellen verbinden: Rowspanning und Colspanning[edit | edit source]
Eingabe | Ergebnis | Kommentar dazu | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
File:HilfeTabelle5.jpg |
|
Eine Tabelle mit einer Zelle, die über zwei Spalten geht. Der Befehl (colspan="2") wird vor die zu formatierende Zelle eingefügt und mit | abgetrennt.
|
|||||||||
File:HilfeTabelle6.jpg |
|
Eine Tabelle mit einer Zelle, die über zwei Zeilen geht (rowspan="2"). |
|||||||||
Hinweis: Leere Zellen werden in einer Tabelle nicht umrahmt. Um in manchen Browsern trotzdem einen Rahmen zu bekommen, kann man ein geschütztes Leerzeichen setzen. |
Verschachtelte Tabellen[edit | edit source]
Eingabe | Ergebnis | Kommentar dazu | |||||
---|---|---|---|---|---|---|---|
File:HilfeTabelle7.jpg |
|
Eine Tabelle, in der eine weitere Tabelle steckt. Zum Verschachteln muss man an der Stelle, an der man eine weitere Tabelle innerhalb einer anderen Tabelle wünscht, eine neue öffnende Klammer setzen. Wichtig ist nur, dass am Anfang der Textzeile kein senkrechter Strich stehen darf. |
Beschriftung[edit | edit source]
Eingabe | Ergebnis | Kommentar dazu | ||||
---|---|---|---|---|---|---|
File:HilfeTabelle8.jpg | Das ist eine nette Tabelle
|
Es ist möglich, eine zentrierte Beschriftung über der Tabelle anzugeben. Um eine Beschriftung einzubauen reicht es, nach dem senkrechten Strich und vor dem Text ein Plus + zu setzen. |
Aufzählungszeichen[edit | edit source]
Eingabe | Ergebnis | Kommentar dazu | ||||
---|---|---|---|---|---|---|
File:HilfeTabelle9.jpg |
|
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. |
Sortierbare Tabellen[edit | edit source]
Eingabe | Ergebnis | Kommentar dazu | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
File:HilfeTabelle10.jpg |
|
Tabellen können auch nach ihren Werten pro Spalte sortiert werden. Dazu muss class="sortable" im Tabellenkopf angegeben werden.
|
|||||||||
Einschränkungen:
|
Spaltenbreiten[edit | edit source]
Eingabe | Ergebnis | Kommentar dazu | ||||||
---|---|---|---|---|---|---|---|---|
File:HilfeTabelle11.jpg |
|
Spaltenbreiten können relativ und absolut angegeben werden, wobei absolute Angaben in Pixeln nur beim Einbinden von Grafiken eingesetzt werden sollten. Die Breitenangabe ist nur bei einer Zelle der Spalte notwendig und sinnvoll. |
||||||
File:HilfeTabelle12.jpg |
|
Zellenabstände mit cellspacing und cellpadding[edit | edit source]
Eingabe | Ergebnis | Kommentar dazu | ||||||
---|---|---|---|---|---|---|---|---|
350px |
|
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. |
||||||
350px |
|
Ausrichtung[edit | edit source]
Eingabe | Ergebnis | Kommentar dazu | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
File:HilfeTabelle15.jpg |
|
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. |
Formatvorlagen[edit | edit source]
Eingabe | Ergebnis | Kommentar dazu | ||
---|---|---|---|---|
File:HilfeTabelle16.jpg |
|
Einige Benutzer haben Vorlagen erstellt, um die Formatierung zu vereinfachen. Anstatt sich an die Tabellenparameter erinnern zu müssen, kann eine Formatvorlage verwendet werden. Diese ist nach dem |
__TOC__ Hier beschreiben wir die Bearbeitung von Tabellen im Wiki-Code. Für die schnelle Bearbeitung von Tabellen empfiehlt sich der [[WYSIWYGVisualEditor|WYSIWYG-Editor]]. Dennoch kann in Einzelfällen die klassische Bearbeitung mit Wiki-Tags notwendig sein. ==Funktion== Tabellen sind ein sehr wichtiges Mittel zur Gestaltung von Wiki-Seiten. Nicht nur, dass sich damit Inhalte übersichtlich darstellen lassen, Tabellen dienen gelegentlich auch dem Design einer Seite. Die Grundstruktur der Hauptseite oder der Themenportalseite beruht beispielsweise auf einer Tabelle. Tabellen sollten allerdings nur sehr behutsam zur Strukturierung ganzer Seiten eingesetzt werden. Der Quellcode wird für Außenstehende schnell unübersichtlich und für die Lesegeräte von Sehbehinderten stellen sie eine Barriere dar. Deshalb rät auch die Wikipedia ihren Nutzern ganz grundsätzlich davon ab, Tabellen als grafisches Element für ganze Seiten zu verwenden. Das [https://www.mediawiki.org/wiki/Help:Tables/de MediaWiki] bietet eine eigene Syntax, um Tabellen darzustellen. Diese Syntax ist an das verbreitete HTML angelehnt, aber wesentlich einfacher. Trotzdem bleibt die Bearbeitung von Tabellen komplex. Der Einsatz von Editoren produziert HTML-Code, der für die Bearbeitung durch andere eine Barriere darstellt. ==Einfache Tabellen== {| class="contenttable" |- ! width="50%"|Eingabe ! width="25%"|Ergebnis ! width="25%"|Kommentar dazu |- valign="top" ||[[File:HilfeTabelle1.jpg]] || {| |- ||Zelle 1 ||Zelle 2 |- ||Zelle 3 ||Zelle 4 |} || Hier sehen Sie die Syntax für eine einfache Tabelle. |- valign="top" ||[[File:HilfeTabelle2.jpg]] || {| width="150px" |- ||Zelle 1 ||Zelle 2 |- ||Zelle 3 ||Zelle 4 |- ||Zelle 5 ||Zelle 6 |} || 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. |- valign="top" | colspan="3"| '''Wieder was gelernt:'''<br /> Der Beginn einer neuen Zeile wird deutlich gemacht, indem man hinter dem senkrechten Strich einen waagerechten ''-'' setzt. Dies lässt sich beliebig oft wiederholen. |- | colspan="3"|Um schnell eine einfache Tabelle zu erstellen, reicht es bei {{SITENAME}}, in der Editieransicht auf den Button "Insert a Table" [[File:Button_insert_table.jpg]] zu klicken. |} ==Komplexere Tabellen== Einen Artikel darüber finden Sie hier: [https://de.wikipedia.org/wiki/Hilfe:Tabellen_f%C3%BCr_Fortgeschrittene Tabellen für Fortgeschrittene] ===Rahmen=== {| class="contenttable" width="100%" |- ! width="50%"|Eingabe ! width="25%"|Ergebnis ! width="25%"|Kommentar dazu |- valign="top" ||[[File:HilfeTabelle3.jpg]] | width="150px"| {| border="1" |- ||Zelle 1 ||Zelle 2 |- ||Zelle 3 ||Zelle 4 |} || Die Umrandung wird in der ersten Zeile der Tabelle (direkt hinter dem <nowiki>{|</nowiki>) festgelegt. Die Rahmenstärke wird in Pixel angegeben: '''border="x"''' |- valign="top" | colspan="3"|'''Hinweis:''' Die klassischen Tabellenränder wirken oft etwas altbacken. Deshalb gibt es für das Tabellen-Layout [[Style-Vorlagen]]. |} ===Titelzeilen=== {| class="contenttable" width="100%" |- ! width="50%"|Eingabe ! width="25%"|Ergebnis ! width="25%"|Kommentar dazu |- valign="top" ||[[File:HilfeTabelle4.jpg]] || {| |- !|Name !|Vorname |- ||Karstadt ||Liesl |- ||Valentin ||Karl |} || Titelzeilen werden mit '''<nowiki>!</nowiki>''' statt '''<nowiki>|</nowiki>''' eingeleitet. |- valign="top" | colspan="3"|'''Hinweis:''' <nowiki> {{Tabelle1}}</nowiki> ist eine [[Style-Vorlagen|Style-Vorlage]] ;-) |} ===Zellen verbinden: Rowspanning und Colspanning=== {| class="contenttable" width="100%" |- ! width="50%"|Eingabe ! width="25%"|Ergebnis ! width="25%"|Kommentar dazu |- valign="top" ||[[File:HilfeTabelle5.jpg]] || {| {{Tabelle1}} |- !|A !|B !|C |- ||Zelle 1 | colspan="2" align="center"|Zelle 2 |- ||Zelle 3 ||Zelle 4 ||Zelle 5 |} || Eine Tabelle mit einer Zelle, die über zwei Spalten geht. Der Befehl (''colspan="2"'') wird vor die zu formatierende Zelle eingefügt und mit <nowiki>|</nowiki> abgetrennt. <br /> Der folgende Befehl ("align") zentriert nur den Inhalt der Zelle, damit wir den Effekt besser sehen. |- valign="top" ||[[File:HilfeTabelle6.jpg]] || {| |- !|A !|B |- | rowspan="2" align="center"|Zelle 1 ||Zelle 2 |- ||Zelle 4 |} || Eine Tabelle mit einer Zelle, die über zwei Zeilen geht (''rowspan="2"''). |- valign="top" | colspan="3"|'''Hinweis:''' Leere Zellen werden in einer Tabelle nicht umrahmt. Um in manchen Browsern trotzdem einen Rahmen zu bekommen, kann man ein geschütztes Leerzeichen '''&nbsp;''' setzen. |} ===Verschachtelte Tabellen=== {| class="contenttable" width="100%" |- ! width="50%"|Eingabe ! width="25%"|Ergebnis ! width="25%"|Kommentar dazu |- valign="top" ||[[File:HilfeTabelle7.jpg]] | width="150px"| {| border="1" |- ||Zelle 1 || {| border="1" | Zelle A |- | Zelle B |} ||Zelle 3 |} || Eine Tabelle, in der eine weitere Tabelle steckt. Zum Verschachteln muss man an der Stelle, an der man eine weitere Tabelle innerhalb einer anderen Tabelle wünscht, eine neue öffnende Klammer setzen. Wichtig ist nur, dass '''am Anfang der Textzeile kein senkrechter Strich''' stehen darf. |} ===Beschriftung=== {| class="contenttable" width="100%" |- ! width="50%"|Eingabe ! width="25%"|Ergebnis ! width="25%"|Kommentar dazu |- valign="top" ||[[File:HilfeTabelle8.jpg]] | width="150px"|Das ist eine nette Tabelle {| |+ |- ||Tabelle ||nett |- ||Nette ||Tabelle |} || Es ist möglich, eine zentrierte Beschriftung über der Tabelle anzugeben. Um eine Beschriftung einzubauen reicht es, nach dem senkrechten Strich und vor dem Text ein Plus '''+''' zu setzen. |} ===Aufzählungszeichen=== {| class="contenttable" width="100%" |- ! width="50%"|Eingabe ! width="25%"|Ergebnis ! width="25%"|Kommentar dazu |- valign="top" ||[[File:HilfeTabelle9.jpg]] | width="150px"| {| |- ||Aufzählung richtig ||Aufzählung falsch |- || * erster Eintrag * zweiter Eintrag ||* erster Eintrag * zweiter Eintrag |} || 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. |} ===Sortierbare Tabellen=== {| class="contenttable" width="100%" |- ! width="50%"|Eingabe ! width="25%"|Ergebnis ! width="25%"|Kommentar dazu |- valign="top" ||[[File:HilfeTabelle10.jpg]] || {| class="sortable" |- !|Spalte 1 !|Spalte 2 !|Spalte 3 |- | width="100px"|12346 | width="100px"|€ 234,44 | width="100px"|SuSe |- ||98765 ||€ 77,55 ||IBM |} || Tabellen können auch nach ihren Werten pro Spalte sortiert werden. Dazu muss <tt>class="sortable"</tt> im Tabellenkopf angegeben werden.<br /> Klicken Sie einmal auf das kleine Kästchen im Spaltenkopf! |- | colspan="3"|'''Einschränkungen:''' * Damit Zahlen nach ihren numerischen Werten korrekt sortiert werden, dürfen sie bislang weder ein Tausendertrennzeichen noch Einheiten (außer den Währungszeichen € und $) oder andere Beschriftungen enthalten. Ein Hinweis auf die verwendeten Einheiten sollte daher in der Kopfzeile angegeben werden. * Bei komplexen Tabellen (d. h. solchen mit ungleichmäßigen Reihen und Spalten) ist eine Sortierung nicht möglich. |} ===Spaltenbreiten=== {| class="contenttable" width="100%" |- ! width="50%"|Eingabe ! width="25%"|Ergebnis ! width="25%"|Kommentar dazu |- valign="top" ||[[File:HilfeTabelle11.jpg]] || {| |- ! width="10%"|10 % ! width="20%"|20 % ! width="40%"|40 % |- valign="top" ||A ||B ||C |} | rowspan="2"| Spaltenbreiten können relativ und absolut angegeben werden, wobei absolute Angaben in Pixeln nur beim Einbinden von Grafiken eingesetzt werden sollten. Die Breitenangabe ist nur bei einer Zelle der Spalte notwendig und sinnvoll. |- valign="top" ||[[File:HilfeTabelle12.jpg]] || {| |- ! width="50"|50 ! width="100"|100 ! width="200"|200 |- valign="top" ||A ||B ||C |} |} ===Zellenabstände mit ''cellspacing'' und ''cellpadding''=== {| class="contenttable" width="100%" |- ! width="50%"|Eingabe ! width="25%"|Ergebnis ! width="25%"|Kommentar dazu |- valign="top" ||[[File:HilfeTabelle13.jpg|350px]] || {| cellspacing="9" cellpadding="0" border="1" |- ||Alpha ||Beta ||Gamma |- ||Delta ||Epsilon ||Zeta |} | rowspan="2"| 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. |- valign="top" ||[[File:HilfeTabelle14.jpg|350px]] || {| cellspacing="0" cellpadding="9" border="1" |- ||Alpha ||Beta ||Gamma |- ||Delta ||Epsilon ||Zeta |} |} ===Ausrichtung=== {| class="contenttable" width="100%" |- ! width="50%"|Eingabe ! width="25%"|Ergebnis ! width="25%"|Kommentar dazu |- valign="top" ||[[File:HilfeTabelle15.jpg]] || {| cellspacing="0" border="1" |- !| ! 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 |} || 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. |} ==Formatvorlagen== {| class="contenttable" width="100%" |- ! width="50%"|Eingabe ! width="25%"|Ergebnis ! width="25%"|Kommentar dazu |- valign="top" ||[[File:HilfeTabelle16.jpg]] || {| |- ||Text linke Spalte ||Text rechte Spalte |} || Einige Benutzer haben [[Vorlagen]] erstellt, um die Formatierung zu vereinfachen. Anstatt sich an die Tabellenparameter erinnern zu müssen, kann eine Formatvorlage verwendet werden. Diese ist nach dem <code>{|</code> einzufügen. Die Verwendung ermöglicht ein konsistentes Tabellenlayout, eine Erleichterung beim Fehlerhandling sowie einfache Anpassung des Layouts bei allen Tabellen. |} [[en:{{ FULLPAGENAME }}|en:{{FULLPAGENAME}}]][[de:Tabellen]]
Line 1: | Line 1: | ||
__TOC__ | __TOC__ | ||
− | Hier beschreiben wir die Bearbeitung von Tabellen im Wiki-Code. Für die schnelle Bearbeitung von Tabellen empfiehlt sich der [[ | + | Hier beschreiben wir die Bearbeitung von Tabellen im Wiki-Code. Für die schnelle Bearbeitung von Tabellen empfiehlt sich der [[VisualEditor|WYSIWYG-Editor]]. Dennoch kann in Einzelfällen die klassische Bearbeitung mit Wiki-Tags notwendig sein. |
==Funktion== | ==Funktion== | ||
Line 392: | Line 392: | ||
|} | |} | ||
− | [[en:{{ FULLPAGENAME }}|en:{{FULLPAGENAME}}]][[de:Tabellen]] | + | [[en:{{ FULLPAGENAME }}|en:{{FULLPAGENAME}}]][[de:Tabellen]] |