Tabelle stylen #1

von Delite | 10.06.2007 um 15:00 h

Typ: CSS Anwendungen
Stufe:Mittel

Dies ist ein Wunschtutorial. Ich zeige euch hier wie ihr so schöne Tabellen macht wie auf Giatu.
HIER ist das Beispiel.
der Quellcode dazu ist:

<html>
<head>
<title>Beispiel</title>
<style>
td { /* Gilt für alle Zellen */
font-size:11px; /* Schriftgröße */
font-family:Verdana; /* Schriftart */
color:#7A7A7A; /* Schriftfarbe */
}
.tableinborder { /* Tabelle */
background-color:#D9D9D9; /* Eigentlich Hintergrund aber auf der Tabelle der Rand! */
}
.tabletitle { /* ist der Tabletitle. Das höhste Glied *g* */
color:#338F92; /* Schriftfarbe */
background-color:#E8F6F6; /* Hintergrundfarbe */
border-top:1px solid #ffffff; /* Weisser Rand oben. lässt das Ganze 3D wirken! */
border-left:1px solid #ffffff; /* Weisser Rand links. lässt das Ganze 3D wirken! */
font-weight:bold; /* Fett gedruckt */
}
.tablecat { /* Gibt die Spaltennamen an. Kategorie halt */
background-image:url(tutorials/143_1.gif); /* Hintergrundbild */
background-repeat:repeat-x; /* wird nur wagerecht wiederholt */
background-color:#FFFFFF; /* Der Rest, falls das bild zu ende ist, weiss */
padding-left:5px; /* Abstand links */
line-height:11px; /* Linien-Abstand auch die Größe. */
font-weight:bold; /* Fett gedruckt */
}
.tablea {
background-color:#FAFAFA; /* Hintergrundfarbe. Sollte nur leicht von tableb abweichen! */
border-top:1px solid #ffffff; /* Weisser Rand oben für den 3d effekt */
border-left:1px solid #ffffff; /* Weisser Rand links für den 3d effekt */
}
.tableb {
background-color:#F5F5F5; /* Hintergrundfarbe. Sollte nur leicht von tablea abweichen! */
border-top:1px solid #ffffff; /* Weisser Rand oben für den 3d effekt */
border-left:1px solid #ffffff; /* Weisser Rand links für den 3d effekt */
}
</style>
</head>
<body>
<center>
<br />
<table cellpadding="4" cellspacing="1" border="0" width=40% class="tableinborder"><!--Padding ist der abstand vom rand aus zum text. Hier 4 könnt ihr ändern. cellspacing ist der abstand zwischen den zellen hier 1, da wir ihn füllen und als rand benutzen. klasse ist tableinborder -->
<tr>
<td align=center class="tabletitle" width=100% colspan=2><!--Klasse Tabletitle -->
Table Title
</td>
</tr>
<tr>
<td align=center class="tablecat" width=50%><!--Klasse Tablecat -->
ID
</td>
<td align=center class="tablecat" width=50%><!--Klasse Tablecat -->
Name
</td>
</tr>
<tr>
<td align=center class="tablea" width=50%><!--Klasse Tablea -->
1
</td>
<td align=center class="tableb" width=50%><!--Klasse Tableb -->
Maria
</td>
</tr>
<tr>
<td align=center class="tablea" width=50%><!--Klasse Tablea -->
2
</td>
<td align=center class="tableb" width=50%><!--Klasse Tableb -->
Lucy
</td>
</tr>
</table>
</center>
</body>
</html>

Die Kommentare erklären eigentlich auch das ganze. Weil das hier im Code etwas unübersichtlich ist, solltet ihr beim Beispiel Ziel Speichern unter machen.
Ihr könnt natürlich das was in <style> </style> steht in eine externe CSS Datei kopieren wie hier beschrieben.

Solltet ihr noch Fragen haben, dann stellt sie ;)