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

[MACvsWINDOWS]

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!

[leo_nqn]

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!

[MACvsWINDOWS]

Iniciado por leo_nqn

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

[leo_nqn]

sabes usar css????

.clase1{
}

.clase2{
}

[MACvsWINDOWS]

Iniciado por leo_nqn

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;
	}

[leo_nqn]

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...

[MACvsWINDOWS]

Iniciado por leo_nqn

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{ }}?????

[leo_nqn]

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

[leo_nqn]

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!

[MACvsWINDOWS]

Iniciado por leo_nqn

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

Claro, están en la misma hoja...

[leo_nqn]

Funciono???

[MACvsWINDOWS]

Iniciado por leo_nqn

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> 

[MACvsWINDOWS]

Nadie sabe cómo mostrar dos tablas de diferente diseño en una misma página?¿?¿?¿?¿

[leo_nqn]

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!

[Ciel]

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...

[MACvsWINDOWS]

Iniciado por Ciel

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???

[jomaruro]

Hola:

Pues igual que defines esto.

Código CSS:

table.tabla1 { 
    font-size:11px;
    font-family: Arial, Helvetica, sans-serif;
    border-collapse:collapse;   
    background:#e8eef7;
    color:#000; 
}
 

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

Código CSS:

tr.tabla1 { 
    ...; 
}
 
td.tabla1 { 
    ...; 
}
 

Saludos.

[omarMusic]

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

[MACvsWINDOWS]

Voy a probar, os contaré qué tal

[MACvsWINDOWS]

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!