 | ||||||||||
 | ||||||||||
| Mit Tabellen kann man Beiträge besonders schön gestalten. (Auch dieser Beitrag ist mit Tabellen gestaltet worden.) Es gibt so viele Möglichkeiten, Tabellen zu verändern. Zwei davon davon möchte ich euch jetzt zeigen. WICHTIG: Diese Codes sind nur bei Tabellen mit einer Zeile und einer Spalte anzuwenden. Bei mehreren Zeilen werden die Trennstriche nicht angezeigt. Für die Designs, die ich erstelle, ist dies auch nicht tragisch. Wenn gewünscht, zeige ich aber, wie man die Trennstriche doch anzeigen kann. Neben den Standartlinien gibt es noch viele andere Arten, die man ganz leicht auswählen kann.
Nachdem ihr euch eine Standarttabelle mit der entsprechenden Schaltfläche erstellt habt, ändert ihr die erste Zeile folgendermaßen: Vorher:
Nachher:
Das Ergebnis sieht dann so aus:
Nun könnt ihr die Linienart frei wählen. Zur Auswahl stehen neben der einfachen Linie solid noch:
Außerdem könnt ihr noch die Linienstärke frei wählen. Dazu ändert ihr einfach die Zahl bei border: 1px
| ||||||||||
 | ||||||||||
 | ||||
| ||||
Diesmal werden wir ein bisschen Farbe in unsere Tabelle bringen. Wir nehmen als Beispiel diese Tabelle:
Zuerst ändern wir die Farbe unserer Linie. Dazu erweitern wir unseren Code um den Farbcode. #ffffff (Weiß)
Dann sieht unsere Tabelle so aus:
Ihr könnt jeden Farbcode dort einfügen. Eine Tabelle mit den Codes findet ihr beispielsweise hier: Farbtabelle Als nächstes möchten wir einen gelben Hintergrund für die Tabelle. Dazu brauchen wir einen neuen Code. Dieser sieht so aus: background-color: #FFE599 Wir fügen ihn so ein:
Dann sieht unsere Tabelle nun so aus:
| ||||
 | ||||
 | |||||
