Hier erkläre ich euch wie man Tabellen codet und was es für Möglichkeiten dazu gibt!Wir fangen zunächst mit ganz simplen Befehlen an:
<table> = Kennzeichnet den Anfang einer Tabelle
<tr> = Kennzeichnet den Anfang einer Reihe
<td> = Kennzeichnet den Anfang einer Spalte
Im Grunde gibt es nur diese drei Hauptelemente in einer Tabelle, die ergänzt werden können. Wenn man also eine komplexe Tabelle aufbauen will, muss man zunächst schauen wieviele Reihen und Spalten jeweils eine Tabelle hat und dann mit einem Aufbau beginnen. Ich rate hierfür auch einfach einen Zettel, den man sich nimmt und grob aufmalt welche Zeilen und Spalten später zu einer großen zusammengefasst werden, aber das Zusammenfassen erkläre ich später.
Von den Grundwerten ausgehend sieht unsere zweispaltige und zweireihige Tabelle nun so aus:
<table>
<tr>
<td>Spalte 1 in Reihe 1</td>
<td>Spalte 2 in Reihe 1</td>
</tr>
<tr>
<td>Spalte 1 in Reihe 2</td>
<td>Spalte 2 in Reihe 2</td>
</tr>
</table>
Diese Tabelle ist aber nun garnicht bearbeitet und zu simpel für uns, also wollen wir mal ein wenig damit spielen ^^ Es gibt folgende Wehrte, die man in den <TABLE>-Tag schreiben kann:
» background="Bild.jpg" = Für die GANZE Tabelle ein Hintergrund
» bgcolor="#FARBE" = Für die ganze Tabelle eine Hintergrundfarbe
» border="0" = Border bedeutet RAND, hier habe ich den Rand auf 0 gestellt, wenn man den Rand auf eine Zahl stell, sollte man diesem auch eine Farbe geben (bordercolor="#farbe")
» cellpadding="0" = In der ganzen Tabelle sind das die INNEREN Abstände in der Tabelle
» cellspacing="0" = Abstände in den Zell-Zwischenräumen
» height="ZAHL" = Höhe der ganzen Tabelle
» width="ZAHL" = Breite der ganzen Tabelle
Es gibt noch ein paar mehr, aber diese sind die wichtigsten ;)
Folgende Werte kann man in den <TR>-Tag schreiben:
» bgcolor="#farbe" = Für die ganze Tabellenreihe eine Hintergrundfarbe
Auch hier gibt es noch ein paar andere Erweiterungen, aber diese hier reicht uns aus :)
Folgende Werte kann man in den <TD>-Tag schreiben:
» bgcolor="#farbe" = Für die eine einzelne Tabellenzelle eine Hintergrundfarbe
» align="left/right/center/justify" = Textausrichtung links (left), rechts (right), zentriert (center) und blocksatz (justify)
» valign="top/middle/bottom" = Textausrichtung vertikal oben (top), mittig (middle) und unten (bottom)
» background="Bild.jpg" = Für die Tabellenzelle ein Hintergrund
» bgcolor="#FARBE" = Für die Tabellenzelle eine Hintergrundfarbe
» border="0" = Border bedeutet RAND, hier habe ich den Rand auf 0 gestellt, wenn man den Rand auf eine Zahl stell, sollte man diesem auch eine Farbe geben (bordercolor="#farbe")
» height="ZAHL" = Höhe der Tabellenzelle
» width="ZAHL" = Breite der Tabellenzelle
» colspan="ZAHL" = Hiermit kann man zwei Zellen, die nebenbeinander stehen zusammenfassen
» rowspan="ZAHL" = Hiermit kann man zwei Zellen, die untereinander stehen zusammenfassen
Nehmen wir nun eine Tabelle, die etwas komplexer aufgebaut ist. Diese wird einen Header haben, zudem noch innen drei Spalten, da wir dort zwei Navigationen und einen Content einbauen werden.
<table width="410" cellpadding="5" cellspacing="5" border="0">
<tr>
<td height="100" colspan="3" background="gfx/tuts/html/002/header.jpg">
</td>
</tr>
<tr>
<td width="100" valign="top" align="left">
<br>
<p><b>Navigation 1</b></p>
<p>- Link 1<br>
- Link 2<br>
- Link 3</p>
</td>
<td width="210" valign="top" align="left">
<br>
<p>Hier drinne steht der allgemeine Text lalala ^^ Nyo, halt der Content :)</p>
</td>
<td width="100" valign="top" align="left">
<br>
<p><b>Navigation 2</b></p>
<p>- Link 1<br>
- Link 2<br>
- Link 3</p>
</td>
</tr>
</table>