Aus Stadtwiki Braunschweig
Beispielhafte Tabelle in einem Wiki
Einfache Tabellen sind mit Wikisyntax schnell zu erstellen. Besondere Formen, insbesondere verschachtelte Tabellen erfordern aber ein bisschen Übung und sind oft mit XHTML-Kenntnissen besser zu entwickeln.
Bedenke: Wikis sind primär zur schnellen und gemeinschaftlichen Textbearbeitung entwickelt worden, nicht für komplexe Layouts.
[Bearbeiten] Grundsätzliche Tipps
- Große Tabellen, die direkt am Anfang des Quelltextes einer Seite stehen, schrecken oft Neulinge ab, die versuchen, das erste Mal etwas in einem Wiki zu bearbeiten.
- Vorlagen eignen sich gut zum Erstellen mehrfach verwendeter Infoboxen oder Navigationsleisten in Tabellenform. Hierdurch können komplizierte Quelltexte erheblich vereinfacht werden.
Für einfache Tabellen gibt es zwei Grundschreibweisen, die zum gleichen Ergebnis führen.
Entweder Du schreibst alle Zellen untereinander oder Du schreibst – um Platz zu sparen – die Inhalte einer Tabellenzeile (mit mehreren Zellen) direkt hintereinander, dann werden die einzelnen Zellen mit zwei Strichen getrennt.
| Eingabe
| Ergebnis
|
|
{|
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|}
|
| Zelle 1
| Zelle 2
|
| Zelle 3
| Zelle 4
|
|
|
{|
| Zelle 1 || Zelle 2
|-
| Zelle 3 || Zelle 4
|}
|
| Zelle 1 | Zelle 2
|
| Zelle 3 | Zelle 4
|
|
{{Prettytable}} (engl. für hübsche Tabelle) ist eine beliebte Vorlage, die normale Tabellen ohne aufwändiges Herumprobieren in ein einheitliches, ansprechendes Format bringt.
| Eingabe
| Ergebnis
|
|
{| {{Prettytable}}
! bgcolor="#f1f1f1" | Überschrift 1
! bgcolor="#f1f1f1" | Überschrift 2
! bgcolor="#f1f1f1" | Überschrift 3
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}
|
| Überschrift 1
| Überschrift 2
| Überschrift 3
|
| Zelle 1 | Zelle 2 | Zelle 3
|
| Zelle 4 | Zelle 5 | Zelle 6
|
| Zelle 7 | Zelle 8 | Zelle 9
|
|
[Bearbeiten] Komplexere Tabellen
Dieses erweiterte Beispiel zeigt einige Optionen für das Erschaffen von Tabellen. Du kannst mit diesen Einstellungen bei deiner eigenen Tabelle herumspielen, damit du siehst, welche Eigenschaften diese haben. Nicht jede Technik ist jedoch in jedem Fall zu empfehlen; nur weil du einen bunten Hintergrund hinzufügen kannst, ist es nicht ratsam dies immer zu machen. Versuche die Codierung deiner Tabelle möglichst einfach zu halten und denke daran, dass andere Benutzer diese Seite später vielleicht auch bearbeiten.
Ein Beispiel Layout
| Erste Überschrift
| Zweite Überschrift
|
| oben links
|
| rechte Seite
|
| unten links
| unten mitte
|
|
|
|
Willkommen in der Zwillingsstadt
|
Obwohl es möglich ist ein komplexes Layout anhand einer Tabelle darzustellen, ist es nicht ratsam. Zur Vereinfachung teile die Tabelle in kleine Einheiten ein.
| Layout
| Code
|
Ein Beispiel Layout
| Erste Überschrift
| Zweite Überschrift
|
| oben links
|
| rechte Seite
|
| unten links
| unten mitte
|
Eine Tabelle in der Tabelle
|
|
|
|
|
{| border="1" cellpadding="5" cellspacing="0" style="border-collapse:collapse;" width="330"
|+'''Ein Beispiel Layout'''
|-
! Erste Überschrift
! colspan="2" | Zweite Überschrift
|-
| oben links
|
| rowspan=2 | rechte Seite
|-
| | unten links
| | unten mitte
|-
| colspan="3" align="center" |
{| border="0"
|+''Eine Tabelle in der Tabelle''
|-
|| [[Image:Wiki.png]]
|| [[Image:Wiki.png]]
|}
|}
|
Es ist besser die Tabellen zu teilen:
| Layout
| Code
|
Ein Beispiel Layout
| Erste Überschrift
| Zweite Überschrift
|
| oben links
|
| rechte Seite
|
| unten links
| unten mitte
|
|
{| border="1" cellpadding="5" cellspacing="0" width="330" style="border-collapse:collapse;"
|+'''Ein Beispiel Layout'''
|-
! Erste Überschrift
! colspan="2" | Zweite Überschrift
|-
| oben links
|
| rowspan=2 | rechte Seite
|-
| | unten links
| | unten mitte
|}
{| style="border:1px solid; border-top:none; width:330px;"
|-
|| [[Image:Wiki.png]]
|| [[Image:Wiki.png]]
|}
|
[Bearbeiten] Verwende keine Tabelle für einfache Boxen
Tabellencode sollte nur für Tabellen verwendet werden. Verwende für einfache Boxen <div></div> anstatt. Ein Beispiel, anstatt von:
| Layout
| Code
|
|
|
|
|
Willkommen in der Zwillingsstadt
|
|
{| style="border:1px solid; border-top:none; width:330px;"
|-
|| [[Image:Wiki.png]]
|| [[Image:Wiki.png]]
|-
| align="center" colspan="2" style="border-top:1px solid red;"|
Willkommen in der Zwillingsstadt
|}
|
verwende lieber
| Layout
| Code
|
|
|
|
|
Willkommen in der Zwillingsstadt
|
|
{| style="border:1px solid; border-top:none; width:330px;"
|-
|| [[Image:Wiki.png]]
|| [[Image:Wiki.png]]
|-
| align="center" colspan="2"|
<div style="border:1px solid red;">Willkommen in der Zwillingsstadt</div>
|}
|
[Bearbeiten] Der komplette Code
Ein Beispiel Layout
| Erste Überschrift
| Zweite Überschrift
|
| oben links
|
| rechte Seite
|
| unten links
| unten mitte
|
|
|
|
|
Willkommen in der Zwillingsstadt
|
{| border="1" cellpadding="5" cellspacing="0" width="330" style="border-collapse:collapse;"
|+'''Ein Beispiel Layout'''
|-
! style="background:#efefef;" | Erste Überschrift
! colspan="2" style="background:#ffdead;" | Zweite Überschrift
|-
| oben links
|
| rowspan=2 | rechte Seite
|-
| | unten links
| | unten mitte
|}
{| style="border:1px solid; border-top:none; width:330px;"
|-
|| [[Image:Wiki.png]]
|| [[Image:Wiki.png]]
|-
| align="center" colspan="2"|
<div style="border:1px solid red;">Willkommen in der Zwillingsstadt</div>
|}
