Hilfe:Tabellen

Aus STNE-Wiki

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
Zeile 5: Zeile 5:
==Tabellen==
==Tabellen==
-
Tabellen können definiert werden, um Textinhalte und Bilder in tabellarischer Form darzustellen.  
+
Tabellen können definiert werden, um Textinhalte und Bilder in tabellarischer Form darzustellen.
Zeile 16: Zeile 16:
|-
|-
| align="left" | Öffnender Tag für Tabelle
| align="left" | Öffnender Tag für Tabelle
-
| align="center" | <nowiki> {| </nowiki>
+
| align="center" | <nowiki>{|</nowiki> ''attribute''
-
| align="center" | <nowiki> <table> </nowiki>
+
| align="center" | <nowiki> <table</nowiki> ''attribute''<nowiki>></nowiki>
 +
|-
 +
| align="left" | Tabellenkopf
 +
| align="center" | <nowiki> ! </nowiki>''attribute''<nowiki> | Text</nowiki>
 +
| align="center" | <nowiki> <tr><th </nowiki>''attribute''<nowiki>>Text</th></nowiki>
 +
|-
 +
| align="left" | Tabellenzeile (Inhalt)
 +
| align="center" | <nowiki> |</nowiki> ''attribute''<nowiki> | Text</nowiki>
 +
| align="center" | <nowiki> <tr><td</nowiki> ''attribute''<nowiki>>Text</td></nowiki>
 +
|-
 +
| align="left" | Schließender Tag Kopf/Zeile
 +
| align="center" | <nowiki> |-</nowiki>
 +
| align="center" | <nowiki> </tr></nowiki>
 +
|-
 +
| align="left" | Schließender Tag für Tabelle
 +
| align="center" | <nowiki> |}</nowiki>
 +
| align="center" | <nowiki> </table></nowiki>
|-
|-
|}
|}
 +
<br><br>
 +
'''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
 +
größer als 0 zuweisen. Beispiel: '''<nowiki>{| border="1"</nowiki>''' ''Druckt einen sichtbaren Rand um die Tabelle und jedes Feld.''
 +
<br><br>
 +
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.
 +
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.
 +
Beispiel: '''<nowiki> ! bgcolor="#000030" | Inhalt</nowiki>''' ''Ändert die Hintergrundfarbe des Feldes in ein dunkles Blau, hier in hexadezimaler Notation #000030''. <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.
 +
<br><br>
 +
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 Spalten, 5 Zellen zu einer einzigen verbinden.''
 +
<br><br>
 +
===Beispiel===
 +
====Quelltext====
 +
<pre><nowiki>{| border="1"
 +
! align="center" bgcolor="#000030" 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
 +
| align="left" | 1. Zeile 2. Spalte
 +
| align="left" | 1. Zeile 3. Spalte
 +
| align="left" | 1. Zeile 4. Spalte
 +
|-
 +
| align="left" colspan="4" | Dieser Text erstreckt sich über 4 Spalten.
 +
|-
 +
| align="left" colspan="4" | Die nächste Tabellenzeile ist leer
 +
|-
 +
| align="left" | <br>
 +
| align="left" |
 +
| align="left" |
 +
| align="left" |
 +
|-
 +
|}
 +
</nowiki></pre>
 +
 +
====Ergebnis====
{| border="1"
{| border="1"
-
! align="center" bgcolor="#000030" colspan="6" | Tabellentitel
+
! align="center" bgcolor="#000030" 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
 +
| align="left" | 1. Zeile 2. Spalte
 +
| align="left" | 1. Zeile 3. Spalte
 +
| align="left" | 1. Zeile 4. Spalte
|-
|-
-
! align="center" bgcolor="#000030" rowspan="1" | Header 1
+
| align="left" colspan="4" | Dieser Text erstreckt sich über 4 Zeilen.
-
! align="center" bgcolor="#000030" rowspan="1" | Header 2
+
-
! align="center" bgcolor="#000030" rowspan="1" | Header 3
+
-
! align="center" bgcolor="#000030" rowspan="1" | Header 4
+
|-
|-
 +
| align="left" colspan="4" | Die nächste Tabellenzeile ist leer
|-
|-
 +
| align="left" | <br>
 +
| align="left" |
 +
| align="left" |
 +
| align="left" |
|-
|-
|}
|}

Version vom 2. März 2006, 19:17 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 ! attribute | Text <tr><th attribute>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

Für einen sichtbaren Rand um die Tabelle musst du nach dem Tag {| das Attribut border notieren und ihm einen Wert größer als 0 zuweisen. Beispiel: {| border="1" Druckt einen sichtbaren Rand um die Tabelle und jedes Feld.

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. Beispiel: ! align="center" | Inhalt Zentriert den Inhalt in der Tabellenzeile

Die Hintergrundfarbe eines Tabellenfeldes oder einer Tabellenzeile kann mit dem Attribut bgcolor geändert werden. Beispiel: ! bgcolor="#000030" | Inhalt Ändert die Hintergrundfarbe des Feldes in ein dunkles Blau, hier in hexadezimaler Notation #000030.
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 Spalten, 5 Zellen zu einer einzigen verbinden.

Beispiel

Quelltext

{| border="1"
! align="center" bgcolor="#000030" 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
| align="left" | 1. Zeile 2. Spalte
| align="left" | 1. Zeile 3. Spalte
| align="left" | 1. Zeile 4. Spalte
|-
| align="left" colspan="4" | Dieser Text erstreckt sich über 4 Spalten.
|-
| align="left" colspan="4" | Die nächste Tabellenzeile ist leer
|-
| align="left" | <br>
| align="left" |
| align="left" |
| align="left" |
|-
|}

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 Zeilen.
Die nächste Tabellenzeile ist leer

Persönliche Werkzeuge