Tablas Diferentes con CSS

[edohen]

Amigos tengo un problemita.. Tengo como 3 tablas en mi pagina web pero quiero que se vean diferentes en la misma pagina utilizé este codigo par que esto funcione:

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color:#FFFFFF
}

.style1 {
color: #8E8E8E;
font-size: 11px;
font-family: tahoma;
text-decoration:none
}
.style2 {
color: #969693;
font-size: 11px;
font-family: tahoma
}
.style3 {
color: #7C7C7C;
font-size: 8px;
font-family: tahoma;
font-weight:bold
}
.style4 {
color: #FFEE9D;
font-size: 11px;
font-family: tahoma;
text-decoration:none
}
.style5 {
color: #303030;
font-size: 11px;
font-family: verdana;
}
.style6 {
color: #303030;
font-size: 9px;
font-family: verdana
}
.style7 {
color: #303030;
font-size: 9px;
font-family: verdana
}
.style8 {
color: #303030;
font-size: 12px;
font-family: verdana;
}
.style9 {
color: #303030;
font-size: 15px;
font-family: verdana;
}

.t01 {
color : #FFEE9D;
margin-top : 5px;
padding-bottom : 10px;
margin-bottom : 0px;
margin-left : 10px;
margin-right : 30px;
font-size : 16px;
font-family : Tahoma,Verdana,Arial;
}

/* numero*/
.texto_normal
{
font-family: verdana;
font-size: 10px;
color: #303030;
}
.texto_normal a:link {
color: #A8A8A8;
text-decoration: none;
}
.texto_normal a:visited {
color: #A8A8A8;
text-decoration: none;
}
.texto_normal a:hover {
text-decoration: none;
}
.texto_normal a:active {
text-decoration: none;
}
/*fin numero*/

.tabla_borde {
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-style: solid;
border-top-color:#303030;
border-right-color: #303030;
border-bottom-color: #303030;
border-left-color: #303030;
color: #303030;

}
.fila_1 {
background-color: #DCDBC2;
}
.fila_0 {
background-color: #EFEEE2;
}

/* numero*/
.style10_normal
{
font-family: verdana;
font-size: 15px;
color: #303030;
}
.style10_normal a:link {
color: #A8A8A8;
text-decoration: none;
}
.style10_normal a:visited {
color: #A8A8A8;
text-decoration: none;
}
.style10_normal a:hover {
text-decoration: none;
}
.style10_normal a:active {
text-decoration: none;
}
/*fin numero*/
/* contador */
.contador {
font-family: verdana;
font-size: 15px;
color: #303030;
}
.contador table{
background: #d3d2b4;
color:#023d66;
text-align:left;
font-size:12px;
border-spacing: 4px;
}
.contador table:a, table, tbody, tfoot, tr, th, td {
font-family: Verdana, arial, helvetica, sans-serif;
}
.contador table{
border-left:3px solid #567;
border-right:3px solid #000;
padding: 3px;
}
.contador table:a {
text-decoration: none;
background: inherit;
color: #ccf;
font-weight: bold;
}
.contador table a:link {
text-decoration: none;
}
.contador table a:visited {
background: inherit;
color: #66c;
text-decoration: line-through;
}
.contador table a:hover {
background: inherit;
color: #eef;
position: relative;
top: 1px;
left: 1px;
text-decoration: none;
}
.contador table caption {
border-top:1px solid #ddf;
border-left:1px solid #ddf;
border-right:1px solid #669;
border-bottom:1px solid #669;
text-align: left;
padding: 1px;
color: #ccf;
background: #99f;
font-family: georgia, "times new roman", serif;
font-size:20px;
font-weight:bold;
}
.contador table, td, th {
margin:0px;
padding:2px;
border-left:1px solid #ddf;
border-right:1px solid #669;
border-bottom:1px solid #669;
}
.contador td, th {
border-top:1px solid #ddf;
border-left:1px solid #ddf;
border-right:1px solid #669;
border-bottom:1px solid #669;
}
.contador tr.odd {
color: inherit;
background: #88e;
}

Sin embargo todas las tablas se ven afectadas por la ultima seccion que utilizé y se me desconfigura todo... debo estar haciendo algo mal un ayudita porfis.
¿Como podria separar el codigo para que mis tablas se vean diferentes? en la misma pagina?

muchas gracias

[willyfc]

coloca el html para ver la estructura

[Pinty]

Ese mismo problema lo tengo yo. He leido que se puede hacer desde div separados utilizando

#nombredeldiv table
{
}

No lo he probado aun, asi que no os puedo asegurar ningun resultado

[edohen]

Ya está ya logré solucionarlo... el error estaba en repetir table en todo lado.. si a alguien le sirve deberia ser algo asi...

aca creamos una nueva familia o no se como se llama

.tabla1 {
font-family: verdana;
font-size: 15px;
color: #303030;
}
luego llamamos a la nueva familia y a table

.table1 table{
background: #d3d2b4;
color:#023d66;
text-align:center;
font-size:13px;
border-spacing: 4px;
padding: 1px;
}

y finalmente llamamos nuevamente a table1 y despues a sus atributos en este caso TD

.table1 td {
border:#023d66 1px solid;
}

si queremos otros atributos solo bastaria llamar a table1 TR, o lo que necesiten.


Bien ahora si quisieramos poner otra tabla con otro aspecto en la misma pagina pues el codigo seria:

.tabla2 {
font-family: verdana;
font-size: 15px;
color: #303030;
}
.tabla2 table{
background: #d3d2b4;
color:#023d66;
text-align:center;
font-size:13px;
border-spacing: 4px;
padding: 1px;
}
.tabla2 td {
border:#023d66 1px solid;
}

Espero que a alguien mas le sirva...

Saludos