Believe in Dreams

Dank unserem lieben Fenriz haben wir hier neuerdings auch die Möglichkeit, Tabellen in Posts einzubauen.
Hier möchte ich euch einen kleinen Einblick geben und zeigen, wie einfach so eine Tabelle eigentlich zu bauen ist.
Doch zuerst: wozu braucht man hier eine Tabelle?
Ganz einfach: manche Threads oder Informationen lassen sich mit Tabellen viel übersichtlicher gestalten. Ich habe beispielsweise diesen Thread mit einer Tabelle gestaltet und auch diverse Listen lassen sich mit Tabellen "aufhübschen" und vor allem eben übersichtlicher machen. In diesem Thread will ich euch also die für unser Forum gültigen Schritte erklären, mit denen ihr ganz einfach eure eigenen Tabellen bauen könnt.
Da die Code-Schnipsel und Beispieltabellen sehr platzraubend sind, aber auch, weil ich euch zwischendurch Raum für Fragen lassen möchte, werde ich hier in den nächsten Tagen jeweils einen weiteren kleinen Schritt erklären. Die Posts werde ich hier unten im Inhaltsverzeichnis verlinken, damit ihr schnell zum aktuellen Schritt kommt.

Erstmal will ich kurz die Grundbegriffe des Tabellenbaus erklären (falls was dazu kommt, wird es ergänzt):
Zelle: ein einzelnes Feld der Tabelle
Zeile: wie beim Fließtext, die untereinander folgenden Zellen
Spalte: die nebeneinander folgenden Zellen

Euch wird wahrscheinlich schon die Masse an seltsamen Knöpfen aufgefallen sein, die sich nun über dem Post-Schreib-Fenster befindet. Die meisten in der zweiten Reihe sind zur Gestaltung von Tabellen da. Ich zähle hier erstmal alle auf und erläutere, was sie machen (wenn man mit der Maus drübergeht, erscheint das auch):
table - damit baut man ein Grundgerüst für eine Tabelle mit festgelegten 800 Pixeln in der Breite
td - steht für eine einzelne Zelle in der Tabelle
tdcolspan - ein Extra-Befehl für eine Zelle, damit es über die ganze Tabellenbreite (über mehrere Spalten) geht, wenn in anderen Zeilen mehrere Spalten sind
tdwidth - ein weiterer Extra-Befehl, der sogar zwei Dinge kann: die Breite einer Zelle in Prozent umsetzen sowie eine senkrechte Trennlinie am Ende der Zelle einbauen; allerdings funktioniert der Befehl nur mit beiden Funktionen gleichzeitig!
tr - dieser Befehl baut eine Zeile, in der nach Bedarf mit td entsprechend viele Spalten gebaut werden können
line - eine waagerechte Trennlinie, deren Dicke variiert werden kann (die ist auch außerhalb von Tabellen nutzbar, siehe hier unten)

---

Inhalt:
1 - Das Grundgerüst
2 - Trennlinien und Spaltenbreiten
3 - Überschrift und Tipps
4 - Beispieltabellen und Codes

_________________
Schreiben heißt,
Geschichten zu erzählen
wie einem der Stift gewachsen ist.

Ich mache dann gleich mal weiter ;)
Fragen dürft ihr auch gerne Stellen, wenn etwas unklar bleibt.

1 - Das Grundgerüst

Wie baut man aus den vielen Bausteinen eine Tabelle, die den eigenen Ansprüchen genügt?
Zu allererst muss eine Tabelle erstellt werden:

Tabelle
Wie man sieht ist der Rahmen da, aber der Text nicht in der Tabelle drin. Damit das Forum also weiß, dass der Text da rein soll, brauchen wir eine Zelle:

Tabelle mit Zelle

WICHTIG ist hierbei die Reihenfolge der Elemente. Die Tabelle ist nur dann sicher richtig, wenn ihr table - tr - td einhaltet.
Jetzt haben wir schonmal einen hübschen Rahmen. Nun möchten wir aber gerne eine Tabelle mit mehreren Zeilen und Spalten haben, sagen wir, zwei mal zwei.
Wir fangen langsam an und wollen in unsere Tabelle erstmal nur zwei Spalten machen. Dazu wird direkt hinter dem /td noch ein td gebaut:

Tabelle mit einer Zelle

Noch eine Zelle

Nun wollen wir noch eine zweite Zeile anfügen, die genauso auch zwei Spalten hat. Dazu kopiert man im Prinzip einfach fast den ganzen Tabellen-Code außer den table-Befehlen und fügt dieses entsprechend zwischen /tr und /table ein:

