[BBCode] Tabellen

[Foren Mitglied]

[td=1,]Dies ist die linke Zelle[/td][td=1,]Dies ist die rechte Zelle[/td][td=1,]Dies ist eine weitere Zeile[/td][td=1,]Dies ist die zweite Zelle[/td][td=1,]Und noch eine Zeile ( die 3. )[/td][td=1,]Dies ist die rechte Zelle[/td]

Dies ist der Tabellen Header

BBCodes -->

Code: Alles auswählen

[corners=forabg][table=tablebg table1][thead][tr=][th=2]Dies ist der Tabellen Header[/th][/tr][/thead][tbody][tr=bg3][td=1,]Dies ist die linke Zelle[/td][td=1,]Dies ist die rechte Zelle[/td][/tr][tr=bg2][td=1,]Dies ist eine weitere Zeile[/td][td=1,]Dies ist die zweite Zelle[/td][/tr][tr=bg3][td=1,]Und noch eine Zeile ( die 3. )[/td][td=1,]Dies ist die rechte Zelle[/td][/tr][/tbody][/table][/corners]

Noch ein Beispiel aus dem täglichen Leben

-->

Code: Alles auswählen

[corners=forabg][table=tablebg table1][thead][tr=][th=3]Formel 1 WebTipp Ergebnis für die Saison 2007[/th][/tr][tr=][th=1]Platz[/th][th=1]Name[/th][th=1]Punkte[/th][/tr][/thead][tbody][tr=bg3][td=1,]1.[/td][td=1,]Sn@ke[/td][td=1,]189[/td][/tr][tr=bg2][td=1,]2.[/td][td=1,]Butti[/td][td=1,]186[/td][/tr][tr=bg3][td=1,]3.[/td][td=1,]Jürgen F1[/td][td=1,]184[/td][/tr][tr=bg2][td=1,]4.[/td][td=1,][LPI]Tr@iner[/td][td=1,]183[/td][/tr][/tbody][/table][/corners]

[td=1,]1.[/td][td=1,]Sn@ke[/td][td=1,]189[/td][td=1,]2.[/td][td=1,]Butti[/td][td=1,]186[/td][td=1,]3.[/td][td=1,]Jürgen F1[/td][td=1,]184[/td][td=1,]4.[/td][td=1,][LPI]Tr@iner[/td][td=1,]183[/td]

Formel 1 WebTipp Ergebnis für die Saison 2007
Platz	Name	Punkte

[Foren Mitglied]

Original und Support nur dort --> http://startrekguide.com/community/view ... f=82&t=309


Anleitung für einfache Tabellen:

Als erstes benötigen wir eine Umrandung der Tabelle, damit es gut zum Style prosilver passt.

BBCode:

Code: Alles auswählen

[corners={TEXT1}]{TEXT2}[/corners]

HTML Ersetzung:

Code: Alles auswählen

<div class="{TEXT1}">
    <div class="inner">
        <span class="corners-top"><span></span></span>
        {TEXT2}
        <span class="corners-bottom"><span></span></span>
    </div>
</div>        

Nun brauchen wir einen BBCode um die Tabelle zu erstellen.
prosilver nutzt normalerweise "table1", und subsilver2 benutzt "tablebg". Daher verwenden wir nun einen BBCode wo man später den Style auswählen kann:

BBCode:

Code: Alles auswählen

[table={TEXT1}]{TEXT2}[/table]

HTML Ersetzung:

Code: Alles auswählen

<table class="{TEXT1}" cellspacing="1" width="100%">
{TEXT2}
</table>        

Nun folgen die Zeilen...
BBCode:

Code: Alles auswählen

[tr={TEXT1}]{TEXT2}[/tr]

HTML Ersetzung:

Code: Alles auswählen

<tr class="{TEXT1}">
{TEXT2}
</tr>        

...und Spalten...
Hinweis: "NUMBER" muss angegeben werden. TEXT1 ( class ) ist optional, das Komma und die folgende NUMBER ist Pflicht !!!
BBCode:

Code: Alles auswählen

[td={NUMBER},{TEXT1}]{TEXT2}[/td]

HTML Ersetzung:

Code: Alles auswählen

<td class="{TEXT1}" colspan="{NUMBER}">{TEXT2}</td>        

Header...
Hinweis: "NUMBER" ist eine Pflichtangabe!!!
BBCode:

Code: Alles auswählen

[th={NUMBER}]{TEXT}[/th]

HTML Ersetzung:

Code: Alles auswählen

<th colspan="{NUMBER}">{TEXT}</th>        

Wenn man das alles zusammen benutzt, erscheint folgende Tabelle:
Hinweis: Es ist wichtig, das der komplette BBCode in einer Zeile angegeben wird. Ansonsten erhält man häßliche Zeilenumbrücher vor der Tabelle!

Code: Alles auswählen

[corners=forumbg forumbg-table][table=tablebg table1][tr=][th=2]This is a header[/th][/tr][tr=bg1][td=1,]This is the left cell[/td][td=1,]This is the right cell[/td][/tr][tr=bg2][td=1,]This is another row[/td][td=1,]This is the second cell[/td][/tr][/table][/corners]

[td=1,]This is the left cell[/td][td=1,]This is the right cell[/td][td=1,]This is another row[/td][td=1,]This is the second cell[/td]

This is a header

Tja, das war wohl nichts
Der Header Bereich sieht ein wenig "blass" aus.

Also brauchen wir ein wenig mehr:

Wir müssen also noch einen <thead> und einen <tbody> Tag unterbringen...let's go:

Thead:
BBCode:

Code: Alles auswählen

[thead]{TEXT}[/thead]

HTML Ersetzung

Code: Alles auswählen

<thead>{TEXT}</thead>       

Tbody:
BBCode:

Code: Alles auswählen

[tbody]{TEXT}[/tbody]

HTML Ersetzung:

Code: Alles auswählen

<tbody>{TEXT}</tbody>       

Nun sieht folgender BBCode so aus:

Code: Alles auswählen

[corners=forumbg forumbg-table][table=tablebg table1][thead][tr=][th=2]This is a header[/th][/tr][/thead][tbody][tr=bg1][td=1,]This is the left cell[/td][td=1,]This is the right cell[/td][/tr][tr=bg2][td=1,]This is another row[/td][td=1,]This is the second cell[/td][/tr][/tbody][/table][/corners]

[td=1,]This is the left cell[/td][td=1,]This is the right cell[/td][td=1,]This is another row[/td][td=1,]This is the second cell[/td]

This is a header

Viel besser, oder ?