| |||||
| Statt einer Farbe können wir für den Hintergrund natürlich auch eine Grafik nehmen. Wie das funktioniert, zeige ich euch jetzt. Wir nehmen eine Tabelle vom letzten Mal:
Um statt der Farbe eine Grafik als Hintergrund zu bekommen, fügen wir das hier ein: background-image: url(http://www.bildadresse.de) Es ist nicht nötig, background-color: #FFE599 zu löschen. Ich habe jetzt mal irgendein Hintergrundbild eingefügt.
Und das Ergebnis:
Wenn ihr möchtet, dass sich das Hintergrundbild bei größeren Tabellen wiederholt, fügt ihr noch den Zusatz background-repeat: repeat ein. (Wobei ich mich schwach daran erinnere, dass dies automatisch passiert, wenn man ein Hintergrundbild einsetzt. Also wenn ihr das Hintergrundbild senkrecht und waagerecht wiederholen wollt, könnt ihr diesen Zusatz wohl auch weglassen.) Wollt ihr, dass das Bild sich nur waagerecht wiederholt, braucht ihr den Code repeat-x. Für eine senkrechte Wiederholung nehmt ihr repeat-y. Mit diesen Befehlen könnt ihr einige schöne Effekte erzielen. Zwei davon zeige ich jetzt. Effekt mit repeat-x. Hier eignen sich immer Verläufe sehr gut an. Diese könnt ihr leicht in eurem Bearbeitungsprogramm erstellen. Die Datei muss gar nicht groß sein. Ich nehme diese hier: http://i29.servimg.com/u/f29/12/89/51/33/verlau10.jpg
Effekt mit repeat-y. Da kommt mir für ein Schreibforum gleich ein besonders schönes Beispiel in den Sinn. ^^ Dafür habe ich mir diesen Hintergrund von http://www.kneller-gifs.de/ gespeichert: http://i29.servimg.com/u/f29/12/89/51/33/bg_rin10.gif Auf dieser Seite findet ihr noch viele andere schöne Hintergründe. Schaut euch einfach mal um. (:
Das sieht jetzt noch nicht so schön aus, ich weiß. Im nächsten Teil zeige ich euch, wie ihr das mit dem Abstand zwischen Rand und Text besser machen könnt. ^^ | |||||
 | |||||
 | |||||
| |||||
Nun wollen wir mal dafür sorgen, dass der Text nicht so an den Linien 'klebt'. Wir nehmen wieder unsere Tabelle vom letzten Mal:
Mit dem Code padding: 1px können wir den Abstand zwischen Rand und Text bestimmen. Wir fügen den Befehl so ein:
Und das Ergebnis:
Bei 5px sieht unsere Tabelle dann so aus:
Wir möchten nun aber links einen größeren Abstand haben, als bei den restlichen Seiten. Dafür benutzen wir: padding-left. Das geht natürlich auch bei den anderen Seiten. Statt left nehmt ihr dann eben right, top oder bottom. Nun können wir den linken Abstand größer machen. Das sieht dann so aus:
Spielt einfach mal ein wenig mit den Abständen herum, bis ihr die richtige Zahl gefunden habt. ^^ | |||||
 | |||||
 | ||||||||||||||
| ||||||||||||||
| Diesmal kümmern wir uns um die Größenverhältnisse der gesamten Tabelle. Auch arbeite ich hier das erste Mal mit mehreren Zeilen und Spalten. Wenn ihr eure Tabelle vom letzten Mal über die gesamte Breite des Beitrags haben möchtet, braucht ihr den Befehl width. Dieser bestimmt die Breite der Tabelle. Für die gesamte Breite brauchen wir die Größenangabe 100%. Also nehmen wir den Code width=100%. Dieser Code kommt ganz vorne hin.
Je nach Bildschirmgröße kann es sein, dass mal die Hintergrundfarbe sieht, weil das Hintergrundbild in der Breite zu klein ist. Das wollen wir natürlich nicht. Damit die Tabelle nun bei jeder Bildschirmgröße gleich groß bleibt, brauchen wir eine andere Größenangabe. Dazu nehmen wir px, also Pixel. Die Hintergrundgrafik ist 864px groß. Also darf die Tabelle höchstens so groß sein. Nehmen wir nun einfach mal 650px. Ändern wir das also nun so: width=650px.
Wenn ihr eine Tabelle mit mehreren Spalten erstellt, werden diese immer gleichmäßig aufgeteilt oder verändern sich je nach Inhalt.
Ihr könnt aber auch manuell steuern, wie groß die einzelnen Spalten sein sollen. Dafür brauchen wir wieder den Befehl width. Gehen wir davon aus, dass wir die Tabelle wieder 650px groß haben wollen. Also width=650px. Nun möchten wir, dass die erste Spalte 200px und die zweite 450px groß ist. Dazu müssen wir das erste mal den style der einzelnen Spalten ändern. Dazu müssen wir in dieser Klammer etwas hinzufügen: [td]. Diese befinden sich in der dritte Zeile des Codes. Wir brauchen also einmal width=200px und width=450px.
Wenn wir nun eine Zeile einfügen und diese über die gesamte Breite der Tabelle haben wollen, stoßen wir auf ein Problem: Der Code wird nicht richtig angenommen.
Um dieses Problem zu lösen, brauchen wir einen neuen Befehl, der die Breite der Spalten besser definiert. Dieser Befehl heißt colspan. Die obere Zeile soll über zwei Spalten gehen, also benutzen wir colspan=2. Diesen Befehl fügen wir bei der oberen Zeile ein.
Beim nächsten Mal verwenden wir alle Befehle, um die Grundstruktur für einen schön gestalteten Beitrag zu erhalten. ^^ | ||||||||||||||
 | ||||||||||||||
 | ||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||
| Nun, das war es eigentlich auch schon, was ich zu den Tabellen zu sagen habe. ^^° Nun können wir mit diesem Wissen schon einmal die Grundform für einen schönen Beitrag machen. Details kommen dann in den folgenden Einträgen. Wenn ihr zum Beispiel einen Eintrag für Hintergründe zu einer eurer Geschichten haben möchtet, solltet ihr euch zuerst überlegen, was ihr wie unterbringen wollt. Macht euch ruhig eine Skizze in Paint oder einfach auf einem Blatt Papier. Ich habe das jetzt mal schnell gemacht.  Nun könnt ihr euch das Grundgerüst für diese Tabelle erstellen. Wir brauchen drei Zeilen und zwei Spalten.
Wir möchten, dass die obere und die untere Zeile über die gesamte Breite der Tabelle gehen. Also brauchen wir nun den Befehl colspan.
Nun passen wir die Größe an. Die Tabelle soll 600px groß sein. Die linke Spalte soll 30% und die rechte 70% der Tabelle ausmachen. Wir benutzen den Befehl width.
Nun möchten wir einen Hintergrund. Die Zeilen und Spalten soll zuerst einmal weiß sein. Der obere und untere Teil bekommt aber ein Hintergrundbild. Die Linien sollen nicht mehr sichtbar sein. Damit zwischen den einzelnen Zeilen und Spalten kein Zwischenraum bleibt, bestimmen wir mit cellspacing=0, dass die ganzen Bestandteile der Tabelle keinen Abstand zueinander haben.
Ohne diesen Befehl würde die Tabelle sonst so aussehen: (Wem das gefällt, kann mit dem Befehl cellspacing natürlich auch einen größeren Abstand erzeugen. ^^)
Als nächstes möchte ich eine Grafik für die Überschrift und die untere Zeile. Diese füge ich einfach wie gewohnt mit dem Befehl [img][/img] ein.
Nun liegt es an euch, was ihr daraus macht. ;D Es gibt unendlich viele Möglichkeiten, eure Einträge zu gestalten. Probiert einfach mal verschiedene Sachen aus. In einem nächsten Beitrag werde ich noch ein paar Dinge zeigen, die ich sonst noch für meine Einträge verwende.
| ||||||||||||||||||||||||||||||||||||||||||
 | ||||||||||||||||||||||||||||||||||||||||||
Startseite
Anmelden
von 
Diesen Teil müsst ihr wohl oder übel selbst füllen. XD