CSS auf eine tabelle beschränkt

hallo

kann mir jemand erklären wie genau man ein css style auf nur eine tabelle einsetzen kann, anstatt gleich auf die ganze website? ich habe es schon mit zich möglichkeiten und tags versucht jedoch erfolgslos. versucht habe ich es mit class, dann mit span und style.

das ganze sieht so aus das ich eine haupt tabelle habe, die die eigentliche website bildet. diese ist schon mit farben und grafiken designt und soll vom CSS unberührt bleiben. innerhalb der haupt tabelle habe ich dann eine weitere tabelle die für daten zuständig ist und diese möchte ich nun mit dem CSS style schmücken. diese daten tabelle wird durch php erzeugt falls das von relevanz ist.

ich kriege es jedoch eben wie bereits erwähnt nicht hin, mit verschiedenen tags nur diese tabelle zu designen. entweder passiert garnichts oder die ganze website kriegt den hauch von CSS style. anbei der CSS teil:

caption {font-size: 1.7em; color: #F06; text-align: left;}
table {margin: 0; padding: 0; border-collapse: collapse;}
td, th {padding: 4px 5px; border-bottom: 2px solid #EEE;}
td + td {border-left: 1px solid #FAFAFA; color: #999;}
td + td + td {color: #666; border-left: none;}
td a {color: #444; text-decoration: none; text-align: left;}
td a:hover {background: #444; color: #FFF;}
tfoot th {text-align: left;}
th {text-align: left;}
th + th {text-align: left;}
th + th + th {text-align: left;}
th a {color: #F06; text-decoration: none; font-size: 1.1em;}
th a:visited {color: #F69;}
th a:hover {color: #F06; text-decoration: underline;}
thead tr, tfoot tr {color: #555; font-size: 0.8em;}
tr {font: 11px tahoma; background: url(prettyinpink_row.png) repeat-x #F8F8F8; color: #666;}
tr:hover {background: #FFF;}

vielleicht muss ich noch dazu erwähnen das die website ansich bereits durch ein CSS style geschmückt wird. dieses ist jedoch nur für links zuständig und wird direkt mit dem code <link href="datei.css" rel="stylesheet" type="text/css"> eingebettet.

ronny

verwende selektoren für class oder id - selfhtml sollte alle nötigen informationen enthalten

irgendwie will das einfach nicht. also der CSS teil sieht so aus:

#special_table
{
	caption {font-size: 1.7em; color: #F06; text-align: left;}
	table {margin: 0; padding: 0; border-collapse: collapse;}
	td, th {padding: 4px 5px; border-bottom: 2px solid #EEE;}
	td + td {border-left: 1px solid #FAFAFA; color: #999;}
	td + td + td {color: #666; border-left: none;}
	td a {color: #444; text-decoration: none; text-align: left;}
	td a:hover {background: #444; color: #FFF;}
	tfoot th {text-align: left;}
	th {text-align: left;}
	th + th {text-align: left;}
	th + th + th {text-align: left;}
	th a {color: #F06; text-decoration: none; font-size: 1.1em;}
	th a:visited {color: #F69;}
	th a:hover {color: #F06; text-decoration: underline;}
	thead tr, tfoot tr {color: #555; font-size: 0.8em;}
	tr {font: 11px tahoma; background: url(prettyinpink_row.png) repeat-x #F8F8F8; color: #666;}
	tr:hover {background: #FFF;}
}

dann die tabelle die dieses design kriegen soll wird so deklariert:

<table class = "special_table" border=\"2\" width=\"100%\">

es passiert jedoch nichts.

mantiz

Hast Du Dir mal CSS-Tutorials angesehen?

Der Code muss so (ungefähr) aussehen:

.special_table caption {font-size: 1.7em; color: #F06; text-align: left;}
.special_table table {margin: 0; padding: 0; border-collapse: collapse;}
.special_table td, th {padding: 4px 5px; border-bottom: 2px solid #EEE;}
.special_table td + td {border-left: 1px solid #FAFAFA; color: #999;}
.special_table td + td + td {color: #666; border-left: none;}
.special_table td a {color: #444; text-decoration: none; text-align: left;}
.special_table td a:hover {background: #444; color: #FFF;}
.special_table tfoot th {text-align: left;}
.special_table th {text-align: left;}
.special_table th + th {text-align: left;}
.special_table th + th + th {text-align: left;}
.special_table th a {color: #F06; text-decoration: none; font-size: 1.1em;}
.special_table th a:visited {color: #F69;}
.special_table th a:hover {color: #F06; text-decoration: underline;}
.special_table thead tr, tfoot tr {color: #555; font-size: 0.8em;}
.special_table tr {font: 11px tahoma; background: url(prettyinpink_row.png) repeat-x #F8F8F8; color: #666;}
.special_table tr:hover {background: #FFF;}
}

".special_table" deshalb, weil Du "class="special_table" schreibst. Wenn Du der Tabelle die ID "special_table" geben möchtest, dann musst Du id="special_table" schreiben und in meinem CSS das ".special_table" durch "#special_table" ersetzen.

Aber so, wie das jetzt atm versuchst ist das unsinn.

besten dank