|
Xelas
Administrator
  80
EU-Frostwolf
Angemeldet seit:
20.04.2009
Beiträge: 2696
|
Da man Tabellen nicht einfach durch einen einzigen BBCode erstellen kann wird dies nachfolgend genauer erläutert.
Grundlagen für Tabellen
Das Grundelement einer Tabelle bildet der table-Tag:
Code:[table]
[/table]
Jede Tabelle wird in einzelne Zeilen eingeteilt, dies geschieht mit dem tr-Tag (tr=table row, Tabellenzeile). Für zwei Zeilen sähe dies wie folgt aus:
Code:[table]
[tr] [/tr]
[tr] [/tr]
[/table]
Nun kann jede Zeile mit einzelnen Zellen gefüllt werden. Dies geschieht mit dem td-Tag (td=table data, Tabellen Daten/Inhalt). Die einzelnen Zellen nebeneinander in einer Zeile bilden die Spalten der Tabelle:
Code:[table]
[tr][td]Zeile 1, Spalte 1[/td][td]Zeile 1, Spalte 2[/td][/tr]
[tr][td]Zeile 2, Spalte 1[/td][td]Zeile 2, Spalte 2[/td][/tr]
[/table]
Nun wäre die Tabelle fertig, hier das Ergebnis:
| Zeile 1, Spalte 1 | Zeile 1, Spalte 2 | | Zeile 2, Spalte 1 | Zeile 2, Spalte 2 |
Wie zu sehen ist werden die einzelnen Zeilen automatisch abwechselnd eingefärbt.
Eine Zelle (td-Tag) kann durchaus auch mehrzeiligen Inhalt haben, solange die Struktur der einzelnen Tabellen-BBCodes eingehalten wird ist es egal, ob sie in einer oder verschiedenen Zeilen stehen. Zur besseren Übersicht könnte man den Code bspw. auch so schreiben:
Code:[table]
[tr]
[td]Zeile 1, Spalte 1[/td]
[td]Zeile 1, Spalte 2[/td]
[/tr]
[tr]
[td]Zeile 2, Spalte 1[/td]
[td]Zeile 2, Spalte 2[/td]
[/tr]
[/table]
Dies bleibt jedem selbst überlassen.
Hervorgehobene Kopfzeilen
Anstelle vom tr-Tag für eine normale Tabellenzeile, kann auch der th-Tag (th=table header, Tabellenkopf/Kopfzeile) genutzt werden. Dieser steht für eine hervorgehobene Kopfzeile:
Code:[table]
[th][td]Überschrift[/td][td]Überschrift 2[/td][/th]
[tr][td]Zeile 1, Spalte 1[/td][td]Zeile 1, Spalte 2[/td][/tr]
[tr][td]Zeile 2, Spalte 1[/td][td]Zeile 2, Spalte 2[/td][/tr]
[/table]
Und hier wieder das Ergebnis:
| Zeile 1, Spalte 1 | Zeile 1, Spalte 2 | | Zeile 2, Spalte 1 | Zeile 2, Spalte 2 |
Der th-Tag kann auch mehrmals in einer Tabelle vorkommen, etwa um Abschnitte zu unterteilen.
Tabelle mittig ausrichten
Eine Tabelle kann nicht mit dem normalen center-BBCode mittig positioniert werden, dafür ist ein leicht abgeänderter table-Starttag notwendig:
Code:[table=center]
...
[/table]
Im Starttag wird also der Parameter center mit angegeben und hier das Ergebnis:
| Zeile 1, Spalte 1 | Zeile 1, Spalte 2 | | Zeile 2, Spalte 1 | Zeile 2, Spalte 2 |
Tabellenbreite strecken
Zum Strecken der Tabelle auf die volle Breite wird (ähnlich dem Zentrieren) ein anderer Parameter namens wide benötigt. Dieser wird auch wieder direkt im table-Starttag mit angegeben:
Code:[table=wide]
...
[/table]
Und das Ergebnis:
| Zeile 1, Spalte 1 | Zeile 1, Spalte 2 | | Zeile 2, Spalte 1 | Zeile 2, Spalte 2 |
Wie zu sehen ist wird die Breite der einzelnen Spalten dabei automatisch aufgeteilt. Hin und wieder kann es vorkommen, dass eine bestimmte Spalte die volle Breite bekommen soll und die anderen dabei auf ihre Mindestgröße schrumpfen. Dazu muss ein td-Tag aus der Spalte durch folgende Variante ersetzt werden:
Code:...
...[td=wide] [/td]...
...
Um etwa die zweite Spalte im Beispiel zu strecken wird folgender Code benötigt (beachte den td-Tag bei "Überschrift 2"):
Code:[table]
[th][td]Überschrift[/td][td=wide]Überschrift 2[/td][/th]
[tr][td]Zeile 1, Spalte 1[/td][td]Zeile 1, Spalte 2[/td][/tr]
[tr][td]Zeile 2, Spalte 1[/td][td]Zeile 2, Spalte 2[/td][/tr]
[/table]
Was nun so aussieht:
| Zeile 1, Spalte 1 | Zeile 1, Spalte 2 | | Zeile 2, Spalte 1 | Zeile 2, Spalte 2 |
Es genügt die Angabe in einer beliebigen Zelle anzugeben, alle Zellen der selben Spalte werden dabei gestreckt, da sich dies immer auf die komplette Spalte bezieht. Hierbei kann auch der normale table-Tag genutzt werden, da die komplette Tabelle automatisch die volle Breite einnimmt.
Tabellenbreite fixieren
Alternativ zur vollen Breite kann auch eine feste Breite in Pixeln angegeben werden. Hierzu wird das width Attribut verwendet. Für eine 250 Pixel breite Tabelle sähe der table-Tag wie folgt aus:
Code:[table=width:250]
...
[/table]
Tabellenzellen verbinden
Um eine Zelle über mehrere Spalten auszudehnen (in gängigen Tabellen-Programmen wird dies auch "Zellen verbinden" genannt) gibt es ein weiteres Attribut für den td-Tag namens join:
Code:[table]
[th][td=join:4]Zelle über vier Spalten[/td][/th]
[tr][td=join:2]Zelle über zwei Spalten[/td][td=join:2]Zelle über zwei Spalten[/td][/tr]
[tr][td]Spalte 1[/td][td]Spalte 2[/td][td]Spalte 3[/td][td]Spalte 4[/td][/tr]
[/table]
Das Ergebnis sieht dann so aus:
| Zelle über zwei Spalten | Zelle über zwei Spalten | | Spalte 1 | Spalte 2 | Spalte 3 | Spalte 4 |
Hinter dem join muss mit einem Doppelpunkt getrennt die Anzahl der Spalten angegeben werden, über welche sich die Zelle erstrecken sollen.
Tabellenzellen formatieren
Innerhalb der einzelnen Zellen (td-Tags) kann ganz normaler Text inklusive allen verfügbaren BBCodes genutzt werden, etwa um die Schrift anzupassen, Grafiken einzufügen etc.
Neben dem center-BBCode zur horizontalen Zentrierung des Inhalt, gibt es zusätzlich die Möglichkeit den Inhalt einer Tabellenzelle auch vertikal zu zentrieren. Hierfür muss der Parameter vcenter mit angegeben werden:
Code:[table][tr]
[td]Eine
Zelle
mit
mehreren
Zeilen[/td]
[td]normale Zelle[/td]
[td=vcenter]vertikale Zentrierung[/td]
[/tr][/table]
Und hier das Ergebnis:
Eine
Zelle
mit
mehreren
Zeilen | normale Zelle | vertikale Zentrierung |
Hinweis
Das Tabellengerüst wie oben vorgestellt wird bei der Anzeige genau kontrolliert. So darf ein table-Tag etwa nur tr- und th-Tags als Inhalt haben. Diese wiederum dürfen nur td-Tags als Inhalt haben. Erst in die td-Tags kann dann der eigentliche Inhalt geschrieben werden.
Sollte sich normaler Text im Tabellengerüst außerhalb einer Zelle (also td) befinden, so wird dieser ignoriert und nicht dargestellt.
Wird statt deiner Tabelle nur der BBCode angezeigt, so muss sich irgendwo ein Fehler eingeschlichen haben, etwa eine Zeile nicht durch den passenden Endtag geschlossen. Bitte kontrolliere in diesem Fall nochmal deine Tabellenstruktur. Gerade bei umfangreicheren Tabellen kann schnell mal etwas übersehen werden 
Zuletzt bearbeitet am: 26.02.2013 21:33 Uhr.
Gruß Xelas, WoWGilden.net Admin
|
