Fischstäbchen
erst war er da... muss ich noch mal wieder ändern, weil ich in Konflikt kam mit dem Rent-Lay, das es sein sollte XD
am 29.06.2007 um 14:18 Uhr
Grafiken Flash HTML & CSS PHP & MySQL Javascript Fertige Skripte Anderes Statistik
|
|
Anzeigen
|
9x bewertet
Hier geht es darum, ein einfaches Table-Layout zu coden (also ohne CSS-Auslagerung etc). Tables kann man kompliziert und einfach zusammensetzen,
jedenfalls sind sie ab und zu recht praktisch.
Was braucht man für ein Table? Wenn man es sich einfach machen möchte, braucht man einen Header,
d.h. z.B. ein Bild, das oben an das Layout soll. Oder/und auch einen Footer, der das Layout abschließt.
In diesem Fall ist das Layout folgendermaßen aufgebaut:
Schließt also Header, Navigation, Content (Inhalt) und Footer ein.
1. Zunächst benötigt man einen Header. Im einfachsten Fall ein quadratisches Bild, das man nach
Wunsch gestalten kann. In diesem Beispiel nehme ich folgenden Header: klick
2. Das, was man nun beachten sollte, ist die Größe des Headers. In diesem Fall 800*309 Pixel (Breite mal Höhe)
Das sagt aus, dass der Table gesamt 800 Pixel breit ist und auch der Footer dementsprechend breit sein sollte.
3. Der Einfachheit halber nehme ich folgendes als Footer: klick Dieser ist
800*25 Pixel groß.
4. Jetzt haben wir die entsprechenden Bilder für das Table. Wer möchte, kann auch noch einen Hintergrund
entwerfen z.B. mithilfe von Pattern. Allerdings kann man auch einfach irgendeine Farbe wählen.
5. Nun sollte man sich überlegen, was man als Farben für die einzelnen Spalten wählt. Wie bei einer
Tabelle (=Table) gibt es Zeilen und Spalten. Betrachtet man den Aufbau, erkennt man, dass in der
mittleren Zeile (beim Content etc) 5 Spalten sind, darüber und darunter jeweils eine. Die kleinen
Spalten dienen dabei dazu, das ganze etwas schöner zu gestalten, wer möchte, kann sie auch weglassen.
6. Ich habe mir jetzt z.B. überlegt, dass die kleinen Spalten weiß (#FFFFFF) werden sollen und Navigation
und Content mit der Farbe #E9E9E9 (ein helles Grau) gefüllt werden sollen.
7. Jetzt kommen wir zum eigentlichen Teil (vorher wollte ich nur ein paar Überlegungen vermitteln)
und somit zum Coden.
8. Ich gehe jetzt mal davon aus, dass ihr wisst, wie sich eine html-Seite zusammensetzt, ansonsten
ist das hier nachzulesen. Auch auf CSS werde ich nicht weiter eingehen, da es im einfachen
Fall nicht anders ist, als bei anderen Layout-Arten.
9. Zunächst beginnen wir also damit, das Table zu öffnen:
Hier öffnet man das Table und stellt Breite, Abstände, sowie Rand ein. Da der Header 800px breit
ist und ich weder Abstände noch Rand wünsche, steht dort nur 0.
10. Danach kommt die erste Zeile, also der Header:
<tr> = Anfang einer neuen Zeile
<td> = Anfang einer neuen Spalte
Hier werden als Spaltenhöhe 309px angegeben und die Anzahl der Spalten, die maximal in einer
Zeile auftauchen, beträgt 5, daher colspan = "5". Als Hintergrund geben wir den Header an, also
header.jpg
11. Damit ist der Header fertig und wir kommen zu Navigation und Content.
Durch <tr> wird wieder eine neue Spalte angefangen, sowie durch <td> eine neue Zeile. Als valign
wird "top" angegeben, was nötig ist, sowie als Ausrichtung (align) "left", also links. Die Breite
beträgt bei der ersten Spalte 10(px) und der Hintergrund ist weiß (bgcolor). Diese Spalte dient
dazu, die Navigation nicht direkt an den Rand zu quetschen.
Darunter wird eine neue Spalte begonnen, diesmal die Navigation, die 200px breit ist und deren
Hintergrund das weiter oben genannte, helle Grau ist. Hier steht Navigation drin. Eure Links und
Überschriften müssen demnach zwischen die <td></td>-Tags.
12. Genauso gehen wir bei den restlichen zwei Zwischenräumen und dem Content vor. Die Breite
der einzelnen Spalten summiert ergibt 800. Um die gewünschte Breite des Tables zu erreichen, sollte
man vorher berechnen, wie breit die einzelnen Spalten sein sollten, damit die Gesamtgröße
erreicht wird.
13. Am Ende steht nun der Footer, der das Table abschließt. Die Höhe beträgt 25px und colspan 5,
d.h. es gibt maximal 5 Spalten im Table. valign="middle" ist zwangsweise und der Hintergrund
eben footer.jpg
Gesamt sieht das ganze nun so aus: klick
Jetzt kann man sich um CSS etc kümmern. Das zu erläutern, würde wohl den Rahmen sprengen
an dieser Stelle.
mehr zu CSS: Grundlagen & Anwendungen
Bei Fragen PN
jedenfalls sind sie ab und zu recht praktisch.
Was braucht man für ein Table? Wenn man es sich einfach machen möchte, braucht man einen Header,
d.h. z.B. ein Bild, das oben an das Layout soll. Oder/und auch einen Footer, der das Layout abschließt.
In diesem Fall ist das Layout folgendermaßen aufgebaut:
Schließt also Header, Navigation, Content (Inhalt) und Footer ein.
1. Zunächst benötigt man einen Header. Im einfachsten Fall ein quadratisches Bild, das man nach
Wunsch gestalten kann. In diesem Beispiel nehme ich folgenden Header: klick
2. Das, was man nun beachten sollte, ist die Größe des Headers. In diesem Fall 800*309 Pixel (Breite mal Höhe)
Das sagt aus, dass der Table gesamt 800 Pixel breit ist und auch der Footer dementsprechend breit sein sollte.
3. Der Einfachheit halber nehme ich folgendes als Footer: klick Dieser ist
800*25 Pixel groß.
4. Jetzt haben wir die entsprechenden Bilder für das Table. Wer möchte, kann auch noch einen Hintergrund
entwerfen z.B. mithilfe von Pattern. Allerdings kann man auch einfach irgendeine Farbe wählen.
5. Nun sollte man sich überlegen, was man als Farben für die einzelnen Spalten wählt. Wie bei einer
Tabelle (=Table) gibt es Zeilen und Spalten. Betrachtet man den Aufbau, erkennt man, dass in der
mittleren Zeile (beim Content etc) 5 Spalten sind, darüber und darunter jeweils eine. Die kleinen
Spalten dienen dabei dazu, das ganze etwas schöner zu gestalten, wer möchte, kann sie auch weglassen.
6. Ich habe mir jetzt z.B. überlegt, dass die kleinen Spalten weiß (#FFFFFF) werden sollen und Navigation
und Content mit der Farbe #E9E9E9 (ein helles Grau) gefüllt werden sollen.
7. Jetzt kommen wir zum eigentlichen Teil (vorher wollte ich nur ein paar Überlegungen vermitteln)
und somit zum Coden.
8. Ich gehe jetzt mal davon aus, dass ihr wisst, wie sich eine html-Seite zusammensetzt, ansonsten
ist das hier nachzulesen. Auch auf CSS werde ich nicht weiter eingehen, da es im einfachen
Fall nicht anders ist, als bei anderen Layout-Arten.
9. Zunächst beginnen wir also damit, das Table zu öffnen:
<html><head>
<!---CCS STYLESHEET-->
<link href="style.css" rel="stylesheet">
<!---TITEL--->
<title>TITEL</title></head>
<body>
<body topmargin="0" leftmargin="0" background="#969497" bgcolor="#969497">
<!---TABLE-->
<table width="800" cellpadding="0" cellspacing="0" border="0">
Hier öffnet man das Table und stellt Breite, Abstände, sowie Rand ein. Da der Header 800px breit
ist und ich weder Abstände noch Rand wünsche, steht dort nur 0.
10. Danach kommt die erste Zeile, also der Header:
<tr>
<td height="309" colspan="5" background="header.jpg">
</td>
</tr>
<tr> = Anfang einer neuen Zeile
<td> = Anfang einer neuen Spalte
Hier werden als Spaltenhöhe 309px angegeben und die Anzahl der Spalten, die maximal in einer
Zeile auftauchen, beträgt 5, daher colspan = "5". Als Hintergrund geben wir den Header an, also
header.jpg
11. Damit ist der Header fertig und wir kommen zu Navigation und Content.
<tr>
<td width="10" valign="top" align="left" bgcolor="#FFFFFF">
</td>
<td width="200" valign="top" align="left" bgcolor="#E9E9E9">
<h1>Navigation</h1>
</td>
Durch <tr> wird wieder eine neue Spalte angefangen, sowie durch <td> eine neue Zeile. Als valign
wird "top" angegeben, was nötig ist, sowie als Ausrichtung (align) "left", also links. Die Breite
beträgt bei der ersten Spalte 10(px) und der Hintergrund ist weiß (bgcolor). Diese Spalte dient
dazu, die Navigation nicht direkt an den Rand zu quetschen.
Darunter wird eine neue Spalte begonnen, diesmal die Navigation, die 200px breit ist und deren
Hintergrund das weiter oben genannte, helle Grau ist. Hier steht Navigation drin. Eure Links und
Überschriften müssen demnach zwischen die <td></td>-Tags.
<td width="10" valign="top" align="left" bgcolor="#FFFFFF">
</td>
<td width="570" valign="top" align="left" bgcolor="#E9E9E9">
<h1>Content</h1>
</td>
<td width="10" valign="top" align="left" bgcolor="#FFFFFF">
</td></tr>
12. Genauso gehen wir bei den restlichen zwei Zwischenräumen und dem Content vor. Die Breite
der einzelnen Spalten summiert ergibt 800. Um die gewünschte Breite des Tables zu erreichen, sollte
man vorher berechnen, wie breit die einzelnen Spalten sein sollten, damit die Gesamtgröße
erreicht wird.
<tr>
<td height="25" colspan="5" valign="middle" align="left" background="footer.jpg"></td>
</tr>
</table>
<!---TABLE ENDE--->
</body></html>
13. Am Ende steht nun der Footer, der das Table abschließt. Die Höhe beträgt 25px und colspan 5,
d.h. es gibt maximal 5 Spalten im Table. valign="middle" ist zwangsweise und der Hintergrund
eben footer.jpg
Gesamt sieht das ganze nun so aus: klick
Jetzt kann man sich um CSS etc kümmern. Das zu erläutern, würde wohl den Rahmen sprengen
an dieser Stelle.
mehr zu CSS: Grundlagen & Anwendungen
Bei Fragen PN
7 Kommentare
tolles tutorial!!
Ich hab schon seit ewigkeiten ein verständliches table-tutorial gesucht, danke!!!
Ich hab schon seit ewigkeiten ein verständliches table-tutorial gesucht, danke!!!
am 04.08.2007 um 12:24 Uhr
Nobi
Die Links im Tut sind tot leider bitte ändern ^^ Sonst ist es es super gelungen :P
am 18.10.2007 um 14:36 Uhr
Lil E
Danke, das ist das erste Table-Layout-Tutorial, das ich so richtig verstehe, ich hab es zwar bis jetzt immer irgendwie geschafft, aber jetzt kapier ich auch, was ich mache! Danke! Nur wie gesagt schade, dass die Links nicht funktionieren...
am 31.10.2007 um 19:31 Uhr
Fischstäbchen
kommt daher, dass der Server verreckt ist XD Ich muss das Layout mal neu suchen...
am 01.12.2007 um 21:30 Uhr
die links sind tot o.O kannst du das ändern?
am 24.05.2009 um 02:33 Uhr
Sayuri
BEi der vorschau fehlt aber der Footer ;) aber ansosnten tollen tut ^^