Aplicar estilos css a tabla

manuelal silva · 17 Feb 2011, 17:18 · Solicitar retirada

Buen día - por favor colaborar con el siguiente tema:
Estoy tratando de insertar una tabla en mis páginas con aplicación de estilos por medio de la hoja de estilos, a continuación pego lo que tengo hecho, por favor ayudarme a completar o indicarme paso a paso como hacerlo, porque no puedo solo:

<table id="hoteles-venta-tabla">
<tr>
<td class="uno"> </td>
<td class="dos"> </td>
</tr>
<tr>
<td class="uno"> </td>
<td class="dos"> </td>
</tr>
<tr>
<td class="uno"> </td>
<td class="dos"> </td>
</tr>
<tr>
<td class="uno"> </td>
<td class="dos"> </td>
</tr>
<tr>
<td class="uno"> </td>
<td class="dos"> </td>
</tr>
<tr>
<td class="uno"> </td>
<td class="dos"> </td>
</tr>
<tr>
<td class="uno"> </td>
<td class="dos"> </td>
</tr>
<tr>
<td class="uno"> </td>
<td class="dos"> </td>
</tr>
<tr>
<td class="uno"> </td>
<td class="dos"> </td>
</tr>
<tr>
<td class="uno"> </td>
<td class="dos"> </td>
</tr>
</table>

No sé si debo encerrar en un div

La parte pertinente de la hoja de estilos está así:

#hoteles-venta-tabla {background-color: #FFFFFF ; width:770px ; height: ..0px }
#td.uno {background-color: #CCCCFF ; width:30%px ; height: 80px }
#td.dos {background-color: #CC99FF ; width:60% ; height: 80px }

arigrodriguez1201 · 17 Feb 2011, 20:55 · Solicitar retirada

