Tutorial: Tabellen

  • Tabellen sind ja ein feines Ding, aber ganz so einfach ists nicht sie auch zu erstellen.


    Das Grundgerüst besteht aus den folgenden BBCode-Elementen


    Code
    [table] = Beginn der Tabelle
    [/table] = Ende der Tabelle
    [*] = Anfang jeder Tabellenzelle


    Die einfachste Tabelle sieht also so aus:


    Diese Tabelle als Code:

    Code
    [table][*]Beispiel[/table]


    ____________________________________________________________________________________


    Will man nur eine einfache "Auflistung" also nur 1 Spalte, kann man auch einfach weitermachen:


    Diese Tabelle als Code:

    Code
    [table][*]Kopfzelle[*]Normale Zelle[/table]


    oder:

    Code
    [table][*]Kopfzelle
    [*]Normale Zelle[/table]


    ____________________________________________________________________________________


    Da aber meist mehrere Spalten gefragt sind wirds schon umfangreicher, denn wenn man dem Forum nicht sagt wieviele Spalten man haben möchte, macht es nur eine.


    Wir machen mal eine 3-Spalten-Tabelle, die man z.B. für Ergebnisübersichten benutzen kann:
    Dafür muss in den table-Code die Spaltenzahl mit "=" und der Spaltenzahl zugefügt werden:

    Code
    [table=2] für 2 Spalten
    [table=3] für 3 Spalten usw.


    [table=3][*]Heimmannschaft[*]Ergebnis[*]Auswärtsmannschaft
    [*]Musterstadt[*]3:1[*]Beispielhausen[/table]
    Diese Tabelle als Code:

    Code
    [table=3][*]Heimmannschaft[*]Ergebnis[*]Auswärtsmannschaft
    [*]Musterstadt[*]3:1[*]Beispielhausen[/table]


    könnte man auch so schreiben:

    Code
    [table=3][*]Heimmannschaft[*]Ergebnis[*]Auswärtsmannschaft[*]Musterstadt[*]3:1[*]Beispielhausen[/table]


    Code
    [table=3][*]Heimmannschaft
    [*]Ergebnis
    [*]Auswärtsmannschaft
    [*]Musterstadt
    [*]3:1
    [*]Beispielhausen[/table]


    aber aus Übersichtsgründen behalte ich in weiteren Teilen die Schreibweise meines oberen Typs bei.



    Coming soon:
    Teil II: Formatierungen und kleine Kniffe mit großem Effekt.

  • Teil II:



    [table=3][*]Heimmannschaft[*]Ergebnis[*]Auswärtsmannschaft
    [*]Musterstadt[*]3:1[*]Beispielhausen[/table]


    Nehmen wir wieder unsere alte Tabelle. Die Tabelle ist ja so wie sie zurzeit ist echt keine Schönheit und im FM-Gate-Stil lässt sich zudem die Kopfzeile schlecht lesen.
    Machen wir die Schrift in der Kopfzeile in einem dunkleren Grün (HEX-Farbcode 009900). Hier muss man leider jede einzelne Zelle einfärben, dies lässt sich leider nicht eleganter lösen.


    [table=3][*]Heimmannschaft[*]Ergebnis[*]Auswärtsmannschaft
    [*]Musterstadt[*]3:1[*]Beispielhausen[/table]


    Code
    [table=3][*][color=#009900]Heimmannschaft[/color][*][color=#009900]Ergebnis[/color][*][color=#009900]Auswärtsmannschaft[/color]
    [*]Musterstadt[*]3:1[*]Beispielhausen[/table]


    Da kann natürlich jetzt mit dem Farbtopf gespielt werden, wie man will.


    ____________________________________________________________________________________


    So funktionieren auch sämtliche andere Formatierungen wie Schriftgröße, Kursiv etc.



    [table=3][*]Heimmannschaft[*]Ergebnis[*]Auswärtsmannschaft
    [*]Musterstadt[*]3:1[*]Beispielhausen[/table]


    Code
    [table=3][*][color=#009900][size=12]Heimmannschaft[/size][/color][*][color=#009900][size=12]Ergebnis[/size][/color][*][color=#009900][size=12]Auswärtsmannschaft[/size][/color]
    [*]Musterstadt[*][i]3:1[/i][*]Beispielhausen[/table]



    Hier kommen wir nun zu einem der ersten Kniffe:
    Die Forensoftware zentriert automatisch die Kopfzeile und jede einzelne Zelle wird linksbündig ausgerichtet.
    Angenommen ihr wollt alles zentriert haben in der Tabelle, dann könnt ihr auch einfach die komplette Tabelle zentrieren.


    [table=3][*]Heimmannschaft[*]Ergebnis[*]Auswärtsmannschaft
    [*]Musterstadt[*]3:1[*]Beispielhausen[/table]


    Code
    [align=center][table=3][*][color=#009900][size=12]Heimmannschaft[/size][/color][*][color=#009900][size=12]Ergebnis[/size][/color][*][color=#009900][size=12]Auswärtsmannschaft[/size][/color]
    [*]Musterstadt[*][i]3:1[/i][*]Beispielhausen[/table][/align]



    Solltet ihr nun aber z.B. in dieser Tabelle in der Tabelle aufgeführten "Heimmannschaften" rechtsbündig haben wollen, so müsst ihr hier auch wieder die einzelnen Zellen ausrichten. In meinem Beispiel formatiere ich nun die Heimmannschaften rechts- und die Auswärtsmannschaften linksbündig.



    [table=3][*]Heimmannschaft[*]Ergebnis[*]Auswärtsmannschaft
    [*]

    Musterstadt

    [*]3:1[*]

    Beispielhausen

    [/table]


    Code
    [align=center][table=3][*][color=#009900][size=12]Heimmannschaft[/size][/color][*][color=#009900][size=12]Ergebnis[/size][/color][*][color=#009900][size=12]Auswärtsmannschaft[/size][/color]
    [*][align=right]Musterstadt[/align][*][i]3:1[/i][*][align=left]Beispielhausen[/align][/table][/align]


    ____________________________________________________________________________________


    Angenommen zur Ergebnisübersicht soll nun eine Übersicht der Torschützen hinzu, dann passt ja der Spaltentitel "Ergebnis" nicht mehr.
    Eine "Leerzelle" kann man aber nicht einfach einfügen. Da könnt ihr dann einfach einen BBCode eurer Wahl nehmen, in diesen aber nichts hineinschreiben. In meinem Fall habe ich nun den Befehl für "Fettdruck" benutzt, da dies ein kurzer Befehl ist.


    [table=3][*]Heimmannschaft[*][*]Auswärtsmannschaft
    [*]

    Musterstadt

    [*]3:1[*]

    Beispielhausen


    [*]

    Fritz, Müller, Schulz

    [*]Schützen[*]

    Becker

    [/table]


    Code
    [align=center][table=3][*][color=#009900][size=12]Heimmannschaft[/size][/color][*][b][/b][*][color=#009900][size=12]Auswärtsmannschaft[/size][/color]
    [*][align=right]Musterstadt[/align][*][i]3:1[/i][*][align=left]Beispielhausen[/align]
    [*][align=right]Fritz, Müller, Schulz[/align][*][i]Schützen[/i][*][align=left]Becker[/align][/table][/align]


    ____________________________________________________________________________________


    Solltet ihr nun eine Auflistung der Schützen untereinander haben wollen, so ist dies auch kein größeres Problem. Einfach für jede neue Zeile "Enter" drücken.


    [table=3][*]Heimmannschaft[*][*]Auswärtsmannschaft
    [*]

    Musterstadt

    [*]3:1[*]

    Beispielhausen


    [*]

    Fritz
    Müller
    Schulz

    [*]Schützen[*]

    Becker

    [/table]


    Code
    [align=center][table=3][*][color=#009900][size=12]Heimmannschaft[/size][/color][*][b][/b][*][color=#009900][size=12]Auswärtsmannschaft[/size][/color]
    [*][align=right]Musterstadt[/align][*][i]3:1[/i][*][align=left]Beispielhausen[/align]
    [*][align=right]Fritz
    Müller
    Schulz[/align][*][i]Schützen[/i][*][align=left]Becker[/align][/table][/align]


    ____________________________________________________________________________________


    Solltet ihr in ein Tabellenfeld einfach nur eine 0 benötigen, so reicht es nicht wenn ihr einfach 0 hinschreibt. Die Software ignoriert dann diese Zelle.
    So könnt ihr auch hier diesen Trick von gerade nutzen (Beispielsweise "Fettdruck"), wobei ihr dann darauf achten müsst, das ihr die 0 links oder rechts neben den Befehl schreibt.


    [table=4][*]Platz[*]Mannschaft[*]Spiele[*]Punkte
    [*]1[*]Musterstadt[*]1[*]3
    [*]2[*]Fülldorf[*]1[*]3
    [*]3[*]Platzhalterkirchen[*]1[*]0
    [*]4[*]Beispielhausen[*]1[*]0[/table]


    Code
    [align=center][table=4][*][color=#009900][size=12]Platz[/size][/color][*][color=#009900][size=12]Mannschaft[/size][/color][*][color=#009900][size=12]Spiele[/size][/color][*][color=#009900][size=12]Punkte[/size][/color]
    [*]1[*]Musterstadt[*]1[*]3
    [*]2[*]Fülldorf[*]1[*]3
    [*]3[*]Platzhalterkirchen[*]1[*][b][/b]0
    [*]4[*]Beispielhausen[*]1[*][b][/b]0[/table][/align]



    Ich hoffe ich kann mit diesem kleinen Tutorial ein wenig Licht ins Tabellendunkel bringen.

  • Was Faenwulf hier bei seinem tollen Tutorial nicht ausführlich erwähnt hat, über das ich aber gerade wieder gestolpert bin:



    Das hier führt zu diesem Ergebnis


    [table=5]
    [*]Test1
    [*]Test2
    [*]Test3
    [*]Test4
    [*]Test5
    [*]Test01
    [*]Test02
    [*]Test03
    [*]Test04
    [*]Test05
    [/table]


    Also verzogen, macht man es aber so:



    wird daraus dies:


    [table=5][*]Test1
    [*]Test2
    [*]Test3
    [*]Test4
    [*]Test5
    [*]Test01
    [*]Test02
    [*]Test03
    [*]Test04
    [*]Test05
    [/table]


    Das Geheimnis liegt schlicht darin das man hinter

    Code
    [table=5]

    keinen Zeilenumbruch machen darf, es benötigt noch dieses Erste Sternchen. Ganz fiese Sache die einen zur Verzweifelung treiben kann.

    "Lohnt es sich denn?" fragt der Kopf.
    "Nein, aber es tut so gut!" antwortet das Herz.


    Autor: unbekannt

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!