Hilfe:Tabellen

Aus STNE-Wiki

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
 
Zeile 1: Zeile 1:
{{menue}}
{{menue}}
{{Wiki-Hilfe}}
{{Wiki-Hilfe}}
-
{{inuse| --[[Spieler:Jelandria|Jelandria Alderion]] 02:29, 3. Mär 2006 (W. Europe Standard Time)}}
 
-
'''ACHTUNG!Die Tabellenformatierungen wie bgcolor und Co dürfen so im Wiki nicht mehr verwendet werden!!! Dafür wurden von Arakis eigene Formate definiert. siehe auch Formatierungen wie hier: [[Adrec]]''' Ansonsten super Arbeit :-) danke --[[Spieler:Jelandria|Jelandria Alderion]] 02:29, 3. Mär 2006 (W. Europe Standard Time)
 
-
 
-
 
-
 
==Tabellen==
==Tabellen==
Zeile 15: Zeile 10:
{|
{|
-
! align="center" bgcolor="#000030" | Beschreibung
+
! Beschreibung
-
! align="center" bgcolor="#000030" | Syntax in der Wiki
+
! Syntax in der Wiki
-
! align="center" bgcolor="#000030" | Vergleich: Syntax in HTML
+
! Vergleich: Syntax in HTML
|-
|-
-
| align="left" | Öffnender Tag für Tabelle
+
| class="l" | Öffnender Tag für Tabelle
-
| align="center" | <nowiki>{|</nowiki> ''Attribute''
+
| class="c" | <nowiki>{|</nowiki> ''Attribute''
-
| align="center" | <nowiki> <table</nowiki> ''Attribute''<nowiki>></nowiki>
+
| class="c" | <nowiki> <table</nowiki> ''Attribute''<nowiki>></nowiki>
|-
|-
-
| align="left" | Tabellenkopf
+
| class="l" | Tabellenkopf
-
| align="center" | <nowiki> ! </nowiki>''Attribute''<nowiki> | Text</nowiki>
+
| class="c" | <nowiki> ! </nowiki>Text
-
| align="center" | <nowiki> <tr><th </nowiki>''Attribute''<nowiki>>Text</th></nowiki>
+
| class="c" | <nowiki> <tr><th> </nowiki>Text <nowiki></th></nowiki>
|-
|-
-
| align="left" | Tabellenzeile (Inhalt)
+
| class="l" | Tabellenzeile (Inhalt)
-
| align="center" | <nowiki> |</nowiki> ''Attribute''<nowiki> | Text</nowiki>
+
| class="c" | <nowiki> |</nowiki> ''Attribute''<nowiki> | Text</nowiki>
-
| align="center" | <nowiki> <tr><td</nowiki> ''Attribute''<nowiki>>Text</td></nowiki>
+
| class="c" | <nowiki> <tr><td</nowiki> ''Attribute''<nowiki>>Text</td></nowiki>
|-
|-
-
| align="left" | Schließender Tag Kopf/Zeile
+
| class="l" | Schließender Tag Kopf/Zeile
-
| align="center" | <nowiki> |-</nowiki>
+
| class="c" | <nowiki> |-</nowiki>
-
| align="center" | <nowiki> </tr></nowiki>
+
| class="c" | <nowiki> </tr></nowiki>
|-
|-
-
| align="left" | Schließender Tag für Tabelle
+
| class="l" | Schließender Tag für Tabelle
-
| align="center" | <nowiki> |}</nowiki>
+
| class="c" | <nowiki> |}</nowiki>
-
| align="center" | <nowiki> </table></nowiki>
+
| class="c" | <nowiki> </table></nowiki>
|-
|-
|}
|}
<br><br>
<br><br>
'''Die am Häufigsten verwendeten Attribute'''
'''Die am Häufigsten verwendeten Attribute'''
-
 
+
<br>
-
 
