Diary Miss Domain Reviews Exit

News

Jules im Kino
Wishes

Currently

07.06.2oo9
müde
bewölkt
Frühstück
Biss zur Mittagsstunde
Charmed Season 1
-

Juni

M T W T F S S
1 2 3 5 6 7
8 9 11 12 13 14
15 16 18 20 21
22 23 24 25 26 27 28
29 30

Tabellen

Tabellen hören sich eigentlich sehr langweilig an, aber mit ihnen kann man viel machen und später siehts gar nicht mehr aus wie eine Tabelle.
Ich werde euch die Grundlagen und einige Beispiele (z.B. einen Kalender) beibringen.

Der Grundaufbau

Dadurch wird eine Tabelle überhaupt definiert:
<table></table>
Zeilen:
<tr></tr>
Spalten:
<td></td>
Wichtig ist das man immer einen Befehl öffnet <...> und wieder schließt </...>

Insgesamt müsste eine Tabelle so aussehen:
<table> <tr> <td> </td> </tr> </table>


Tabelle anlegen

Wir legen jetzt mal eine ganz einfache Tabelle an mit 4 Spalten und 3 Zeilen.
Diese könnte dann so aussehen:
bla blu bli blü
lala lili lolo lulu
hihi hehe haha hoho


Der Code dafür wäre:
<table border=1> <tr><td>bla</td> <td>blu</td> <td>bli</td> <td>blü</td></tr> <tr><td>lala</td> <td>lili</td> <td>lolo</td> <td>lulu</td></tr> <tr><td>hihi</td> <td>hehe</td> <td>haha</td> <td>hoho</td></tr> </table>
Sieht kompliziert aus, wenn man aber erst mal einen Überblick hat, ist es eigentlich ganz einfach.


Rahmen, Effekte, etc.

kein Rahmen: <table border="0">
gepunkteter Rahmen: <table border="dotted">
gestrichelter Rahmen: <table border="dashed">
Rahmen mit Farbe: <table bordercolor=HEX-CODE>
Rahmen-Dicke: <table border="2"> [je höher der Zahlenwert, desto dicker der Rahmen]
Tabelle mit Hintergrund: <table style="background-image: url('BILD')">


Tabelle für Menü

In meiner Beautylounge habe ich z.B. auch eine Tabelle verwendet, damit die Links nebeneinander stehen. Im Beispiel sind immer 3 Links in einer Zeile, wenn ihr aber z.B. 4 Links haben wollt, dann ersetzt ihr das 33% durch 25% und fügt jeweils noch ein <td></td><xmp> in ein <xmp><tr></tr> ein.

Farbtypen Lidschatten Lidstrich
Lippen Make-up Rouge
Wimpern



Kalender

Meinen Kalender könnt ihr natürlich an euer Design anpassen ;)

April 2oo7

M D M D F S S
1
2 4 6 7 8
9 10 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
30



© by envoutant.org