Lo que debes hacer en la hoja de estilos es lo siguiente:
#hoteles-venta-tabla {background-color: #FFFFFF ; width:770px}
.uno {background-color: #CCCCFF; width:30% ; height: 80px }
.dos {background-color: #CC99FF; width:60% ; height: 80px }

y en la página html lo siguiente
<div id="hoteles-venta-tabla"
<table>
<tr>
<td class="uno"; width:30%px ; height: 80px> </td>
<td class="dos"; width:30%px ; height: 80px> </td>
</tr>
<tr>
<td class="uno"> </td>
<td class="dos"> </td>
</tr>
<tr>
<td class="uno"> </td>
<td class="dos"> </td>
</tr>
<tr>
<td class="uno"> </td>
<td class="dos"> </td>
</tr>
<tr>
<td class="uno"> </td>
<td class="dos"> </td>
</tr>
<tr>
<td class="uno"> </td>
<td class="dos"> </td>
</tr>
<tr>
<td class="uno"> </td>
<td class="dos"> </td>
</tr>
<tr>
<td class="uno"> </td>
<td class="dos"> </td>
</tr>
<tr>
<td class="uno"> </td>
<td class="dos"> </td>
</tr>
<tr>
<td class="uno"> </td>
<td class="dos"> </td>
</tr>
</table>
</div>

Lo rojo lo repites en todos los td.

Espero te sirva.

manuelal silva · 18 Feb 2011, 00:14 · Solicitar retirada

Hola Arig - gracias por responderme.
Aparentemente hice los que me dices, pero los resultados puedes ver en el siguiente vínculo: http://hotelesventa.com/tablados.htm

La parte de la hoja de estilos está así:
#hoteles-venta-tabla {background-color: #FFFFFF ; width:770px}
.uno {background-color: #CCCCFF; width:30% ; height: 8px }
.dos {background-color: #CC99FF; width:60% ; height: 8px }

He tenido que corregir unos errores míos, por ejemplo el alto es solo 8, en cuanto al ancho, las celdas uno los pongo 30px y las celdas 2 las pongo 60px, porque pretendo que sean dos columnas una de 30 y la otra de 60 cada una con 10 celdas.
Por favor dejo en tus manos y en las de los demás expertos

manuelal silva · 18 Feb 2011, 00:20 · Solicitar retirada

Perdón, quiero decir 30% y 60%
Ya estoy mareado, pero si es necesario lo pasamos a pixeles en lugar de porcentajes

JorGens · 18 Feb 2011, 00:34 · Solicitar retirada

Te hablo de cabeza, hace tiempo que no uso estilos en tablas, pero... mira a ver qué ocurre poniendo a una 30% y a la otra simplemente el valor auto, es decir, width:auto

y nos cuentas. A ver si saco un momentito y lo miro a fondo

JorGens · 18 Feb 2011, 00:36 · Solicitar retirada

Hey hey! no has cerrado el primer div!

<div id="hoteles-venta-tabla">

JorGens · 18 Feb 2011, 00:37 · Solicitar retirada

Y elimina todo estilo aplicado directamente en el HTML, que para eso estás usando los estilos, no?

En html solo contenido, sin preocuparte de la forma que tomen. Y con estilos les das el toque que desees de tamaños, colores, posición. Esa es la clave!

manuelal silva · 18 Feb 2011, 02:13 · Solicitar retirada

Ya lo hice según tus instrucciones, sigue el problema, también he puesto un fondo para que facilite encontrar errores - puedes verlo aquí: http://hotelesventa.com/tablados.htm
Gracias por tu ayuda Jorgens

manuelal silva · 18 Feb 2011, 02:18 · Solicitar retirada

Estos son los estilos con auto

#hoteles-venta-tabla {background-color: #FFFF99 ; width:770px}
.uno {background-color: #CCCCFF; width:30% ; height: 8px }
.dos {background-color: #CC99FF; width: auto ; height: 8px }

Yaneth · 18 Feb 2011, 19:34 · Solicitar retirada

pero... cuanto mide la tabla??????
debes ponerle ancho fijo a la tabla principal

luego ya le pones el ancho necesario a las celdas,

<table width="770px">

saludos

manuelal silva · 19 Feb 2011, 03:53 · Solicitar retirada

Hola Yaneth
Con tu ayuda avancé bastante. Hay algo que no pude, necesito que toda la tabla se centre en la hoja. Así está la hoja de estilos, por favor ayúdame, también necesito poner hover por filas al pasar el cursor - gracias de antemano

#hoteles-venta-tabla {background-color: #FFFF99 ; width:770px ; table-align: center}
.uno {background-color: #CCCCFF; width: auto ; height: 8px ; text-align: left }
.dos {background-color: #CC99FF; width: auto ; height: 8px ; text-align: left }
.tres {width: 30% }
.cuatro {width: 70% }

Yaneth · 19 Feb 2011, 16:46 · Solicitar retirada

hola
es que estás mezclando órdenes

#hoteles-venta-tabla {background-color: #FFFF99 ; width:770px ; table-align: center}

en body, ya tienes la orden de que todo lo que esté en la web, deberá estar centrado
pero te falta una cosa en esa página de prácticas
no la has metido dentro del div global

si lo haces, verás como se soluciona
saludos

manuelal silva · 19 Feb 2011, 20:33 · Solicitar retirada

Supuestamente ya hice las correcciones, pero nada: file:///C:/Mis%20Sitios/hotelesventa/tablados.htm

Esto es toda la joja de estilos:
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
text-align: center}
body { background-color: #CDB38B ; text-align: center }
#global { width:800px ; ; margin:0px auto }
#curva-superior { background-image: url(images/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:12px ; font-size: 16px }
#navegacion {background-color: #DCDCDC ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 100px }
#contenido {background-color: #FFFFFF ; border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px }
#menu {width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(images/curva-inferior-menu.gif);
background-position: bottom ;
padding-bottom:5px }
#menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;
background-image: url(images/curva-superior-menu.gif) }
#hoteles-venta { BACKGROUND-COLOR:#FFFFFF ; MARGIN:0px auto 0px auto; PADDING: 2px 2px 2px 2px ; WIDTH:790px ; HEIGHT: 255PX; BORDER:#000 0px solid ; }
#hoteles { BACKGROUND-COLOR:#FFFFFF ; MARGIN:0px 4px 0px 2px ; WIDTH:350px ; FLOAT:left ; HEIGHT: 252PX ; BORDER: #000 0px solid ; TEXT-ALIGN:left ; }
#venta { BACKGROUND-COLOR:#FFFFFF ; MARGIN:0px 0px 0px 4px ; WIDTH:350px ; FLOAT:right ; HEIGHT: 252PX ; BORDER: #000 0px solid ; TEXT-ALIGN:justify ; }

#hoteles-venta-tabla {background-color: #FFFF99 ; width:770px }
.uno {background-color: #CCCCFF; width: auto ; height: 8px ; text-align: left }
.dos {background-color: #CC99FF; width: auto ; height: 8px ; text-align: left }
.tres {width: 30% }
.cuatro {width: 70% }

#pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ;
border-top: black 1px solid ; height: 80px }
#pie li {list-style: none ; font-size: 12px}
#pieuno {float:left ; width:150px }
#piedos {float:left ; width:180px }
#pietres {float:left ; width:160px }
#piecuatro {float:left ; width:160px }
#piecinco {float:left ; width:120px }
#curva-inferior { background-image: url(images/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}

Gracias por tu interés en ayudarme a solucionar

Yaneth · 21 Feb 2011, 17:20 · Solicitar retirada

pero dime, que es lo que ves mal????

manuelal silva · 23 Feb 2011, 00:38 · Solicitar retirada

No puedo centrar la tabla, mírala por favor http://hotelesventa.com/tablados.htm

Yaneth · 23 Feb 2011, 16:58 · Solicitar retirada

agregale

margin: 0px auto

al div #hoteles-venta-tabla

saludos