Tabelle mit einer Zelle	Noch eine Zelle
Tabelle mit einer Zelle	Noch eine Zelle

Und schon haben wir ein Grundgerüst für eine 2x2-Tabelle.
Auf diese Art lassen sich eigentlich beliebig viele Zeilen und Spalten machen. Was im Augenblick noch ein wenig ungünstig ist, ist die Tatsache, dass man die Grenzen der einzelnen Zellen noch nicht sehen kann. Dazu werde ich dann im nächsten Post etwas sagen.

_________________
Schreiben heißt,
Geschichten zu erzählen
wie einem der Stift gewachsen ist.

Ah, das kenn ich. Kann ganz schön unübersichtlich werden ^^

Die Geschichte mit der Übersichtlichkeit habe ich für den dritten Unterpunkt vorgesehen ^^
Aber erstmal Punkt 2 :D

2 – Trennlinien und Spaltenbreiten

Bislang sieht unsere Tabelle so aus:

Tabelle mit einer Zelle	Noch eine Zelle
Tabelle mit einer Zelle	Noch eine Zelle

So stellt man sich natürlich keine richtige Tabelle vor, was uns fehlt, sind Trennlinien!

Ich beginne mit der einfacheren, der horizontalen Trennlinie. Um diese zu erstellen, klickt ihr einfach oben auf line. Damit ist es allerdings noch nicht ganz getan, denn wenn ihr diesen Code einfach so stehen lasst, seht ihr im Endeffekt nur den Code:
[line][/line]
Was hier fehlt, ist die Angabe, wie dick die Linie werden soll. Das stellt ihr über die Funktion width ein, die ihr noch zusätzlich einfügen müsst.

Das X in diesem Beispiel könnt ihr durch jede positive ganze Zahl ersetzen. Diese Zahl gibt die Pixel an, die die Linie dick sein soll. So könnt ihr auch sehr fette Balken erstellen. Für Tabellen eignen sich 1 oder zwei Pixel am besten (die anderen Linien der Tabelle sind 1 Pixel, 2 Pixel eignen sich, wenn ihr die horizontale Trennlinie besonders betonen wollt).
Beispiele für unterschiedliche Dicken:
1 Pixel:

---

10 Pixel:

---

50 Pixel:

---

Was ihr hier unbedingt beachten müsst, ist die Tatsache, dass dieser Code damit vollständig ist. Anders als bei den meisten anderen Codes, dürft ihr hier nichts zwischen Anfangs- und Endbefehl schreiben! Da käme dann sowas raus:
[line]nichts[/line]
Außerdem ist wichtig, dass keine Leerzeichen zwischen width=X stehen, sonst geht es auch nicht.

Und wie bekommt man nun diese Trennlinie in die Tabelle? Das ist sehr einfach, obwohl es verschiedene Verwendungszwecke gibt.
Wenn ihr einen Fließtext in einer Zelle habt, den ihr gerne durch Trennlinien auflockern möchtet, könnt ihr den Linienbefehl einfach an die Stelle im Text packen, wo auch die Linie sein soll. Hier eignen sich auch etwas dickere Trennlinien.
Zur Trennung von zwei untereinander stehenden Zeilen müsst ihr den Befehl nur entsprechend ganz ans Ende des entsprechenden Textes in den Zellen der oberen Zeile stellen:

Tabelle mit einer Zelle	Noch eine Zelle
Tabelle mit einer Zelle	Noch eine Zelle

Nun fehlen uns noch die vertikalen Trennlinien. Hier kommt nun die erste Funktion von tdwidth zum Einsatz. Dabei müssen alle alten td-Befehle durch tdwidth ersetzt werden. Denkt auch an die Befehle, die den Code beenden!
Mit dem Befehl borderwidth könnt ihr nun die Breite der Trennlinien angeben. Das funktioniert hier genauso, wie bei der horizontalen Trennlinie, nur mit dem feinen Unterschied, dass diese Trennlinie nur in Tabellen genutzt werden kann. Der vollständige Befehl (also das, was in die vorderen eckigen Klammern muss) sieht dann so aus: tdwidth borderwidth=X
Auch hier bezeichnet X eine beliebige Breite in Pixeln. Für Tabellen empfehle ich wieder eine Breite von 1 bis 2 Pixeln. Es ist vor allem sinnvoll, die Breite hier an die Dicke der horizontalen Linie anzugleichen. Ihr müsst aber auch unbedingt beachten, dass ihr in jeder letzten Zelle pro Zeile den Wert 0 angebt, ansonsten habt ihr da zwei Linien!

Da tdwidth nun aber auch für die Breitenverhältnisse der Spalten zuständig ist, müssen wir auch diese einbauen - sonst funktioniert der Befehl nicht und ihr bekommt ein folgendes Chaos:

[tdwidth borderwidth=1]Tabelle mit einer Zelle

---

[/tdwidth][tdwidth borderwidth=0]Noch eine Zelle

---

[/tdwidth] [tdwidth borderwidth=1]Tabelle mit einer Zelle[/tdwidth][tdwidth borderwidth=0]Noch eine Zelle[/tdwidth]

Die Breite jeder Zelle lässt sich mit der Funktion width in Prozent einstellen. Dabei ist die Gesamtbreite der Tabelle immer 100%. Es ist also darauf zu achten, dass die Summe der einzelnen Spaltenbreiten immer 100 ist.
Ich empfehle nach Möglichkeit "einfache" Zahlen (Zehner und Fünfer) zu benutzen, weil es im Endeffekt leichter zu kontrollieren ist, wieviel Prozent noch in welche Spalte geht.
Für unsere Beispieltabelle nehme ich mal das Verhältnis 60 zu 40:

Tabelle mit einer Zelle	Noch eine Zelle
Tabelle mit einer Zelle	Noch eine Zelle

_________________
Schreiben heißt,
Geschichten zu erzählen
wie einem der Stift gewachsen ist.

3 - Überschrift und Tipps

In diesem Teil möchte ich nun die letzte Funktion für Tabellen erläutern und danach noch ein paar Tipps zum Tabellenbau und zur Übersichtlichkeit geben.

Der letzte noch nicht erklärte Befehl ist tdcolspan. Damit könnt ihr eine Zelle über die ganze Tabellenbreite machen, auch wenn in anderen Zeilen mehrere Spalten sind. Das ist unter anderem sinnvoll, wenn ihr eine Überschift oder einen Banner in eurer Tabelle unterbringen wollt.
Bei unserer Beispieltabelle füge ich daher eine neue Zeile am Anfang ein. Statt dem normalen td-Befehl benutze ich stattdessen tdcolspan. Dabei gebe ich mit span die Anzahl der Spalten an: tdcolspan span=2. Auch hier sollten wir am Ende noch eine Trennlinie einfügen.
Das sähe für die Beispieltabelle dann so aus:

Überschrift
Tabelle mit einer Zelle	Noch eine Zelle
Tabelle mit einer Zelle	Noch eine Zelle

Nun komme ich zu einigen Hinweisen zur Tabelle.
Zunächst einmal möchte ich die Tabellenüberschrift in der Mitte haben. Mit dem normalen center-Befehl funktioniert das in Tabellen leider nicht, daher gibt es den Befehl center2. Dieser wird genauso benutzt, wie der normale center-Befehl.

Überschrift
Tabelle mit einer Zelle	Noch eine Zelle
Tabelle mit einer Zelle	Noch eine Zelle

Und schon könnten wir die Tabelle mit mehr Text versehen. Allerdings sieht der Code jetzt fürchterlich unübersichtlich aus. Daher habe ich es mir angewöhnt, den Code mit Zeilenumbrüchen zu gliedern. Dabei trenne ich immer nach jeder Zelle:

In diesem Forum ergibt sich allerdings ein kleines Problem. Und zwar werden die Zeilenumbrüche aus der Tabelle ausgelagert, das heißt, ihr habt plötzlich einen Haufen leerer Zeilen über der Tabelle und der ganze Post sieht doof aus.
Das könnt ihr allerdings über einige Umwege umgehen. Ich habe die Angewohnheit entwickelt, aufwändigere Posts immer auch als Word-Dokument zu speichern. Ihr solltet also euren Tabellencode in euer Schreibprogramm kopieren und könnt dort dann so viele Zeilenumbrüche reinmachen, wie ihr wollt und mögt. Dann könnt ihr die Inhalte der Tabelle in eurem Schreibprogramm einsetzen, ohne so schnell die Übersicht zu verlieren. Danach könnt ihr den ganzen Code wieder ins Forum kopieren und müsst dann nur noch die ganzen Zeilenumbrüche rausnehmen. So habt ihr für spätere Veränderungen (z.B. bei einem Inhaltsverzeichnis) immer noch eine übersichtliche Variante der Tabelle auf eurem Rechner.

Im nächsten Teil poste ich euch einfach noch ein paar Codes für verschiedene Tabellenformen, die ihr gerne in euren Posts weiterverwenden könnt.

