Foros del Web » Creando para Internet » CSS »

Tablas Diferentes con CSS

Estas en el tema de Tablas Diferentes con CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/04/2009, 08:31
Avatar de edohen  
Fecha de Ingreso: agosto-2006
Ubicación: Bolivia
Mensajes: 181
Antigüedad: 11 años, 3 meses
Puntos: 5
Tablas Diferentes con CSS

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:

Cita:
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
__________________
Henry Mollinedo Z
Escuela Multinivel
  #2 (permalink)  
Antiguo 02/04/2009, 09:03
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Tablas Diferentes con CSS

coloca el html para ver la estructura
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 02/04/2009, 09:43
 
Fecha de Ingreso: febrero-2009
Mensajes: 472
Antigüedad: 8 años, 9 meses
Puntos: 14
Respuesta: Tablas Diferentes con CSS

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
  #4 (permalink)  
Antiguo 02/04/2009, 09:54
Avatar de edohen  
Fecha de Ingreso: agosto-2006
Ubicación: Bolivia
Mensajes: 181
Antigüedad: 11 años, 3 meses
Puntos: 5
Respuesta: Tablas Diferentes con CSS

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

Cita:
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
__________________
Henry Mollinedo Z
Escuela Multinivel
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:51.