Bikegeissel: /* Der {{SITENAME}} Weg */ Ein wenig testen, ob noch alles geht ;)

2008-09-25T20:33:15Z

Der {{SITENAME}} Weg: Ein wenig testen, ob noch alles geht ;)

← Nächstältere Version		Version vom 25. September 2008, 20:33 Uhr
Zeile 65:		Zeile 65:
	In diesenm Wki gehen wir bei Tabellen erst einal den einfachen Weg und stellen den Nutzern eine [[Hilfe:Vorlagen\|Vorlage]] zur Verfügung, die für die meisten Anwendungsfälle reicht.		In diesenm Wki gehen wir bei Tabellen erst einal den einfachen Weg und stellen den Nutzern eine [[Hilfe:Vorlagen\|Vorlage]] zur Verfügung, die für die meisten Anwendungsfälle reicht.

	<nowiki>{\| {{Prettytable}}~~</nowiki>~~		<nowiki>{\| {{Prettytable}}
	~~<nowiki>~~\| Orange \|\| Apfel \|\| more~~</nowiki>~~		\| Orange \|\| Apfel \|\| more
	~~<nowiki>~~\|-~~</nowiki>~~		\|-
	~~<nowiki>~~\| Brot \|\| Torte \|\| more~~</nowiki>~~		\| Brot \|\| Torte \|\| more
	~~<nowiki>~~\|-~~</nowiki>~~		\|-
	~~<nowiki>~~\| Butter \|\| Eis \|\| and more~~</nowiki>~~		\| Butter \|\| Eis \|\| and more
	~~<nowiki>~~\|}</nowiki>		\|}</nowiki>

	Mit dem gezeigten Code wird automatisch die Tabelle erst einmal korrekt Formatiert:		Mit dem gezeigten Code wird automatisch die Tabelle erst einmal korrekt Formatiert:
Zeile 85:		Zeile 85:
	OK, wir wollen, dass die Tabelle nur ca 30% der Seitenbreite einnimmt, dann müssen wir noch einen Parameter an das Temaplet übergeben ''width''		OK, wir wollen, dass die Tabelle nur ca 30% der Seitenbreite einnimmt, dann müssen wir noch einen Parameter an das Temaplet übergeben ''width''

	<nowiki>{\| {{Prettytable\|width=30%}}~~</nowiki>~~		<nowiki> {\| {{Prettytable\|width=30%}}
	~~<nowiki>~~\| Orange \|\| Apfel \|\| more~~</nowiki>~~		\| Orange \|\| Apfel \|\| more
	~~<nowiki>~~\|-~~</nowiki>~~		\|-
	~~<nowiki>~~\| Brot \|\| Torte \|\| more~~</nowiki>~~		\| Brot \|\| Torte \|\| more
	~~<nowiki>~~\|-~~</nowiki>~~		\|-
	~~<nowiki>~~\| Butter \|\| Eis \|\| and more~~</nowiki>~~		\| Butter \|\| Eis \|\| and more
	~~<nowiki>~~\|}</nowiki>		\|}</nowiki>

	Mit dem gezeigten Code wird automatisch die Tabelle erst einmal etwas schmaler - einfach ein wenig probieren.		Mit dem gezeigten Code wird automatisch die Tabelle erst einmal etwas schmaler - einfach ein wenig probieren.

Bikegeissel: width-Parameter erklärt

2008-09-25T06:48:45Z

width-Parameter erklärt