_________________
Schreiben heißt,
Geschichten zu erzählen
wie einem der Stift gewachsen ist.

Wow, das sieht erstmal sehr verwirrend aus.

Trotzdem find ich es klasse, dass wir diese neuen Funktionen jetzt hier im Forum haben. ^^
Danke, fenriz, dass du das gecoded/eingestellt hast!
Und danke, Vegi, für dieses nette Tutorial. :)

_________________
Kann stimmen, muss aber nicht. :B

Dank Klausuren ist dieses Tutorial dann doch ein wenig in Vergessenheit geraten. Aber hier nun der erstmal letzte Teil.

4 - Beispieltabellen und Codes

Hier will ich euch einfach einige Codes geben, mit denen ihr Tabellen nach eurem Bedarf bauen könnt.
Bevor ihr eure Tabelle baut, wäre es ratsam, wenn ihr euch vorher auf einem Zettel eine kleine Skizze macht, damit ihr wisst, was in welchen Teil der Tabelle soll und damit auch, wie sie im Endeffekt strukturiert werden soll.
Wollt ihr z.B. eine Überschrift oder nicht, wollt ihr in einer Spalte ein Inhaltsverzeichnis neben einer Spalte mit Fließtext, oder wollt ihr einfach nur eine Art Liste bauen?

Im Folgenden habe ich euch mal drei verschiedene Tabellen erstellt, die ihr euren Bedürfnissen schnell anpassen können solltet. Hierbei gilt: Benutzt den Code hier, um die Übersicht zu behalten und entfernt vor dem Posten sämtliche Zeilenumbrüche im Tabellencode (Zeilenumbrüche in den Tabellenfeldern, die in den Text gehören bleiben natürlich drin), da ihr sonst einfach ne unnötig große Lücke über der Tabelle habt. Wie ich schon im vorigen Schritt sagte, ist es sinnvoll, diese Codes hier einfach in ein Textdokument zu schmeißen und sie dort entsprechend anzupassen. In der Form solltet ihr die Tabelle dann speichern, falls ihr noch was hinzufügen wollt. Wenn ihr das dann hier einfügt, entfernt eben einfach die Zeilenumbrüche und schon habt ihr eine schöne Tabelle.

5 Spalten x 4 Zeilen

Überschrift 1	Überschrift 2	Überschrift 3	Überschrift 4	Überschrift 5
Inhalte 1.1 Lorem ipsum dolor sit amet	Inhalte 1.2 Lorem ipsum dolor sit amet	Inhalte 1.3 Lorem ipsum dolor sit amet	Inhalte 1.4 Lorem ipsum dolor sit amet	Inhalte 1.5 Lorem ipsum dolor sit amet
Inhalte 2.1 Lorem ipsum dolor sit amet	Inhalte 2.2 Lorem ipsum dolor sit amet	Inhalte 2.3 Lorem ipsum dolor sit amet	Inhalte 2.4 Lorem ipsum dolor sit amet	Inhalte 2.5 Lorem ipsum dolor sit amet
Inhalte 3.1 Lorem ipsum dolor sit amet	Inhalte 3.2 Lorem ipsum dolor sit amet	Inhalte 3.3 Lorem ipsum dolor sit amet	Inhalte 3.4 Lorem ipsum dolor sit amet	Inhalte 3.5 Lorem ipsum dolor sit amet

Überschriftzeile und 2 Spalten

Überschrift oder Banner

Übersicht oder Inhaltsverzeichnis

Inhalte, Fließtext Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Überschriftzeile und 3 Spalten

Überschrift oder Banner
Inhaltsverzeichnis	Fließtext Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.	Kurzinfos

Zu guter Letzt habe ich noch ein Angebot:
Wenn ihr gerne eine Tabelle hättet, aber Probleme habt, dann meldet euch einfach bei mir. Ich helfe dann gerne weiter, oder baue euch eure Tabelle zusammen :D

_________________
Schreiben heißt,
Geschichten zu erzählen
wie einem der Stift gewachsen ist.

...Ich werde mich die Tage mal etwas genauer mit dem Tutorial beschäftigen. Vielleicht verstehe ich ja danach, was ich machen muss... hat mit CL und den Büchern ja auch funtioniert. xD

_________________
Kann stimmen, muss aber nicht. :B

Naja, verglichen mit CL sind die Tabellen hier wirklich lächerlich einfach XD

_________________
Schreiben heißt,
Geschichten zu erzählen
wie einem der Stift gewachsen ist.