Tabelle mit CSS

Status
Nicht offen für weitere Antworten.

EchseKiuta

Mitglied
Hallo,

habe folgendes Problem:

Habe eine externe css datei die ich auch schon mit der html-datei verlinkt habe!

Nun möchte ich wissen was ich in die css-datei bzw. html-datei schreiben muss um eine tabelle zu bekommen! Ich möchte die Tabelle natürlich mit CSS in Grösse Farbe usw. ändern können!

Bitte um Hilfe!

Greetz Echse

P.S.: Suche habe ich benutzt. Komischerweise habe ich nicht das gefunden was ich brauche!
 
Hi,
Also erstens kommtes drauf an in welchen Browsern Deine Page "RICHTIG" dargestellt werden soll, denn das gehört an den Anfang der Überlegungen. Je nachdem, ob Du MSIE6 und Netscape7.x, aber auch Netscape 4.7x einbeziehen willst musst Du generell anderst ans Werk, denn es soll ja in jedem Browser gleich aussehen.
Nun zu Deinem Problem (wenn ich das richtige verstanden habe:

Du kannst Klassennamen mit dem Element davor nehmen ( TD.tableRowEvenGray) oder nur die Klasse ( .tableRowEvenGray ). Zweiteres ist halt besser falls Du diese Klasse sowohl in TR als auch in TD Elementen verwenden willst.
Damit Deine Tabellen per CSS Definition dargestellt werden sollen, brauchst Du (das sind nur Beispiele, OK?)...

CSS Datei(kannst das Kopieren zum testen:
------------------------------------------------------------
/* Fuer die ganze Page... */
BODY {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: black;
background-color: white;
}
/* weitere ELEMENTE... */
TD, TH, DIV, CENTER, P, SELECT {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
B { font-weight: bold; }

/* Tabellen Titel Zeile... */
.tableTitle{
background-color: #99ADC2;
color: #FFFFFF;
font-weight: bold;
}
.tableHeaderColor {
background-color: #BFCCD9;
color: #000000;
line-height:14px;
}
.tableRowOddColor { background-color: #DBE4ED; color: #000000; }
.tableRowEvenColor { background-color: #BFCCD9; color: #000000;}
/* Damit Du GENAUEN Abstand der Inhalte zum jeweiligen Zellenrand hast folgende Klassen... */
/* linke Spalte der Tabelle */
.tableLeftPadding { padding-left : 10px; padding-right : 5px;}
/* Alle inneren Spalten einer Tabelle */
.tableInnerPadding { padding-left : 5px; padding-right : 5px;}
/* Die letzte (rechte) Spalte der Tabelle */
.tableRightPadding { padding-left : 5px; padding-right : 10px;}


Nachfolgend ein Teil des Codes:
... ...
<tr>
<td style="width: 120px; vertical-align:top;" class="tableRowOddColor tableLeftPadding">Eintrag 1</td>
<td style="width: 120px; vertical-align:top;" class="tableRowOddColor tableInnerPadding">Sampletext</td>
<td style="width: 260px; vertical-align:top;" class="tableRowOddColor tableRightPadding">
... ...
Das ganze beispiel findest Du als Beilage ZIP-Datei.

Hoffe ich konnte DIr helfen.
gruss aus basel
Joel
 

Anhänge

Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück