Jellys-Spielwiese

Aus STNE-Wiki

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
Zeile 3: Zeile 3:
__NOEDITSECTION__
__NOEDITSECTION__
-
{| width="100%"
+
'''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.
 +
 
 +
==Grundlagen==
 +
 
 +
Jede Tabelle beginnt mit einer geschweiften Klammer '''{''' gefolgt von einem senkrechten Strich '''<nowiki>|</nowiki>''' und endet mit einem Strich '''<nowiki>|</nowiki>''' gefolgt von einer geschweiften Klammer '''}'''. Die öffnende Klammer '''muss''' als erstes Zeichen der Zeile stehen.
 +
 
 +
Eine neue Tabellenzeile wird mit <tt>|-</tt> erzeugt. Innerhalb jeder Zeile können beliebig viele Zellen stehen. Eine Zelle wird mit einem senkrechten Strich am Zeilenanfang (<tt>|</tt>) eingeleitet.
 +
Mit zwei senkrechten Strichen (<tt>||</tt>) können mehrere Zellen in einer Textzeile zusammengeschrieben werden.
 +
 
 +
Eine Tabelle mit zwei Tabellenzeilen mit je zwei Zellen sieht im Text so aus:
 +
<nowiki>{|
 +
|Zelle 1
 +
|Zelle 2
 +
|-
 +
|Zelle 3
 +
|Zelle 4
 +
|}</nowiki>
 +
 
 +
Und stellt sich so dar:
 +
{|
 +
|Zelle 1
 +
|Zelle 2
|-
|-
-
| width="80%" style="vertical-align:top; border-width:0px"|
+
|Zelle 3
-
<div style="margin:0; margin-right:10px;border:2px solid #1A1C5E;">
+
|Zelle 4
 +
|}
-
<!--  Begrüßung - 1. Abschnitt links Anfang -->
+
 
-
<div style="padding:0.3em 1em 0.7em 1em;">
+
==Komplexere Tabellen==
-
=='''Willkommen im STNE-Wiki'''==
+
 
-
Willkommen in der Enzyklopädie von STNE. Hier findet ihr Hilfe zu allen Themen rund um STNE, könnt euch, eure Völker, Allianzen und Geschichten veröffentlichen.
+
===Rahmen===
-
</div>
+
Bis jetzt haben unsere Tabellen noch keine Umrandungen. Die Umrandung wird in der ersten Zeile (direkt hinter dem '''{|''' ) festgelegt, dabei ist zu beachten, eine Leerstelle zu lassen. Momentan kann nur die Rahmenstärke festgelegt werden, mit dem Argument: '''border=n''' wobei '''n''' die Stärke des Rahmens ist.
-
<!-- Navigationsleiste Themen -->
+
 
-
<div style="text-align:center; padding:7px 0px 4px 0px; border:0px solid #1A1C5E; border-width:1px 0px 0px 0px;"><big>'''[http://game.stne.net/ STNE - Das Spiel] · [[STNE-Team-Liste]] · [STNE-Statusseite]'''</big> </div>
+
====Beispiel====
-
</div>
+
Das letzte Beispiel von oben sieht mit Rahmen im Text so aus:
-
<!--  Begrüßung - 1. Abschnitt links Ende -->
+
<nowiki>{| border=1
-
<!-- unsichtbar - 2. Abschnitt links Anfang
+
  |Zelle 1
-
<div style="margin:10px 10px 0px 0px; border:2px solid #dfdfdf; padding:0.6em; ">
+
|Zelle 2
-
'''Wiki-News'''
+
|-
-
textetxt
+
|Zelle 3
-
</div>
+
|Zelle 4
-
</div>
+
|-
-
unsichtbar - 2. Abschnitt links Ende-->
+
|Zelle 5
-
<!--  Wie benutze ich ... - 3. Abschnitt links Anfang -->
+
|Zelle 6
-
<div style="margin:0; margin-top:10px; margin-right:10px; border:2px solid #1A1C5E; padding:0em 1em 1em 1em; ">
+
|}</nowiki>
-
== '''Wie benutze ich STNE-Wiki?''' ==
+
 
-
textetxt
+
und stellt sich so dar:
-
<div align="right"><small>'''blabla''' </small></div>
+
{| border=1
-
</div>
+
|Zelle 1
-
<!--  Wie benutze ich ... - 3. Abschnitt links Ende -->
+
|Zelle 2
-
<!--  Wichtige Links - 4. Abschnitt links Anfang -->
+
|-
-
<div style="margin:0; margin-top:10px; margin-right:10px; border:2px solid #1A1C5E; padding:0em 1em 1em 1em;">
+
|Zelle 3
-
== '''Wichtige Links '''==
+
|Zelle 4
-
texttext
+
|-
-
<div align="right"><small>'''blub''' </small></div>
+
|Zelle 5
-
</div>
+
|Zelle 6
-
<!--  Wichtige Links - 4. Abschnitt links Ende -->
+
-
<!--  News - 5. Abschnitt links Anfang -->
+
-
<div style="margin:0; margin-top:10px; margin-right:10px; border:2px solid #1A1C5E; padding:0em 1em 1em 1em;">
+
-
== '''News''' ==
+
-
texttext
+
-
</div>
+
-
<!--  News - 5. Abschnitt links Ende -->
+
-
<!-- RECHTE SPALTE -->
+
-
<!--  Logo - 1. Abschnitt rechts Anfang -->
+
-
| width="48%" style="vertical-align:top; border-width:0px" |
+
-
<div style="margin:0; border:2px solid gold padding:0em 1em 1em 1em;">
+
-
<center>[[Bild:warp5.jpg]]</center>
+
-
</div>
+
-
<!--  Logo - 1. Abschnitt rechts Ende -->
+
-
<!--  Schnellstart - 2. Abschnitt rechts Anfang -->
+
-
<div style="margin:0; margin-top:10px; border:2px solid #1A1C5E; padding:0em 1em 1em 1em;">
+
-
== '''Schnellstart''' ==
+
-
* [[Anfängertutorial|Hilfe - Ich bin neu in STNE]]
+
-
* [[Inhalt|Suchen im Inhaltsverzeichnis]]
+
-
* [[Index|Suchen im alphabetischen Index]]
+
-
* [[:Kategorie:Allgemeines|Suchen nach Kategorien]]
+
-
* [[Abkürzungsverzeichnis]]
+
-
</div>
+
-
<!--  Schnellstart - 2. Abschnitt rechts Ende -->
+
-
<!--  Wiki-Mitarbeit - 3. Abschnitt rechts Anfang -->
+
-
<div style="margin:0; margin-top:10px; border:2px solid #1A1C5E; padding:0em 1em 1em 1em; margin-top:10px;">
+
-
== '''Wiki-Mitarbeit''' ==
+
-
textetxt
+
-
<div align="right"><small>'''[[Link]]'''</small></div>
+
-
</div>
+
-
<!--  Wiki-Mitarbeit - 3. Abschnitt rechts Ende -->
+
-
<!--  Sonstiges - 4. Abschnitt rechts Anfang -->
+
-
<div style="margin:0; margin-top:10px; border:2px solid #1A1C5E; padding: 0em 1em 1em 1em;">
+
-
== '''Schon gewusst, dass …''' ==
+
-
''Artikel des Tages oder ähnliches''
+
-
<div align="right"><small>'''[[links rechts]]'''</small></div>
+
-
</div>
+
-
<!--  Sonstiges - 4. Abschnitt rechts Ende -->
+
-
|- <!-- UNTERER KASTEN -->
+
-
|colspan="2" style="vertical-align:top border-width:0px"|
+
-
<div style="margin:0; margin-top:8px; padding:0em 0.3em 0.3em 0.3em; border:2px solid #1A1C5E;">
+
-
blablubb
+
-
</div>
+
|}
|}
 +
===Zellen über mehrere Zeilen (Rowspanning und Colspanning)===
 +
Auch mit den neuen Wiki-Befehlen ist es genauso wie bei HTML möglich eine Zelle über mehrere Zeilen reichen zu lassen, ein so genanntes ''rowspan''.
 +
Um rowspan einzuschalten, muss man '''vor''' der betreffenden Zelle, aber unbedingt in der gleichen Zeile, das rowspan-Argument einfügen, etwa in der Form ''rowspan=n'' wobei ''n'' für die Anzahl der Zeilen steht, über die die Zelle reichen soll. Soll eine Zelle über mehrere Spalten reichen benutze man ''colspan''.
 +
 +
 +
====Beispiel====
 +
 +
Eine Tabelle, in der Zelle 2 über zwei Spalten reicht, sieht im Text so aus:
 +
<nowiki>{| border=1
 +
|Zelle 1
 +
|rowspan=2 | Zelle 2, mit rowspan
 +
|Zelle 3
 +
|-
 +
|Zelle 4
 +
|Zelle 5
 +
|}</nowiki>
 +
 +
und stellt sich so dar:
 +
{| border=1
 +
|Zelle 1
 +
|rowspan=2 | Zelle 2, mit rowspan
 +
|Zelle 3
 +
|-
 +
|Zelle 4
 +
|Zelle 5
 +
|}
 +
 +
 +
===Verschachtelte Tabellen===
 +
 +
Das Verschachteln ist mit den neuen Wiki-Befehlen denkbar einfach. Man muss nur an der Stelle, an der man eine weitere Tabelle, innerhalb einer anderen Tabelle wünscht, eine neue öffnende Klammer setzen. Wichtig ist es nur, dass dort am Anfang der Textzeile ausnahmsweise ''kein'' senkrechter Strich stehen darf!
 +
 +
====Beispiel====
 +
 +
Eine Tabelle, in der eine weitere Tabelle steckt, sieht im Text so aus:
 +
<nowiki>{| border=1
 +
|Zelle 1
 +
|
 +
{| border=2
 +
|Zelle A
 +
|-
 +
|Zelle B
 +
|}
 +
|Zelle 3
 +
|}</nowiki>
 +
 +
und stellt sich so dar:
 +
{| border=1
 +
|Zelle 1
 +
|
 +
{| border=2
 +
|Zelle A
 +
|-
 +
|Zelle B
 +
|}
 +
|Zelle 3
 +
|}
 +
 +
 +
===Beschriftung===
 +
 +
Mit den neuen Wiki-Befehlen ist es leicht möglich, eine Beschriftung über der Tabelle zu implementieren. Diese Beschriftung ist zentriert und maximal genauso breit wie die Tabelle mit automatischen Zeilenumbruch. Um eine Beschriftung einzubauen reicht es nach dem senkrechten Strich und vor dem Text ein Plus ''+'' zu setzen. Innerhalb der Beschriftung kann man ganz normal mit Wiki-Befehlen formatieren.
 +
 +
 +
====Beispiel====
 +
 +
Eine Tabelle, mit Beschriftung, sieht im Text so aus:
 +
<nowiki>{| border=1
 +
|+ Dies ist eine '''Beschriftung''', die ''ziemlich'' lang ist.
 +
|Zelle 1
 +
|Zelle 2
 +
|-
 +
|Zelle 3
 +
|Zelle 4
 +
|}</nowiki>
 +
und stellt sich so dar:
 +
{| border=1
 +
|+ Dies ist eine '''Beschriftung''', die ''ziemlich'' lang ist.
 +
|Zelle 1
 +
|Zelle 2
 +
|-
 +
|Zelle 3
 +
|Zelle 4
 +
|}
 +
 +
 +
=== Bilder und Tabellen ===
 +
 +
Bilder in Tabellen zu formatieren ist mit den neuen Wiki-Befehlen einfacher geworden. Möglich wird dies mit ''class''-Argumenten. ''Class''-Argumente können am Anfang einer Tabelle stehen und gelten dann für die ganze Tabelle (ähnlich wie Rahmen (siehe oben)) oder am Anfang einer Zelle.
 +
Das Interessante ist, dass nicht nur das Bild formatiert wird, sondern auch der zugehörige Text, dies ist zum Beispiel nützlich für Bildunterschriften. Die zwei (?? gibt's noch mehr ??) ''class''-Argumente sind ''flag'' und ''rimage''. Sie werden mittels eines <code>class=flag</code>, bzw. <code>class=rimage</code>  eingebunden. Mit <code>class=rimage</code> wird die Größe der Zelle auf das Bild ausgedehnt, ein kleiner Abstand um das Bild zum Rahmen wird beibehalten, und der Text verkleinert und zentriert und das ganze auf die rechte Seite geschoben.
 +
Mit <code>class=flag</code> wird der Text zwar ebenfalls zentriert, aber nicht verkleinert und auch nicht auf die rechte Seite verschoben.
 +
 +
 +
====Beispiele====
 +
 +
Um ein Bild mit einer Bildunterschrift anzuzeigen, verwendet man die folgende Struktur.
 +
<nowiki>{| class=image
 +
| [[Bild:Schiffsversteigerung.png]] mit einer langen Bildbeschreibung unter dem Bild
 +
|}</nowiki>
 +
Das Ergebnis im Text ist:
 +
<div style="border: 1px solid black; margin: 0.5em 3em; padding: 0.5em;">
 +
{| class=image
 +
| [[Bild:Schiffsversteigerung.png]] mit einer langen Bildbeschreibung unter dem Bild
 +
|}
 +
bla bla text text text text bla bla bla
 +
</div>
-
__________________________________________________________
+
Eine Tabelle, mit Flagge mit Bildunterschrift,(flag) sieht im Text so aus:
 +
<nowiki>{| class=flag
 +
| [[Bild:Schiffsversteigerung.png]]  |} mit einer kurzen Bildbeschreibung
 +
</nowiki>
 +
und stellt sich so dar:
 +
{| class=flag
 +
| [[Bild:Schiffsversteigerung.png]]
 +
|}
 +
mit einer kurzen Bildbeschreibung

Version vom 14. November 2005, 14:56 Uhr

Inhalt | STNE | Regeln | NPC | Kolonien | Gebäude | Waren | Items | Schiffe | Waffen | Sternenkartographie | Forschungen | Handel | Siedler | RPG | Support | Index


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.

Grundlagen

Jede Tabelle beginnt mit einer geschweiften Klammer { gefolgt von einem senkrechten Strich | und endet mit einem Strich | gefolgt von einer geschweiften Klammer }. Die öffnende Klammer muss als erstes Zeichen der Zeile stehen.

Eine neue Tabellenzeile wird mit |- erzeugt. Innerhalb jeder Zeile können beliebig viele Zellen stehen. Eine Zelle wird mit einem senkrechten Strich am Zeilenanfang (|) eingeleitet. Mit zwei senkrechten Strichen (||) können mehrere Zellen in einer Textzeile zusammengeschrieben werden.

Eine Tabelle mit zwei Tabellenzeilen mit je zwei Zellen sieht im Text so aus: 

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

Und stellt sich so dar:

Zelle 1 Zelle 2
Zelle 3 Zelle 4


Komplexere Tabellen

Rahmen

Bis jetzt haben unsere Tabellen noch keine Umrandungen. Die Umrandung wird in der ersten Zeile (direkt hinter dem {| ) festgelegt, dabei ist zu beachten, eine Leerstelle zu lassen. Momentan kann nur die Rahmenstärke festgelegt werden, mit dem Argument: border=n wobei n die Stärke des Rahmens ist.

Beispiel

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

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

und stellt sich so dar:

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


Zellen über mehrere Zeilen (Rowspanning und Colspanning)

Auch mit den neuen Wiki-Befehlen ist es genauso wie bei HTML möglich eine Zelle über mehrere Zeilen reichen zu lassen, ein so genanntes rowspan. Um rowspan einzuschalten, muss man vor der betreffenden Zelle, aber unbedingt in der gleichen Zeile, das rowspan-Argument einfügen, etwa in der Form rowspan=n wobei n für die Anzahl der Zeilen steht, über die die Zelle reichen soll. Soll eine Zelle über mehrere Spalten reichen benutze man colspan.


Beispiel

Eine Tabelle, in der Zelle 2 über zwei Spalten reicht, sieht im Text so aus: 

{| border=1
 |Zelle 1 
 |rowspan=2 | Zelle 2, mit rowspan
 |Zelle 3
 |- 
 |Zelle 4
 |Zelle 5
 |}

und stellt sich so dar:

Zelle 1 Zelle 2, mit rowspan Zelle 3
Zelle 4 Zelle 5


Verschachtelte Tabellen

Das Verschachteln ist mit den neuen Wiki-Befehlen denkbar einfach. Man muss nur an der Stelle, an der man eine weitere Tabelle, innerhalb einer anderen Tabelle wünscht, eine neue öffnende Klammer setzen. Wichtig ist es nur, dass dort am Anfang der Textzeile ausnahmsweise kein senkrechter Strich stehen darf!

Beispiel

Eine Tabelle, in der eine weitere Tabelle steckt, sieht im Text so aus: 

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

und stellt sich so dar:

Zelle 1
Zelle A
Zelle B
Zelle 3


Beschriftung

Mit den neuen Wiki-Befehlen ist es leicht möglich, eine Beschriftung über der Tabelle zu implementieren. Diese Beschriftung ist zentriert und maximal genauso breit wie die Tabelle mit automatischen Zeilenumbruch. Um eine Beschriftung einzubauen reicht es nach dem senkrechten Strich und vor dem Text ein Plus + zu setzen. Innerhalb der Beschriftung kann man ganz normal mit Wiki-Befehlen formatieren.


Beispiel

Eine Tabelle, mit Beschriftung, sieht im Text so aus: 

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

und stellt sich so dar:

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


Bilder und Tabellen

Bilder in Tabellen zu formatieren ist mit den neuen Wiki-Befehlen einfacher geworden. Möglich wird dies mit class-Argumenten. Class-Argumente können am Anfang einer Tabelle stehen und gelten dann für die ganze Tabelle (ähnlich wie Rahmen (siehe oben)) oder am Anfang einer Zelle. Das Interessante ist, dass nicht nur das Bild formatiert wird, sondern auch der zugehörige Text, dies ist zum Beispiel nützlich für Bildunterschriften. Die zwei (?? gibt's noch mehr ??) class-Argumente sind flag und rimage. Sie werden mittels eines class=flag, bzw. class=rimage eingebunden. Mit class=rimage wird die Größe der Zelle auf das Bild ausgedehnt, ein kleiner Abstand um das Bild zum Rahmen wird beibehalten, und der Text verkleinert und zentriert und das ganze auf die rechte Seite geschoben. Mit class=flag wird der Text zwar ebenfalls zentriert, aber nicht verkleinert und auch nicht auf die rechte Seite verschoben.


Beispiele

Um ein Bild mit einer Bildunterschrift anzuzeigen, verwendet man die folgende Struktur. 

{| class=image
 | [[Bild:Schiffsversteigerung.png]] mit einer langen Bildbeschreibung unter dem Bild
 |}

Das Ergebnis im Text ist:

Schiffsversteigerung.png mit einer langen Bildbeschreibung unter dem Bild

bla bla text text text text bla bla bla

Eine Tabelle, mit Flagge mit Bildunterschrift,(flag) sieht im Text so aus: 

{| class=flag
 | [[Bild:Schiffsversteigerung.png]]  |} mit einer kurzen Bildbeschreibung

und stellt sich so dar:

Schiffsversteigerung.png

mit einer kurzen Bildbeschreibung

Von „https://wiki.stne.net/index.php?title=Jellys-Spielwiese“
Persönliche Werkzeuge
Starflyer - Wikizeitung