@@ Zeile 75: / Zeile 75: @@
 Mit dem gezeigten Code wird automatisch die Tabelle erst einmal korrekt Formatiert:
 {| {{Prettytable}}
 |  Orange    ||   Apfel   ||   more
 |-
@@ Zeile 84: / Zeile 104: @@
 Falls Ihnen HTML völlig fremd ist und Ihnen bereits hier der Kopf schwirrt, lesen Sie bitte nicht weiter - mehr Informationen, um Tabellen zu erstellen benötigt man an dieser Stelle erst einmal nicht.
 ===Alternative===

Bikegeissel am 24. September 2008 um 12:35 Uhr

2008-09-24T12:35:03Z

Neue Seite

Tabellen können in {{SITENAME}} Seiten entweder direkt mit HTML Tabellenelementen geschrieben werden oder mit dem Wikicode. HTML Tabellenelemente und ihr Gebrauch werden auf verschiedenen Webseiten beschrieben und deshalb hier nicht besprochen. Der Wikicode nutzt Buchstabensymbole um die Tabellenstruktur im Artikel zu bilden, die in der Ansicht durch HTML Tabellenelemente ersetzt werden.

Generell sollte man die Verwendung von Tabellen vermeiden, außer es geht wirklich nicht anders. Der Tabellenaufbau verkompliziert meist das Bearbeiten von Seiten.

== Zusammenfassung {{SITENAME}} Tabellen Code ==

{|cellpadding="5" cellspacing="0" border="1"
|-
! Wiki Code !! vgl. HTML Code !! Beschreibung
|-
|<nowiki>{|</nowiki> || <nowiki><table></nowiki> || '''Tabellenanfang'''
|-
|<nowiki>|+</nowiki> || <nowiki> </nowiki> || '''Tabellenüberschrift''', ''optional;'' nur einmal pro Tabelle zwischen Tabellenanfang und erster Zeile definierbar
|-
|<nowiki>|-</nowiki> || <nowiki><tr></nowiki> || neue '''Tabellenzeile'''
|-
|<nowiki>!</nowiki> || <nowiki><th></nowiki> || '''Tabellenkopfzelle''', ''optional.'' Aufeinanderfolgende Kopfzellen können, durch doppelte Ausrufezeichen (!!) getrennt, in der gleichen Zeile folgen oder mit einfachen Ausrufezeichen (!) auf einer neuen Zeile beginnen.
|-
|<nowiki>|</nowiki> || <nowiki><td></nowiki> || '''Tabellenzelle''', ''Pflicht!'' Aufeinanderfolgende Zellen können, durch doppelte Striche (<nowiki>||</nowiki>) getrennt, in der gleichen Zeile folgen oder mit einfachem Strich (<nowiki>|</nowiki>) auf einer neuen Zeile beginnen.
|-
|<nowiki>|}</nowiki> || <nowiki></table></nowiki> || '''Tabellenende'''
|}

*Die angegebenen Zeichen müssen am '''Zeilenanfang''' stehen, ausgenommen die Doppelten || und !! für optional aufeinanderfolgende Zellen in einer Zeile.
*'''XHTML - Eigenschaften.''' Jede Markierung, außer das Tabellenende, kann optional eine oder mehrere XHTML Eigenschaften haben. Die Eigenschaften müssen in der gleichen Zeile eingegeben werden, für die sie auch gültig sind. Mehrere Eingaben müssen mit einem Leerzeichen getrennt eingegeben werden.
**Der Inhalt von Zellen und Überschriften (<nowiki>| oder ||, ! oder !!, und |+</nowiki>) muss von der Formatierung mit einen Strich (|) getrennt sein und kann in der gleichen und folgenden Zeilen stehen.
**Tabellen, Spalten und reihen (<nowiki>{| und |-</nowiki>) die nicht direkt einen Inhalt haben können, dürfen auch ''keinen'' Strich (|) nach den Attributen haben. Falls doch einer gesetzt wird entfernt der Parser diese ''und'' das letzte Attribut, falls zwischen ihm und dem Strich kein Leereichen ist.
*'''Inhalt''' kann (a) nach seiner Zellenmarkierung nach den optionalen XHTML Eigenschaften in der gleichen Reihe stehen oder (b) unter der Zellenmarkierung. Inhalt, welcher Wiki Formatierung (wie Überschriften, Aufzählungen usw.) nutzt, muss am Anfang einer neuen Zeile stehen.

==Einfache Tabelle==

===Einfache Form===
Die folgende Tabelle hat keine Ränder oder gute Leerräume. Sie zeigt aber den einfachen Wiki Code für eine Tabellenstruktur
{| width="100%"
|+
! Anzeige in Wiki
! Wiki Code
|-
|
{|
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|<pre>
{|
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
</pre>
|}

===Der {{SITENAME}} Weg===
In diesenm Wki gehen wir bei Tabellen erst einal den einfachen Weg und stellen den Nutzern eine [[Hilfe:Vorlagen|Vorlage]] zur Verfügung, die für die meisten Anwendungsfälle reicht.

<nowiki>{| {{Prettytable}}</nowiki>
<nowiki>| Orange || Apfel || more</nowiki>
<nowiki>|-</nowiki>
<nowiki>| Brot || Torte || more</nowiki>
<nowiki>|-</nowiki>
<nowiki>| Butter || Eis || and more</nowiki>
<nowiki>|}</nowiki>

Mit dem gezeigten Code wird automatisch die Tabelle erst einmal korrekt Formatiert:
{| {{Prettytable}}
| Orange || Apfel || more
|-
| Brot || Torte || more
|-
| Butter || Eis || and more
|}

Falls Ihnen HTML völlig fremd ist und Ihnen bereits hier der Kopf schwirrt, lesen Sie bitte nicht weiter - mehr Informationen, um Tabellen zu erstellen benötigt man an dieser Stelle erst einmal nicht.

===Alternative===
Für ein mehr tabellarisches Aussehen können im Wiki Markup die Zellen in einer Zeile aufgeführt werden. Die einzelnen Spalten müssen dabei mit || getrennt werden. Jedoch nimmt die Übersichtlichtkeit mit steigemden Textinhalt ab.

Leerzeichen können hier helfen um den Text optisch einfacher auszurichten. Diese haben später keinen Einfluss auf die erstellten Seiten.

HTML Angaben können bei dieser Art genauso hinzugefügt werden wie in anderen Tabellen.
{| width="100%"
|width="50%"|
{|
| Orange || Apfel || more
|-
| Brot || Torte || more
|-
| Butter || Eis || and more
|}
|width="50%"|
<pre>
{|
| Orange || Apfel || more
|-
| Brot || Torte || more
|-
| Butter || Eis || and more
|}
</pre>
|}

===Mit HTML Eigenschaften===
Durch das Hinzufügen von HTML Eigenschaften lässt sich das Aussehen der Tabelle verändern.
====border="1"====
{| width="100%"
|width="50%"|
{| border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|width="50%"|
<pre>
{| border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
</pre>
|}
====align="center" border="1"====
{| width="100%"
|width="50%"|
{| align="center" border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|width="50%"|
<pre>
{| align="center" border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
</pre>
|}

====align="right" border="1"====
Eigenschaften lassen sich auch auf individuelle Zellen anwenden. Zahlen zum Beispiel sehen besser aus, wenn sie rechtsbündig stehen.

{| width="100%"
|width="50%"|
{| border="1"
|Orange
|Apfel
|align="right"|12,333.00
|-
|Brot
|Torte
|align="right"|500.00
|-
|Butter
|Eis
|align="right"|1.00
|}
|width="50%"|
<pre>
{| border="1"
|Orange
|Apfel
|align="right"|12,333.00
|-
|Brot
|Torte
|align="right"|500.00
|-
|Butter
|Eis
|align="right"|1.00
|}
</pre>
|}

Man kann Eigenschaften auch auf nur bestimmte Zeilen anwenden.
{| width="100%"
|width="50%"|
{| border="1"
|Orange
|Apfel
|align="right"|12,333.00
|-
|Brot
|Torte
|align="right"|500.00
|- style="font-style:italic;color:green;"
|Butter
|Eis
|align="right"|1.00
|}
|width="50%"|
<pre>
{| border="1"
|Orange
|Apfel
|align="right"|12,333.00
|-
|Brot
|Torte
|align="right"|500.00
|- style="font-style:italic;color:green;"
|Butter
|Eis
|align="right"|1.00
|}
</pre>
|}

====cellspacing="0" border="1"====
{| width="100%"
|width="50%"|
{| cellspacing="0" border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|width="50%"|
<pre>
{| cellspacing="0" border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
</pre>
|}
====cellpadding="20" cellspacing="0" border="1"====
{| width="100%"
|width="50%"|
{| cellpadding="20" cellspacing="0" border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|width="50%"|
<pre>
{| cellpadding="20" cellspacing="0" border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
</pre>
|}

===Mit HTML Eigenschaften und CSS Definitionen===
CSS-Angaben können in Kombination mit oder ohne HTML-Eigenschaften verwendet werden.
====style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"====
{| width="100%"
|width="50%"|
{| style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|width="50%"|
<pre>
{| style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
</pre>
|}

==Table mit TH Kopfzeile==

TH (HTML Tabellenkopf) kann mit einem ! vor dem | erstellt werden. Diese Kopfzeile erscheint für gewöhnlich in fett und zentriert.

===Tabellenkopf===
====pro Spalte====
{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
!lecker
!leckerer
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|width="50%"|
<pre>
{| border="1" cellpadding="20" cellspacing="0"
!lecker
!leckerer
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
</pre>
|}
====Colspan="2"====
{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
!colspan="2"|leckerer
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|width="50%"|
<pre>
{| border="1" cellpadding="20" cellspacing="0"
! colspan="2"|leckerer
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
</pre>
|}

===seitliche Überschrift===
====standardmäßig====
{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
!Obst
|Orange
|Apfel
|-
!Hauptspeise
|Brot
|Torte
|-
!Zutaten
|Butter
|Eis
|}
|width="50%"|
<pre>
{| border="1" cellpadding="20" cellspacing="0"
!Obst
|Orange
|Apfel
|-
!Hauptspeise
|Brot
|Torte
|-
!Zutaten
|Butter
|Eis
|}
</pre>
|}

====rechtsbündig====
Seitliche Überschriften können wie folgt rechtbündig angeordnet werden:
{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
!align="right" |Obst
|Orange
|Apfel
|-
!align="right" |Hauptspeise
|Brot
|Torte
|-
!align="right" |Zutaten
|Butter
|Eis
|}
|width="50%"|
<pre>
{| border="1" cellpadding="20" cellspacing="0"
!align="right" |Obst
|Orange
|Apfel
|-
!align="right" |Hauptspeise
|Brot
|Torte
|-
!align="right" |Zutaten
|Butter
|Eis
|}
</pre>
|}

==Beschriftung==
Eine '''Tabellenbeschriftung''' kann wie folgt über jeder Tabelle hinzugefügt werden:
{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
|+Essenssachen
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|width="50%"|
<pre>
{| border="1" cellpadding="20" cellspacing="0"
|+Essenssachen
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
</pre>
|}

'''Eigenschaften''' können der Beschriftung wie folgt zugewiesen werden:

{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:#e76700;"|''Essenssachen''
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|width="50%"|
<pre>
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:#e76700;"|''Essenssachen''
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
</pre>
|}

==Tabellen mit H1, H2, H3 usw. Überschriften==

HTML H1, H2, H3, H4 usw. Überschriften können auch in Tabellen mit dem üblichen ==Wiki Markup== erstellt werden. Diese müssen dann in einer Zeile mit dem Text stehen.

'''Hier ist die Vorschau sehr von Vorteil!''' da mit jeder Kopfzeile ein neuer Abschnitt beginnt, der später editierbar sein wird. Jedoch werden dann Teile der Tabelle beim Bearbeiten fehlen, da diese in einem anderen Abschnitt stehen.

Auch muss die Struktur eingehalten werden, da die Überschriften genauso wie andere Überschriften in das Inhaltsverzeichnis eingehen.

{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
|colspan="2"|
===Yummiest===
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|width="50%"|
<pre>
{| border="1" cellpadding="20" cellspacing="0"
|colspan="2"|
===Yummiest===
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
</pre>
|}

Hilfe:Tabellen - Versionsgeschichte

Bikegeissel: /* Der {{SITENAME}} Weg */ Ein wenig testen, ob noch alles geht ;)

Bikegeissel: width-Parameter erklärt

Bikegeissel am 24. September 2008 um 12:35 Uhr