+
<br>
-
Für einen sichtbaren '''Rand''' um die Tabelle, musst du nach dem Tag <nowiki>{|</nowiki> das Attribut '''border''' notieren und ihm einen Wert
+
Ein Tabellenkopf hat '''immer''' folgende Attribute integriert: <br>
-
größer als 0 zuweisen. Beispiel: '''<nowiki>{| border="1"</nowiki>''' ''Druckt einen sichtbaren Rand um die Tabelle und jedes Feld.''
+
<nowiki>! </nowiki>''Text'' <br>
-
 
+
richtet den ''Text'' automatisch '''zentriert''' in der Zelle aus, verpasst dem Hintergrund das typische ''dunkelblau'' und schreibt den ''Text'' '''fett'''. <br>
-
 
+
Im Klartext sieht das Ergebnis dann so aus:
-
Um den Inhalt einer Tabellenzeile '''horizontal auszurichten''', verwendet man das Attribut '''align''' in dem Attributbereich des Tags für  
+
{|
-
Tabellenkopf oder Tabellenzeile. Die Werte: '''left''', '''center''', '''right''' sind erlaubt.  
+
! &nbsp;&nbsp;&nbsp; Text &nbsp;&nbsp;&nbsp;
-
Beispiel: '''<nowiki>! align="center" | Inhalt</nowiki>''' ''Zentriert den Inhalt in der Tabellenzeile''
+
|}
-
 
+
<br>
-
 
+
<br>
-
Die '''Hintergrundfarbe''' eines Tabellenfeldes oder einer Tabellenzeile kann mit dem Attribut '''bgcolor''' geändert werden.  
+
Um den Inhalt einer Tabellenzelle '''horizontal auszurichten''', verwendet man das Attribut '''class''' in dem Attributbereich des Tags für  
-
Beispiel: '''<nowiki> ! bgcolor="#000030" | Inhalt</nowiki>''' ''Ändert die Hintergrundfarbe des Feldes in ein dunkles Blau, hier in hexadezimaler Notation #000030''.
+
die Tabellenzeile. '''''class'' hat ''keine'' Auswirkungen auf Tabellenköpfe. (<nowiki>! </nowiki>''Text'' // <nowiki><tr><th> </nowiki>''Text'' <nowiki></th></nowiki>''' <br>
 +
Die Werte: '''l''' ''(left)'', '''c''' ''(center)'' und '''r''' ''(right)'' sind erlaubt.  
 +
Beispiel: '''<nowiki>| class="c" | Inhalt</nowiki>''' ''Zentriert den Inhalt in der Tabellenzeile'' <br>
 +
Standartmäßig wird der text '''immer''' linksbündig ausgerichtet.
 +
<br>
 +
<br>
 +
Die '''Hintergrundfarbe''' einer Tabellenzelle wird ebenso mit dem Attribut '''class''' geändert. Auch dieses funktioniert ausschliesslich in normalen Tabellenzellen - nicht in Tabellenköpfen.<br>
 +
Es gibt insgesamt 3 vordefinierte Hintergrundfarben. Der ''Tag'' für die Hintergrundfarbe wird '''immer''' mit der Ausrichtung des Textes kombiniert. <br>
 +
<br>
 +
{|
 +
! Im folgenden sind einige
 +
! Beispiele angeführt, um
 +
! das gesamte System ein
 +
! wenig zu verdeutlichen.
 +
|-
 +
| class="nc" colspan="4" | <br>
 +
|-
 +
| class="nc" | <br>
 +
! Ausrichtung: left ('''l''')
 +
! Ausrichtung: center ('''c''')
 +
! Ausrichtung: right ('''r''')
 +
|-
 +
! ohne Rahmen
 +
| class="nl" | <nowiki>class="nl"</nowiki>
 +
| class="nc" | <nowiki>class="nc"</nowiki>
 +
| class="nr" | <nowiki>class="nr"</nowiki>
 +
|-
 +
! ohne Hintergrundfarbe
 +
| class="l" | <nowiki>class="l"</nowiki>
 +
| class="c" | <nowiki>class="c"</nowiki>
 +
| class="r" | <nowiki>class="r"</nowiki>
 +
|-
 +
! mit Hintergrundfarbe
 +
| class="bl" | <nowiki>class="bl"</nowiki>
 +
| class="bc" | <nowiki>class="bc"</nowiki>
 +
| class="br" | <nowiki>class="br"</nowiki>
 +
|-
 +
! mit STNE-Hintergrundfarbe
 +
| class="bbl" | <nowiki>class="bbl"</nowiki>
 +
| class="bbc" | <nowiki>class="bbc"</nowiki>
 +
| class="bbr" | <nowiki>class="bbr"</nowiki>
 +
|}
 +
<br>
 +
In '''''seltenen Einzelfällen''''' kann es vorkommen, dass man eine andere Hintergrundfarbe, als die vordefinierten benötigt. In diesem Falle wird das Attribut '''''bgcolor''''' benötigt.
 +
Beispiel: '''<nowiki> ! bgcolor="#cabbec" | Inhalt</nowiki>''' ''Ändert die Hintergrundfarbe des Feldes in diesem Falle in ein helles Lila, hier in hexadezimaler Notation #cabbec''.
 +
{|
 +
| bgcolor="#cabbec" | Text
 +
|}
 +
Wie man an diesem Beispiel sehen kann, ist es sinnvoll, im Falle des änder der Hintergrundfarbe, auch die entsprechende Schriftfarbe zu ändern, da es ansonsten unleserlich wird. Dies mag hier vielleichtn noch einstellbar sein,... sollte aber jemand in einem anderen Skin arbeiten, so kann es passieren, dass dieser jemand den Text nicht mehr lesen kann, oder es einfach ***** aussieht.<br>
 +
Daher: Ändert die Hintergrundfarbe mit '''bgcolor''' nur im äußersten Notfall und am Besten in Absprache mit der Wiki-Leitung.<br>
'''Hinweis''': Die Hintergrundfarbe der Tabelle ist standardmäßig nicht definiert - also transparent. Hierdurch ist z.B. eine Zeile der Tabelle, ohne explizite Farbangabe, immer mit der Hintergrundfarbe der Seite gefüllt.
'''Hinweis''': Die Hintergrundfarbe der Tabelle ist standardmäßig nicht definiert - also transparent. Hierdurch ist z.B. eine Zeile der Tabelle, ohne explizite Farbangabe, immer mit der Hintergrundfarbe der Seite gefüllt.
-
 
+
<br>
-
 
+
<br>
Um mehrere '''Zellen zu verbinden''' gibt es das Attribut '''colspan''', welchem ein Wert kleiner oder gleich der Anzahl Spalten in der  
Um mehrere '''Zellen zu verbinden''' gibt es das Attribut '''colspan''', welchem ein Wert kleiner oder gleich der Anzahl Spalten in der  
-
Tabelle zugewiesen werden muß. Beispiel: '''<nowiki> | colspan="5" | Inhalt</nowiki>''' ''würde in einer Tabelle, mit genau 5 oder mehr Spalten, 5 Zellen zu einer einzigen verbinden.''  
+
Tabelle zugewiesen werden muß. Beispiel: '''<nowiki> | colspan="5" | Inhalt</nowiki>''' ''würde in einer Tabelle, mit genau 5 oder mehr Spalten, 5 Zellen zu einer einzigen horizontalen Zelle verbinden.'' Mit dem Attribut '''<nowiki>| rowspan="5" | Inhalt</nowiki>''' lassen sich Zellen in der vertikalen Ausrichtung verknüpfen.
-
 
+
{|
-
 
+
| class="nc" | <br>
 +
! colspan="5" | <nowiki>! colspan="5" </nowiki> verbindet die 5 horizontalen Zellen miteinander zu einer ganzen.
 +
|-
 +
| rowspan="5" | <nowiki>| rowspan="5" </nowiki>verbindet die 5 vertikalen Zellen zu Einer.
 +
| class="c" | 1
 +
| class="c" | 2
 +
| class="c" | 3
 +
| class="c" | 4
 +
| class="c" | 5
 +
|-
 +
| class="c" | 2
 +
| class="nc" | <br>
 +
| class="nc" | <br>
 +
| class="nc" | <br>
 +
| class="nc" | <br>
 +
|-
 +
| class="c" | 3
 +
| class="nc" | <br>
 +
| class="nc" | <br>
 +
| class="nc" | <br>
 +
| class="nc" | <br>
 +
|-
 +
| class="c" | 4
 +
| class="nc" | <br>
 +
| class="nc" | <br>
 +
| class="nc" | <br>
 +
| class="nc" | <br>
 +
|-
 +
| class="c" | 5
 +
| class="nc" | <br>
 +
| class="nc" | <br>
 +
| class="nc" | <br>
 +
| class="nc" | <br>
 +
|}
 +
''rowspan''''' und '''''colspan'' lassen sich '''sowohl''' für Tabellenköpfe '''als auch''' für normale Tabellenzeilen/-zellen nutzen.
 +
<br>
Die hier gezeigten Attribute könnten größtenteils kombiniert werden, wie aus dem [[Hilfe:Tabellen#Beispiel|Beispiel]] weiter unten ersichtlich ist.
Die hier gezeigten Attribute könnten größtenteils kombiniert werden, wie aus dem [[Hilfe:Tabellen#Beispiel|Beispiel]] weiter unten ersichtlich ist.
-
 
+
<br>
Der Text in den Tabellenfeldern kann [[Hilfe:Textgestaltung|formatiert]] werden und [[Hilfe:Links|Links]] enthalten, wie normaler Text auch.
Der Text in den Tabellenfeldern kann [[Hilfe:Textgestaltung|formatiert]] werden und [[Hilfe:Links|Links]] enthalten, wie normaler Text auch.
Zeile 72: Zeile 151:
====Quelltext====
====Quelltext====
-
<pre><nowiki>{| border="1"
+
<pre><nowiki>{|
-
! align="center" bgcolor="#000030" colspan="4" | Tabellentitel
+
! colspan="4" | Tabellentitel
|-
|-
-
! align="center" bgcolor="#000030" | Header 1
+
! Header 1
-
! align="center" bgcolor="#000030" | Header 2
+
! Header 2
-
! align="center" bgcolor="#000030" | Header 3
+
! Header 3
-
! align="center" bgcolor="#000030" | Header 4
+
! Header 4
|-
|-
-
| align="left" | 1. Zeile 1. Spalte
+
| 1. Zeile 1. Spalte
-
| align="left" | 1. Zeile 2. Spalte
+
| 1. Zeile 2. Spalte
-
| align="left" | 1. Zeile 3. Spalte
+
| 1. Zeile 3. Spalte
-
| align="left" | 1. Zeile 4. Spalte
+
| 1. Zeile 4. Spalte
|-
|-
-
| align="left" colspan="4" | Dieser Text erstreckt sich über 4 Spalten.
+
| class="c" colspan="4" | Dieser Text erstreckt sich über 4 Spalten.
|-
|-
-
| align="left" colspan="4" | Die nächste Tabellenzeile ist leer
+
| class="br" colspan="4" | Die nächste Tabellenzeile ist leer
-
|-
+
-
| align="left" | <br>
+
-
| align="left" |
+
-
| align="left" |
+
-
| align="left" |
+
|-
|-
 +
| <br>
 +
|
 +
|
 +
|
|}
|}
</nowiki></pre>
</nowiki></pre>
Zeile 99: Zeile 177:
====Ergebnis====
====Ergebnis====
-
{| border="1"
+
{|
-
! align="center" bgcolor="#000030" colspan="4" | Tabellentitel
+
! colspan="4" | Tabellentitel
-
|-
+
-
! align="center" bgcolor="#000030" | Header 1
+
-
! align="center" bgcolor="#000030" | Header 2
+
-
! align="center" bgcolor="#000030" | Header 3
+
-
! align="center" bgcolor="#000030" | Header 4
+
|-
|-
-
| align="left" | 1. Zeile 1. Spalte
+
! Header 1
-
| align="left" | 1. Zeile 2. Spalte
+
! Header 2
-
| align="left" | 1. Zeile 3. Spalte
+
! Header 3
-
| align="left" | 1. Zeile 4. Spalte
+
! Header 4
|-
|-
-
| align="left" colspan="4" | Dieser Text erstreckt sich über 4 Zeilen.
+
| 1. Zeile 1. Spalte
 +
| 1. Zeile 2. Spalte
 +
| 1. Zeile 3. Spalte
 +
| 1. Zeile 4. Spalte
|-
|-
-
| align="left" colspan="4" | Die nächste Tabellenzeile ist leer
+
| class="c" colspan="4" | Dieser Text erstreckt sich über 4 Spalten.
|-
|-
-
| align="left" | <br>
+
| class="br" colspan="4" | Die nächste Tabellenzeile ist leer
-
| align="left" |
+
-
| align="left" |
+
-
| align="left" |
+
|-
|-
 +
| <br>
 +
|
 +
|
 +
|
|}
|}
[[Kategorie:Wiki-Hilfe|Tabellen]]
[[Kategorie:Wiki-Hilfe|Tabellen]]

Aktuelle Version vom 15. März 2006, 13:08 Uhr

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

Navigieren

Seiten bearbeiten

Wiki-Syntax

Wiki-Verwaltung

Inhaltsverzeichnis

Tabellen

Tabellen können definiert werden, um Textinhalte und Bilder in tabellarischer Form darzustellen.


Syntaxreferenz

Beschreibung Syntax in der Wiki Vergleich: Syntax in HTML
Öffnender Tag für Tabelle {| Attribute <table Attribute>
Tabellenkopf ! Text <tr><th> Text </th>
Tabellenzeile (Inhalt) | Attribute | Text <tr><td Attribute>Text</td>
Schließender Tag Kopf/Zeile |- </tr>
Schließender Tag für Tabelle |} </table>



Die am Häufigsten verwendeten Attribute

Ein Tabellenkopf hat immer folgende Attribute integriert:
! Text
richtet den Text automatisch zentriert in der Zelle aus, verpasst dem Hintergrund das typische dunkelblau und schreibt den Text fett.
Im Klartext sieht das Ergebnis dann so aus:

    Text    



Um den Inhalt einer Tabellenzelle horizontal auszurichten, verwendet man das Attribut class in dem Attributbereich des Tags für die Tabellenzeile. class hat keine Auswirkungen auf Tabellenköpfe. (! Text // <tr><th> Text </th>
Die Werte: l (left), c (center) und r (right) sind erlaubt. Beispiel: | class="c" | Inhalt Zentriert den Inhalt in der Tabellenzeile
Standartmäßig wird der text immer linksbündig ausgerichtet.

Die Hintergrundfarbe einer Tabellenzelle wird ebenso mit dem Attribut class geändert. Auch dieses funktioniert ausschliesslich in normalen Tabellenzellen - nicht in Tabellenköpfen.
Es gibt insgesamt 3 vordefinierte Hintergrundfarben. Der Tag für die Hintergrundfarbe wird immer mit der Ausrichtung des Textes kombiniert.

Im folgenden sind einige Beispiele angeführt, um das gesamte System ein wenig zu verdeutlichen.


Ausrichtung: left (l) Ausrichtung: center (c) Ausrichtung: right (r)
ohne Rahmen class="nl" class="nc" class="nr"
ohne Hintergrundfarbe class="l" class="c" class="r"
mit Hintergrundfarbe class="bl" class="bc" class="br"
mit STNE-Hintergrundfarbe class="bbl" class="bbc" class="bbr"


In seltenen Einzelfällen kann es vorkommen, dass man eine andere Hintergrundfarbe, als die vordefinierten benötigt. In diesem Falle wird das Attribut bgcolor benötigt. Beispiel: ! bgcolor="#cabbec" | Inhalt Ändert die Hintergrundfarbe des Feldes in diesem Falle in ein helles Lila, hier in hexadezimaler Notation #cabbec.

Text

Wie man an diesem Beispiel sehen kann, ist es sinnvoll, im Falle des änder der Hintergrundfarbe, auch die entsprechende Schriftfarbe zu ändern, da es ansonsten unleserlich wird. Dies mag hier vielleichtn noch einstellbar sein,... sollte aber jemand in einem anderen Skin arbeiten, so kann es passieren, dass dieser jemand den Text nicht mehr lesen kann, oder es einfach ***** aussieht.
Daher: Ändert die Hintergrundfarbe mit bgcolor nur im äußersten Notfall und am Besten in Absprache mit der Wiki-Leitung.
Hinweis: Die Hintergrundfarbe der Tabelle ist standardmäßig nicht definiert - also transparent. Hierdurch ist z.B. eine Zeile der Tabelle, ohne explizite Farbangabe, immer mit der Hintergrundfarbe der Seite gefüllt.

Um mehrere Zellen zu verbinden gibt es das Attribut colspan, welchem ein Wert kleiner oder gleich der Anzahl Spalten in der Tabelle zugewiesen werden muß. Beispiel: | colspan="5" | Inhalt würde in einer Tabelle, mit genau 5 oder mehr Spalten, 5 Zellen zu einer einzigen horizontalen Zelle verbinden. Mit dem Attribut | rowspan="5" | Inhalt lassen sich Zellen in der vertikalen Ausrichtung verknüpfen.


! colspan="5" verbindet die 5 horizontalen Zellen miteinander zu einer ganzen.
| rowspan="5" verbindet die 5 vertikalen Zellen zu Einer. 1 2 3 4 5
2



3



4



5



rowspan und colspan lassen sich sowohl für Tabellenköpfe als auch für normale Tabellenzeilen/-zellen nutzen.
Die hier gezeigten Attribute könnten größtenteils kombiniert werden, wie aus dem Beispiel weiter unten ersichtlich ist.
Der Text in den Tabellenfeldern kann formatiert werden und Links enthalten, wie normaler Text auch.


Beispiel

Quelltext

{|
! colspan="4" | Tabellentitel
|-
! Header 1
! Header 2
! Header 3
! Header 4
|-
| 1. Zeile 1. Spalte
| 1. Zeile 2. Spalte
| 1. Zeile 3. Spalte
| 1. Zeile 4. Spalte
|-
| class="c" colspan="4" | Dieser Text erstreckt sich über 4 Spalten.
|-
| class="br" colspan="4" | Die nächste Tabellenzeile ist leer
|-
| <br>
| 
| 
| 
|}

Ergebnis

Tabellentitel
Header 1 Header 2 Header 3 Header 4
1. Zeile 1. Spalte 1. Zeile 2. Spalte 1. Zeile 3. Spalte 1. Zeile 4. Spalte
Dieser Text erstreckt sich über 4 Spalten.
Die nächste Tabellenzeile ist leer

Persönliche Werkzeuge