Das ist eine Tabelle mit einer Zeile und einer Zelle! Es ensteht der Effekt des Rahmens.
|
Da ich schon des öfteren gefragt wurde, wie ich die Rahmen um die Beiträge hier in meinem Tagebuch gestalte habe ich einmal den Aufbau von Tabellen für Webseiten im Allgemeinen und dann speziell für das Weblog von freenet.de zusammengefasst.
Grundsätzlich möchte ich hier auch die Webseite SELFHTML empfehlen, wo man weitere Grundlagen der Webseitengestaltung lernen kann.
Der Inhalt dieser Seite kann auch als Textdokument unter folgendem Link gedownloadet bzw. nachgelesen werden:
Eine Tabelle besteht in HTML aus den Tags (Befehlen die der Browser interpretiert):
In den Zellen stehen dann die einzelnen Inhalte der Tabelle.
So entsteht eine Tabelle mit einer Zeile und einer Zelle:
Und so sieht es aus:
Beispiel 1
Eine einfache Tabelle.
| Das ist eine Tabelle mit einer Spalte und einer Zeile! Es ensteht der Effekt des Rahmens. |
Die Werte im "table"-Tag haben folgende Bedeutung:
border = Rahmenbreite, der Wert ist variabel
cellpadding = bestimmt den Abstand des Zelleninhalts vom Zellenrand, der Wert ist variabel
cellspacing = bestimmt den Abstand der einzelnen Tabellenelemente (Spalten und Zeilen) voneinander, der Wert ist variabel
width = Breite der Tabelle, sie kann als Pixelwert als auch als Prozentzahl, entspricht dann Prozent der Fensterbreite, angegeben werden. Die Höhe der Tabelle wird durch den Inhalt bestimmt und wird deshalb nicht gesondert angegeben.
bgcolor = Hintergrundfarbe, hier kann ein Wort für die Farbe z.B. white für weiß, red für rot oder black für schwarz oder auch einer der bekannten Farbwerte eingesetzt werden (kann alternativ auch in den "td"-Tag geschrieben werden um einzelne Bereiche der Tabelle verschieden zu färben.) Die Links zu Seiten mit Farbnamen bzw. -werten aus SELFHTML füge ich weiter unten noch ein.
background = URL des zu verwendenden Hintergrundbildes, alternativ oder gleichzeitig zu bgcolor (Hintergrundfarbe) kann ein Hintergrundbild verwendet werden. Hierbei ist es möglich, entweder Hintergrundkacheln zu verwenden, die dann vom Browser zu einem einheitlichen Hintergrundbild zusammengesetzt werden oder ein großes Bild zu laden, das die gesamte Tabelle ausfüllt.
bordercolor = Rahmenfarbe
bordercolordark = Schattenseite des Rahmens
bordercolorlight = Lichtseite des Rahmens
Bordercolor, bordercolorlight und bordercolordark ergeben zusammen die 3-D-Ansicht des Rahmens, wobei beachtet werden sollte, das bordercololight immer eine möglichst helle Farbe ist und bordercolordark entsprechend eine möglichst dunkle.
Die Werte im "font"-Tag für die Schrift haben die Bedeutung:
face = Schriftart/Schriftartfamilie, hier können die aus jeder Textverarbeitung bekannten Schriftarten verwendet werden, z.B. Arial, Times New Roman u.s.w.
size = Wert für die Schriftgröße, der variabel gesetzt werden kann zwischen -3 für sehr klein und +5 für sehr groß. Ob das die Minimal- bzw Maximalwerte sind weiß ich nicht genau, denn andere habe ich noch nicht verwendet.
color = Farbe/Farbwert der Schrift, hier kann ein Wort für die Farbe z.B. white für weiß, red für rot oder black für schwarz oder auch einer der bekannten Farbwerte eingesetzt werden. Hier gilt das gleiche, wie ich oben schon einmal geschrieben habe, auf die entsprechenden Links verweise ich weiter unten.
Hier nun die Links zu den Farbwerten und -namen:
Durch das Anordnen mehrerer Tabellenzellen innerhalb einer Zeile entstehen die typischen Spalten einer Tabelle. So entsteht eine Tabelle mit einer Zeile und 3 Spalten. In einer Zeile befinden sich 3 Tabellenzellen:
Und so sieht es aus:
Beispiel 2
Eine Tabelle mit 1 Zeile und 3 Spalten.
| Spalte 1 | Spalte 2 | Spalte 3 |
So entsteht eine Tabelle mit einer Spalte und 3 Zeilen. Man schreibt im Quelltext eine Tabelle mit 3 Tabellenzeilen, in denen sich jeweils eine Tabellenzelle befindet:
Und so sieht es aus:
Beispiel 3
Eine Tabelle mit 1 Spalte und 3 Zeilen. In jeder Zeile befindet sich genau eine Tabellenzelle.
| Zeile 1 |
| Zeile 2 |
| Zeile 3 |
Wenn man diese beiden Möglichkeiten kombiniert, also eine Tabelle mit drei Zeilen und in den Zeilen jeweils drei Zellen, dann erhält man das klassische Gitternetz:
Und so sieht es aus:
Beispiel 4
Eine Tabelle mit 3 Zeilen und drei Spalten. In jeder Tabellenzeile befinden sich 3 Tabellenzellen.
Es entsteht das klassische Gitternetz.
| Zeile 1 Spalte 1 |
Zeile 1 Spalte 2 |
Zeile 1 Spalte 3 |
| Zeile 2 Spalte 1 |
Zeile 2 Spalte 2 |
Zeile 2 Spalte 3 |
| Zeile 3 Spalte 1 |
Zeile 3 Spalte 2 |
Zeile 3 Spalte 3 |
Um die Beispiele anschaulicher darstellen zu können, habe ich hier noch einen kleinen Kunstgriff angewandt. Ich habe im "table"-Tag die Hintergrundfarbe "white" genutzt und davon abweichend in den einzelnen "td"-Tags unterschiedliche Hintergrundfarben, nämlich "aqua" und "blue" verwendet. So enstehen die sich gut abhebenden Trennlinien. Um das zu demonstrieren hier noch einmal der Quelltext des vorangegangene Beispiels, diesmal mit eingesetzten Werten:
Da in diesen eingefügten Textfeldern keine Schriftformatierung möglich ist kann ich die unterschiedlichen Werte leider nicht farblich hervorheben.
So kann natürlich weiter kombiniert werden, so das Tabellen mit vielen Zeilen und in den Zeilen mehreren Spalten entstehen. Das wird beispielsweise zur Präsentation von kleinen Bildern wie etwa Smilies auf Webseiten genutzt.
Am besten ist es, wenn jetzt jeder, der Praxis bekommen möchte, ein neues Fenster mit dem Editor öffnet, dort einmal einige Probetabellen hineinschreibt und das ganze als "tabellen.html" abspeichert (Speichern unter -> Vorgegebenen Speichertext durch diesen ersetzen -> speichern). Dann diese Datei durch einen Doppelklick öffnet und wenn alles richtig gemacht wurde öffnet sich eine Webseite, die bereits einige Tabellenzeilen enthält.
Achtung: Die Tabellen werden nur sichtbar, wenn man ihre Zellen (Spalten oder Zeilen) auch mit einem Inhalt füllt, Beispielsweise mit den Worten "Spalte 1...bis" oder "Zeile 1...bis" wie ich bei meinen Beispielen gemacht habe. Tabellen ohne Inhalte werden vom Browser ignoriert.
So untereinandergeschrieben und immer etwas eingerückt ist es die reine Lehre. Im Freenet-Weblog muss das etwas abgewandelt werden.
Ich mache es so:
Weil im Weblog jeder Zeilenumbruch übernommen wird entsteht durch die Zeilenumbrüche und das Einrücken viel freie Fläche. Das sieht im Weblog unschön aus. Um das zu vermeiden müssen also am besten alle Tags hintereinanderweg ohne Leerzeichen und Zeilenumbrüche geschrieben werden, praktisch also alles auf eine Zeile, dann erhält man ein akzeptables Ergebnis. Der Quelltext für das folgende Beispiel sieht also so aus:
Der "br"-Tag am Beginn ist ein Zeilenumbruch, der dafür sorgt, das die Tagesüberschrift nicht so auf die Tabelle aufgeklebt wirkt. Danach folgen die Tags für den Tabelleaufbau mit den Werten für die Formatierung, der Tag für die Schriftformatierung, der Text und die abschließenden Tags für die Schrift und den Tabellenaufbau.
Hier in der Textbox entstehen natürlich trotzdem Zeilenumbrüche am Zeilenende, aber die enstehen bei der Eingabe im Editierfenster des Weblogs auch, werden aber beim Speichervorgang nicht übernommen.
Und so sieht es aus:
Beispiel 5
Wieder eine einfache Tabelle in der Art, wie ich sie im Weblog verwende.
| Das ist eine Tabelle mit einer Zeile und einer Zelle! Es ensteht der Effekt des Rahmens. Diesmal habe ich alle Teile des Tabellenaufbaus in eine Zeile geschrieben. Trotzdem ist kein Unterschied zu Beispiel 1 erkennbar. |
Innerhalb dieser äußeren Tabelle kann man dann auch noch innen Tabellen ohne Rahmen aber mit derselben Hintergrundfarbe oder auch einer anderen Hintergrundfarbe einbauen, um z.B. Bilder nebeneinander anzuordnen oder Text in Spalten zu schreiben, wie es in meinem letzten Beispiel zu sehen ist.
Und so sieht es aus:
Beispiel 6
Wieder eine einfache Tabelle in der Art, wie ich sie im Weblog verwende, diesmal mit Hintergrundbild.
Darin hineingeschrieben eine weitere Tabelle mit zwei Zellen, in die jeweils ein Bild geladen wird.
Das ist eine Tabelle mit einer Zeile und einer Zelle! Es ensteht der Effekt des Rahmens.
|
In diesem Fall stehen 2 Bilder nebeneinander. Das Hintergrundbild und die beiden Bilder befinden sich in einem Ordner in meinem Webspace bei Arcor. Ich habe lediglich hier die Bild-URL an den entsprechenden Stellen eingesetzt. Dieser Teil muss natürlich innerhalb der äußeren Tabelle zentriert werden, was durch den Befehl "div align="center"" passiert, der mit "/div" wieder abgeschlossen wird.
Die Werte im Bildtag bedeuten:
