Foros del Web » Creando para Internet » CSS »

Dos tablas con distinto diseño en una misma página.

Estas en el tema de Dos tablas con distinto diseño en una misma página. en el foro de CSS en Foros del Web. Hola, quisiera saber si se pueden poner dos tablas, con distintos atributos, en una misma página... intento hacerlo pero se mezclan los atributos... saludos!...
  #1 (permalink)  
Antiguo 16/02/2011, 04:10
 
Fecha de Ingreso: enero-2011
Mensajes: 158
Antigüedad: 6 años, 10 meses
Puntos: 2
Dos tablas con distinto diseño en una misma página.

Hola,

quisiera saber si se pueden poner dos tablas, con distintos atributos, en una misma página... intento hacerlo pero se mezclan los atributos...

saludos!
  #2 (permalink)  
Antiguo 16/02/2011, 07:32
Avatar de leo_nqn  
Fecha de Ingreso: abril-2010
Ubicación: Neuquen
Mensajes: 461
Antigüedad: 7 años, 7 meses
Puntos: 24
Respuesta: Dos tablas con distinto diseño en una misma página.

Arma dos clases (clase 1 y 2) con diferentes atributos o caracteristicas para cada una de las tablas. luego en html definis la clase para cada una de las tablas.
<table class="clase1"></table>
<table class="clase2"></table>

Si no entendi mal tu duda espero te sirva mi respuesta Saludos!
__________________

Blog: http://leonardonqn.blogspot.com
Twitter:@Leo_FFerreyra
  #3 (permalink)  
Antiguo 16/02/2011, 12:18
 
Fecha de Ingreso: enero-2011
Mensajes: 158
Antigüedad: 6 años, 10 meses
Puntos: 2
Respuesta: Dos tablas con distinto diseño en una misma página.

Cita:
Iniciado por leo_nqn Ver Mensaje
Arma dos clases (clase 1 y 2) con diferentes atributos o caracteristicas para cada una de las tablas. luego en html definis la clase para cada una de las tablas.
<table class="clase1"></table>
<table class="clase2"></table>

Si no entendi mal tu duda espero te sirva mi respuesta Saludos!
No me sale así con clases... Puff, se me siguen mezclando, no sé cómo hacerlo :s
  #4 (permalink)  
Antiguo 16/02/2011, 12:32
Avatar de leo_nqn  
Fecha de Ingreso: abril-2010
Ubicación: Neuquen
Mensajes: 461
Antigüedad: 7 años, 7 meses
Puntos: 24
Respuesta: Dos tablas con distinto diseño en una misma página.

sabes usar css????

.clase1{
}

.clase2{
}
__________________

Blog: http://leonardonqn.blogspot.com
Twitter:@Leo_FFerreyra
  #5 (permalink)  
Antiguo 16/02/2011, 13:33
 
Fecha de Ingreso: enero-2011
Mensajes: 158
Antigüedad: 6 años, 10 meses
Puntos: 2
Respuesta: Dos tablas con distinto diseño en una misma página.

Cita:
Iniciado por leo_nqn Ver Mensaje
sabes usar css????

.clase1{
}

.clase2{
}
y sabes tu pasar esto a una ÚNICA clase??

Código HTML:
table { 
	font-size:12px;
	font-family: Arial, Helvetica, sans-serif;
	border-collapse:collapse;	
	background:#e8eef7;
	color:#000; 
	
	}
#itsthetable > table {width:99%;}
#itsthetable {
	height:500px;
	overflow:auto;
	background:#c6dbff; 
	
	text-align:left;
	}
caption { 
	height:102px;
	font-size:15px;  
	color:black; 
	
	}

	
th
tr th, tr td {border-bottom:1px solid #ccc; border-left:1px solid white}

tbody tr th  {
	width:auto;
	height:90px;
	
	}
tbody tr td  {
	height:1.7em;
	text-align:left;
	
	
	}
thead { background:#fff;}
tr th + td + td + td + td {
	
	
	font-size:0.9em; 
	} 
tr.odd th + td + td + td + td {
 

	font-size:0.9em; 
	background:none;
	} 
tfoot th, tfoot td {
	height:105px;
	font-weight:bold; 
	height:2.0em; 
	
	}
tfoot th{
	height:102px;
	}
tfoot td {height:102px;
	}
  #6 (permalink)  
Antiguo 16/02/2011, 13:41
Avatar de leo_nqn  
Fecha de Ingreso: abril-2010
Ubicación: Neuquen
Mensajes: 461
Antigüedad: 7 años, 7 meses
Puntos: 24
Respuesta: Dos tablas con distinto diseño en una misma página.

copia este codigo de nuevo con otro nombre.. y edita los parametros.. despues vas a la tabla y le pones el nombre nuevo de la clase...
__________________

Blog: http://leonardonqn.blogspot.com
Twitter:@Leo_FFerreyra
  #7 (permalink)  
Antiguo 16/02/2011, 14:39
 
Fecha de Ingreso: enero-2011
Mensajes: 158
Antigüedad: 6 años, 10 meses
Puntos: 2
Respuesta: Dos tablas con distinto diseño en una misma página.

Cita:
Iniciado por leo_nqn Ver Mensaje
copia este codigo de nuevo con otro nombre.. y edita los parametros.. despues vas a la tabla y le pones el nombre nuevo de la clase...
Pero es que no sé cómo hacer, porque si establezco table como clase, ya nor econoce que es una tabla... table tiene que estar seguro entonces, cómo se haría?

.clase1{ table{ }}?????
  #8 (permalink)  
Antiguo 16/02/2011, 15:00
Avatar de leo_nqn  
Fecha de Ingreso: abril-2010
Ubicación: Neuquen
Mensajes: 461
Antigüedad: 7 años, 7 meses
Puntos: 24
Respuesta: Dos tablas con distinto diseño en una misma página.

Ya entendi... lo que queres hacer.. las tablas las tenes en la misma hoja?
__________________

Blog: http://leonardonqn.blogspot.com
Twitter:@Leo_FFerreyra
  #9 (permalink)  
Antiguo 16/02/2011, 15:08
Avatar de leo_nqn  
Fecha de Ingreso: abril-2010
Ubicación: Neuquen
Mensajes: 461
Antigüedad: 7 años, 7 meses
Puntos: 24
Respuesta: Dos tablas con distinto diseño en una misma página.

Mira hice esto: copie el css que me pasaste y lo deje para 1 tabla, en otra hoja hice este CSS lo empeze a editar y cambio la tabla 2 solo eso.. te paso el css2 que hice.. Adjuntalo a la hoja html y despues editalo a tu gusto.

Código:
.tabla1{
	
}

table.tabla1 { 
	font-size:25px;
	font-family: Arial, Helvetica, sans-serif;
	border-collapse:collapse;	
	background:#e8eef7;
	color:#000; 
	
	}
#itsthetable > table {width:99%;}
#itsthetable {
	height:500px;
	overflow:auto;
	background:#c6dbff; 
	
	text-align:right;
	}
caption { 
	height:102px;
	font-size:15px;  
	color:black; 
	
	}

	
th
tr th, tr td {border-bottom:1px solid #ccc; border-left:1px solid white}

tbody tr th  {
	width:auto;
	height:90px;
	
	}
tbody tr td  {
	height:1.7em;
	text-align:left;
	
	
	}
thead { background:#fff;}
tr th + td + td + td + td {
	
	
	font-size:0.9em; 
	} 
tr.odd th + td + td + td + td {
 

	font-size:0.9em; 
	background:none;
	} 
tfoot th, tfoot td {
	height:105px;
	font-weight:bold; 
	height:2.0em; 
	
	}
tfoot th{
	height:102px;
	}
tfoot td {height:102px;
	}

En Html quedo asi:

Código:
<table> <td>hola</td><td>hola1</td></table>
<table class="tabla1"><td>hola22</td><td>hola331</td></table>
la que dice solo table es la comun.. y la que dice class tabla1 es la nueva para que edites espero te sirva saludos!
__________________

Blog: http://leonardonqn.blogspot.com
Twitter:@Leo_FFerreyra
  #10 (permalink)  
Antiguo 16/02/2011, 15:10
 
Fecha de Ingreso: enero-2011
Mensajes: 158
Antigüedad: 6 años, 10 meses
Puntos: 2
Respuesta: Dos tablas con distinto diseño en una misma página.

Cita:
Iniciado por leo_nqn Ver Mensaje
Ya entendi... lo que queres hacer.. las tablas las tenes en la misma hoja?
Claro, están en la misma hoja...
  #11 (permalink)  
Antiguo 16/02/2011, 17:17
Avatar de leo_nqn  
Fecha de Ingreso: abril-2010
Ubicación: Neuquen
Mensajes: 461
Antigüedad: 7 años, 7 meses
Puntos: 24
Respuesta: Dos tablas con distinto diseño en una misma página.

Funciono???
__________________

Blog: http://leonardonqn.blogspot.com
Twitter:@Leo_FFerreyra
  #12 (permalink)  
Antiguo 17/02/2011, 05:01
 
Fecha de Ingreso: enero-2011
Mensajes: 158
Antigüedad: 6 años, 10 meses
Puntos: 2
Respuesta: Dos tablas con distinto diseño en una misma página.

Cita:
Iniciado por leo_nqn Ver Mensaje
Funciono???
Hola leo, se me siguen mezclando.... siguen cogiéndose atributos una a la otra. Te pongo los códigos:

Aquí está el código de las dos tablas
Código HTML:

table {
	width: 80%;
	height:auto;
	font-family:verdana;
	font-size: 11px;
	
}

table, tr, th, td {
	padding-top: 5px;
	padding-bottom:5px;
	border-collapse: collapse;
}

tbody tr td {
	
	color:white;
	text-align:left;	
}

tbody tr td:hover{
	color: #D0F5A9;
}

.tipo1{
	color:white;
	Font-weight:bold;
	}
	
/*A continuación se establecen los vaores de la tabla de productos*/


.tabla1{
}

table.tabla1 { 
	font-size:11px;
	font-family: Arial, Helvetica, sans-serif;
	border-collapse:collapse;	
	background:#e8eef7;
	color:#000; 
	
	}
#itsthetable > table {width:99%;}
#itsthetable {
	height:500px;
	overflow:auto;
	background:#c6dbff; 
	font-size:11px;
	text-align:left;
	}
caption { 
	height:102px;
	font-size:11px;  
	color:black; 
	
	}

	
th
tr th, tr td {border-bottom:1px solid #ccc; border-left:1px solid white}

tbody tr th  {
	width:auto;
	height:90px;
	
	}
tbody tr td  {
	height:1.7em;
	text-align:left;
	
	
	}
thead { background:#fff;}
tr th + td + td + td + td {
	
	
	font-size:0.9em; 
	} 
tr.odd th + td + td + td + td {
 

	font-size:11px; 
	background:none;
	} 
tfoot th, tfoot td {
	height:105px;
	font-weight:bold; 
	height:2.0em; 
	
	}
tfoot th{
	height:102px;
	}
tfoot td {height:102px;
	}
Aquí el html:
Código HTML:
<div id="itsthetable">
	
	

<table class="tabla1"><caption></caption>

<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>

<tbody>
<tr>
<th></th>
<td></td>
</table>

</div>
</div>

	<div id="contenidobotones">

		<table class="centrar">

		<tbody>

		<tr>
		<td></td>
		<td></td>
		
		</tr></tr>
</table> 
  #13 (permalink)  
Antiguo 17/02/2011, 10:30
 
Fecha de Ingreso: enero-2011
Mensajes: 158
Antigüedad: 6 años, 10 meses
Puntos: 2
Respuesta: Dos tablas con distinto diseño en una misma página.

Nadie sabe cómo mostrar dos tablas de diferente diseño en una misma página?¿?¿?¿?¿
  #14 (permalink)  
Antiguo 17/02/2011, 13:04
Avatar de leo_nqn  
Fecha de Ingreso: abril-2010
Ubicación: Neuquen
Mensajes: 461
Antigüedad: 7 años, 7 meses
Puntos: 24
Respuesta: Dos tablas con distinto diseño en una misma página.

Tenes algun diseño en particular?? alguna forma de hacerla?? para mañana te puede dejar algo.. estoy estoy a mil por hora.. entre para pedirte eso.. si tenes alguna idea .. de como hacerla explicame cada tabla.. o que le queres editar.. y te lo hago esta noche para mañana.. un abrazo!
__________________

Blog: http://leonardonqn.blogspot.com
Twitter:@Leo_FFerreyra
  #15 (permalink)  
Antiguo 17/02/2011, 15:39
 
Fecha de Ingreso: julio-2010
Mensajes: 126
Antigüedad: 7 años, 5 meses
Puntos: 5
Respuesta: Dos tablas con distinto diseño en una misma página.

Es que lo unico que estas especificando unicamente a la tabla1 es lo siguiente:

Código:
table.tabla1 { 
	font-size:11px;
	font-family: Arial, Helvetica, sans-serif;
	border-collapse:collapse;	
	background:#e8eef7;
	color:#000; 
	
	}
Lo demas lo estas asignando de forma GENERAL a las 2 tablas....

Por ejemplo esto:

Código:
tr th, tr td {border-bottom:1px solid #ccc; border-left:1px solid white}

tbody tr th  {
	width:auto;
	height:90px;
	
	}
tbody tr td  {
	height:1.7em;
	text-align:left;
	
	
	}
thead { background:#fff;}
tr th + td + td + td + td {
	
	
	font-size:0.9em; 
	} 
tr.odd th + td + td + td + td {
 

	font-size:11px; 
	background:none;
	} 
tfoot th, tfoot td {
	height:105px;
	font-weight:bold; 
	height:2.0em; 
	
	}
tfoot th{
	height:102px;
	}
tfoot td {height:102px;
	}
Se le atribuye a las 2 tablas porque no estas especificando a cual darle, sino que estas dandole propiedades CSS a las etiquetas de las tablas en general... por lo tanto estas modificando a todos los tfoot, td, th, tr y tbody que hay en el html, sin importar la clase que sean, etc.

A todo esto, el CSS esta recontra desprolijo, pero lo peor es que hay cosas que estan de mas...
  #16 (permalink)  
Antiguo 17/02/2011, 15:55
 
Fecha de Ingreso: enero-2011
Mensajes: 158
Antigüedad: 6 años, 10 meses
Puntos: 2
Respuesta: Dos tablas con distinto diseño en una misma página.

Cita:
Iniciado por Ciel Ver Mensaje
Es que lo unico que estas especificando unicamente a la tabla1 es lo siguiente:

Código:
table.tabla1 { 
	font-size:11px;
	font-family: Arial, Helvetica, sans-serif;
	border-collapse:collapse;	
	background:#e8eef7;
	color:#000; 
	
	}
Lo demas lo estas asignando de forma GENERAL a las 2 tablas....

Por ejemplo esto:

Código:
tr th, tr td {border-bottom:1px solid #ccc; border-left:1px solid white}

tbody tr th  {
	width:auto;
	height:90px;
	
	}
tbody tr td  {
	height:1.7em;
	text-align:left;
	
	
	}
thead { background:#fff;}
tr th + td + td + td + td {
	
	
	font-size:0.9em; 
	} 
tr.odd th + td + td + td + td {
 

	font-size:11px; 
	background:none;
	} 
tfoot th, tfoot td {
	height:105px;
	font-weight:bold; 
	height:2.0em; 
	
	}
tfoot th{
	height:102px;
	}
tfoot td {height:102px;
	}
Se le atribuye a las 2 tablas porque no estas especificando a cual darle, sino que estas dandole propiedades CSS a las etiquetas de las tablas en general... por lo tanto estas modificando a todos los tfoot, td, th, tr y tbody que hay en el html, sin importar la clase que sean, etc.

A todo esto, el CSS esta recontra desprolijo, pero lo peor es que hay cosas que estan de mas...
Vale, y cómo hago para que la clase afecte a toda la tabla???
  #17 (permalink)  
Antiguo 18/02/2011, 04:19
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Dos tablas con distinto diseño en una misma página.

Hola:

Pues igual que defines esto.

Código CSS:
Ver original
  1. table.tabla1 {
  2.     font-size:11px;
  3.     font-family: Arial, Helvetica, sans-serif;
  4.     border-collapse:collapse;  
  5.     background:#e8eef7;
  6.     color:#000;
  7. }

deberás definir las propiedades que afecten a las celdas de esa tabla.

Código CSS:
Ver original
  1. tr.tabla1 {
  2.     ...;
  3. }
  4.  
  5. td.tabla1 {
  6.     ...;
  7. }

Saludos.

  #18 (permalink)  
Antiguo 18/02/2011, 08:15
 
Fecha de Ingreso: febrero-2011
Ubicación: Evolandia
Mensajes: 103
Antigüedad: 6 años, 10 meses
Puntos: 10
Respuesta: Dos tablas con distinto diseño en una misma página.

Otra manera también de definir las clases sin especificar q sea una tabla necesariamente y q no afecten a las demás celdas podría ser:

CSS:
.tabla1 {...}
.tabla1 td {...}
.tabla1 th {...}

<table class="tabla1"> ... </table>

así solo se afectará a los td's, th's q esten dentro la clase lo mismo para la clase .tabla2
  #19 (permalink)  
Antiguo 18/02/2011, 18:01
 
Fecha de Ingreso: enero-2011
Mensajes: 158
Antigüedad: 6 años, 10 meses
Puntos: 2
Respuesta: Dos tablas con distinto diseño en una misma página.

Voy a probar, os contaré qué tal
  #20 (permalink)  
Antiguo 19/02/2011, 04:12
 
Fecha de Ingreso: enero-2011
Mensajes: 158
Antigüedad: 6 años, 10 meses
Puntos: 2
Respuesta: Dos tablas con distinto diseño en una misma página.

Ya lo he conseguido mediante clases... he tenido que asignar una clase tanto a una tabla como a la otra para que me funcionara.

Gracias a todos por la ayuda!

Etiquetas: diseño, distinto, dos, tablas
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 12:52.