Pinoy
wooow toooooooll THX
6 Blümchen
am 08.02.2008 um 14:29 Uhr
Grafiken Flash HTML & CSS PHP & MySQL Javascript Fertige Skripte Anderes Statistik
|
|
Anzeigen
|
7x bewertet
Tabellen stylen (HTML)
von
Pham |
08.02.2008 um 13:25 h
Typ: CSS Anwendungen
Stufe:Einfach Mittelmäßig
Stufe:Einfach Mittelmäßig
Ich hoffe, es ist halbwegs verständlich erklärt, denn es ist mein erstes Tutorial auf Giatu ˆ_ˆ
Eine stinknormale Tabelle:
Styling
Nun kommen wir zum Styling.
Dort wo die 5 Sternchen sind, dort fügt ihr die folgenden Tags ein.
1.- Hintergrundfarbe ändern
Es gibt mehrere Möglichkeiten, eurer Tabelle eine Hintergrundfarbe zu verleihen. Die für Faule wäre ganz einfach mit:
Aber da wir unsere Tabelle auch noch mit anderen Dingen aufpeppen wollen, nehmen wir lieber die zweite Variante mit css:
So nun seid ihr Profis im Hintergründe einfärben ;D
2.- Hintergrundbild in der Tablle
Und wieder haben wir zwei Varianten zu Verfügung.
Die erste Möglichkeit:
die Zweite Möglichkeit:
Nun könnt ihr auch Hintergründe in eure Tabellen einbinden ˆˆ
3.- die Schrift
Vielleicht habt ihr es auch bemerkt, dass die Schrift anders aussieht, als der Text außerhalb der Tabelle. (Wenn man die Tabelle nicht gerade im CSS definiert hat!) Dies wollen wir nun ändern.
Ich hab jetzt die drei geläufigsten Schriftformatierungen genommen. Aber man kann auch weitere Tags einbinden (siehe hier).
4.- Textausrichtung
In Tabellen ist es ebenfalls möglich den Text auzurichten (logisch XD).
*für Format fügt ihr left; right oder center ein.
Noch mehr Möglichkeiten für die Textausrichtung findet ihr hier.
5.- Rand
Nun hab ich hier die letzte Formatierung per CSS für euch (die mir jetzt einfällt).
*mit einer Zahlpx bestimmt ihr die Breite des Randes
*Bei Art des Randes könnt ihr entscheiden, ob er fest, gestrichelt oder gepunktet werden soll. (Bei doppelten Rand, lasst die Breite weg!)
* mit einem Hexcode bestimmt ihr die Farbe des Randes
Ich hoffe, dieses Tutorial ist hilfreich. Nicht vergessen! Es ist mein erstes XD Nicht zu hart und nicht zu milde kritisieren!
P.S.: Falls ihr noch weitere Formatierungsvorschläge habt, dann gebt sie mir ich werde sie liebendgern in diesem Tutorial miteinbauen.
MfG Pham*
Eine stinknormale Tabelle:
<table>
<tr><td>Inhalt 1</td><td>Inhalt 2</td></tr>
<tr><td>Inhalt 3</td><td>Inhalt 4</td></tr>
</table> Styling
Nun kommen wir zum Styling.
<table *****> Dort wo die 5 Sternchen sind, dort fügt ihr die folgenden Tags ein.
1.- Hintergrundfarbe ändern
Es gibt mehrere Möglichkeiten, eurer Tabelle eine Hintergrundfarbe zu verleihen. Die für Faule wäre ganz einfach mit:
bgcolor="#HEXCODE" Aber da wir unsere Tabelle auch noch mit anderen Dingen aufpeppen wollen, nehmen wir lieber die zweite Variante mit css:
style="background-color: #HEXCODE;" So nun seid ihr Profis im Hintergründe einfärben ;D
2.- Hintergrundbild in der Tablle
Und wieder haben wir zwei Varianten zu Verfügung.
Die erste Möglichkeit:
background="URL des Hintergrundbildes" die Zweite Möglichkeit:
style="background-image: url(URL DES HINTERGRUNDBILDES);" Nun könnt ihr auch Hintergründe in eure Tabellen einbinden ˆˆ
3.- die Schrift
Vielleicht habt ihr es auch bemerkt, dass die Schrift anders aussieht, als der Text außerhalb der Tabelle. (Wenn man die Tabelle nicht gerade im CSS definiert hat!) Dies wollen wir nun ändern.
style="font-size: ZAHLpt; color: #HEXCODE; font-family: SCHRIFTART; " Ich hab jetzt die drei geläufigsten Schriftformatierungen genommen. Aber man kann auch weitere Tags einbinden (siehe hier).
4.- Textausrichtung
In Tabellen ist es ebenfalls möglich den Text auzurichten (logisch XD).
style="text-align: FORMAT;" *für Format fügt ihr left; right oder center ein.
Noch mehr Möglichkeiten für die Textausrichtung findet ihr hier.
5.- Rand
Nun hab ich hier die letzte Formatierung per CSS für euch (die mir jetzt einfällt).
style="border: ZAHLpx ART DES RANDES #HEXCODE" *mit einer Zahlpx bestimmt ihr die Breite des Randes
*Bei Art des Randes könnt ihr entscheiden, ob er fest, gestrichelt oder gepunktet werden soll. (Bei doppelten Rand, lasst die Breite weg!)
* mit einem Hexcode bestimmt ihr die Farbe des Randes
Ich hoffe, dieses Tutorial ist hilfreich. Nicht vergessen! Es ist mein erstes XD Nicht zu hart und nicht zu milde kritisieren!
P.S.: Falls ihr noch weitere Formatierungsvorschläge habt, dann gebt sie mir ich werde sie liebendgern in diesem Tutorial miteinbauen.
MfG Pham*
5 Kommentare
6 Blümchen 
Für Anfänger finde ich es ok, aber wie yvi schon sagte wäre es mit CSS einfacher (: Erstmal übersichtlicher, aber bei einer Designänderung ist das Ganze dann auch einfacher zu handhaben 
am 08.02.2008 um 14:39 Uhr
Pham
Hmm ihr habt recht...Hättet ich dazu schreiben sollen, dass es eine html Variante ist.
Vielleicht ist es ja eine Grundlage noch ein Tut dazuzuschreiben ;D
am 08.02.2008 um 14:44 Uhr
neontrauma
In CSS lässt sich das viel eleganter umsetzen. Im HTML hast du dann nur dein<table>
<tr>
<td>...</td>
</tr>
</table>
und im CSS:
table {
font: ...;
blah: ...;
blubb: ...;
}
td {
... ;
}
am 08.02.2008 um 14:48 Uhr
und sonst fänd ich das besser wenn man das styling nicht in den table-tag reinschreibt, sondern separat in die css (und dann halt mit ID oder so), das bewahrt übersichtlichkeit.