|
|
|
WEGEN DER FILTERÄNDERUNGEN WURDE DIESE SEITE KOMPLETT ÜBERARBEITET Diese Seite soll zu einen Verständnis wie Tabellen funktionieren führen, damit ihr selbst Fehlern auf die Schliche kommen könnt und Tabellen gestalten, wie ihr wollt :)
Die Filteränderung vom 31.01.2011 ist nicht zu vergleichen mit den vorhergehenden. Sie betrifft html und css und ihr könnt alles womit wir uns so durchgeschummelt haben vergessen. Alles, was einem bis jetzt verziehen wurde, ″matscht″ jetzt die Seite. Man kommt um ein logisches Auseinandersetzten mit css und html nicht mehr herum. Für all meine Klammern gilt: diese [ stehen für die Dreieck-Klammern diese ( für die geschwungenen Klammern
____________________________________________________________ UND LOS GEHTS MIT DEN LEIDIGEN TABELLEN ^^ ! ____________________________________________________________
Die grüne Schrift ist die Tabelle höchstselbst, der Feind, die schwarze Schrift steht außerhalb der Tabellen, der Freund, der krampfhaft versucht zu helfen und es der Tabelle recht zu machen. Unterhalb der Tabelle findet ihr den Code dazu. Und los gehts ^^ ! Also unsere Tabellen bestehen aus:
Eine einfache Tabelle mit Text und einer Zelle - daher auch nur einer Reihe - kein Rahmen, nichts - sieht eigentlich aus, als hätte man nur in einer anderen Schriftfarbe weitergeschrieben ^^.
Wie unschwer zu erkennen, muss man in einer Tabelle auch die Schriftfarbe, - größe usw. angeben. Man merkt gar nicht, dass es eine Tabelle ist, weil kein Rahmen um sie herum ist - das macht aber z.B.: Sinn, wenn man nicht bis an den Rand einer PP schreiben will. Dann gibt man eine Tabellenbreite - width= ein, sieht dann so aus.
Also gut, ich stell Dich jetzt in die Mitte - center und geb Dir einen Rahmen - border=
Ab jetzt wird es teilweise ″Neu″! Das ist jetzt eine ″Mischform″ und damit etwas ″Halbgeschummeltes″. Ihr müsst euch darüber klar sein, damit hier keine Fehler passieren. Zuerst ist in der Table noch die altbekannte Form mit border="ZAHL". Die Hintergrundfarbe steht am Schluss mit der neuen notwendigen Codierung style="background-color:yellow;". Es ist eine Version, für User, die sich schwer tun mit den neuen, langen Codes und vielleicht nur Kleinigkeiten ausbessern wollen wie die Hintergrundfarbe. bgcolor ist ja nicht mehr möglich zu verwenden! Hier also eine Tabelle mit einer Reihe und 2 Zellen.
Hier noch ein Beispiel mit weiteren Definierungen, Tabellenbreite(width), Tabellenhöhe(height). width="ZAHL" und height="ZAHL". Achtet darauf, dass zuerst die alte html-Form steht und erst am Schluss der neue ″Style-Code″. Das erleichtert auch spätere Änderungen.
Jetzt eine Tabelle mit 2 Reihen mit je einer Zelle.
Auf zum neu verlangten Code! Tabelle mit einer Reihe und 2 Zellen, definiert ist der Tabellenhintergrund, der Tabellenrand und die Tabellenbreite.
Wie ihr seht muss die Table jetzt anders definiert werden als früher. Hier die Grundausdrücke für die Befehle, was eure Tabelle/Tabellenreihe/Tabellenzelle können soll. Hintergrundfarbe - background-color: Farbnamen oder Hexacode Rahmenfarbe - border-color: Farbnamen oder Hexacode Rahmenstärke - border-width: ---px Rahmenstil - border-style: solid(eine Linie), dashed(Striche), dotted(Punkte), 0px(kein Rahmen) Breite - width: Höhe - height: Position zu den seitlichen Rändern - align= Position zu den Rändern oben und unten - valign= Position von Text zu den Seitenrändern - align="left"(links), align="right"(rechts), align="center"(mitte) Position von Text innerhalb der Zellenhöhe - valign="left"(links), valign="right"(rechts), valign="center"(mitte) Dazu kommt, dass ihr jetzt auch die Tabellenreihen oder Tabellenzellen genau definieren müsst, wenn sie sich von der Tabelle abheben sollen. Seid ihr bereit für den totalen Tabellenwahnsinn ?!
Das ist der Code für die farbenfrohe Tabelle oben. Wollt ihr wirklich noch Tabellen machen??? OK :D ! Kein Mensch macht so eine Tabelle, außer ich, um euch zu zeigen wie ihr einzelne Reihen und Zellen gestalten könnt :) ! Also keine Panik !
Kommen wir zur Schrift Dies ist wieder eim Mischcode, auch ich bin faul :D und es geht ja um die Schriftposition :)
Spätestens jetzt wird es sinnvoll, ein paar Unterteilungen in die Tabellen-Html einzubauen, sonst findet man seine Reihen und Zellen nie wieder *gg*. Ausserdem siehst Du hier, dass sich die Reihen automatisch in gleich breite Teile teilen(außer - ein Wort ist ewig lang, dann passt sich diese Spalte an) und sich die Zellenhöhe der "höchsten" Eintragung anpasst. Schrift positionieren innerhalb der Zelle: Text links - align="left" (rechts=right, mitte=center) Text oben - valign="top" (unten=bottom, mitte=center)
Wenn Du eine automatische Anpassung nicht willst, musst Du die Breite und Höhe der Zellen und Reihen genau definieren. Reihenhöhe - height=
Ich hab´das jetzt für die ersten 2Reihen gemacht. Wenn ein überlanges Wort geschrieben wird, sei Dir klar, dass die Zelle sich dann wieder anpasst. Silbentrennung kennt sie nicht. Mit width(Breite) und height(Höhe) kannst Du jeder table(Tabelle), jeder tr(Tabellenreihe) und jeder td(Zelle) eine bestimmte Grösse geben.
Oder einen eigenen Rahmen. Hier wurde wieder mit dem neuen Code gearbeitet.
Es gibt vier Arten von Rändern: solid - eine Linie dashed - Striche dotted - Punkte border="0" - kein Rahmen
Wenn man keine Tabebelle mit gleichmäßiger Zellen- und Reihenverteilung haben will, muss man folgende Befehle eingeben: colspan: eine Zelle spannt sich über mehrere Spalten. Klappt nur, wenn die Tabelle mindestens so viele Spalten besitzt wie angegeben.
rowspan: eine Zelle spannt sich in einer Spalte über mehrere Zeilen. Klappt nur, wenn die Tabelle mindestens so viele Zeilen besitzt wie angegeben.
Um jetzt die Verwirrung endgültig ins Maximum zu steigern gibt es auch noch die Möglichkeit den Abstand vom Tabellenrand zu und zwischen den einzelnen Zellen zu definieren: cellspacing Und auch der Abstand vom Zellenrand zum Text kann definiert werden: cellpadding Egal, was man euch einreden möchte, cellspacing und cellpadding sind nicht für eine Einteilung der Zellen und Reihen gedacht!
Hier noch ein Beispiel für 2 Tabellen nebeneinander:
Im Grossen und Ganzen, geht allerdings nichts über ausprobieren.
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2012.
® denotes Reg. US Pat. & TM Office.
All rights reserved.
PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions
