Foros del Web » Creando para Internet » CSS »

Convertir Tabla HTML a CSS

Estas en el tema de Convertir Tabla HTML a CSS en el foro de CSS en Foros del Web. Estimados, en una web había puesto unso anuncios como los que ven pero en HTML, o sea con tabla..., pero es necesario convertirlo a CSS ...
  #1 (permalink)  
Antiguo 08/08/2010, 21:47
Avatar de eragas  
Fecha de Ingreso: enero-2009
Mensajes: 417
Antigüedad: 8 años, 10 meses
Puntos: 43
Convertir Tabla HTML a CSS

Estimados, en una web había puesto unso anuncios como los que ven pero en HTML, o sea con tabla..., pero es necesario convertirlo a CSS con estilos inline, he estado luchando con el CSS y la verdad no me sale, si alguien me puede instruir , sería genial.
Es que con CSS puedo lograr el espacio entre anuncios de manera uniforme.



Tabla en HTML
Código HTML:
<table width="100%" border="0">
  <tr>
    <td align="center"><a href="http://psd.tutsplus.com"><img src="http://s3.buysellads.com/1500/29443-1277299322.gif" width="200" height="125" border="0" /></a></td>
    <td align="center"><a href="http://psd.tutsplus.com"><img src="http://s3.buysellads.com/2114/24180-1272296841.jpg" alt="" width="200" height="125" border="0" /></a></td>
  </tr>
  <tr>
    <td align="center"><a href="http://scriptmafia.org"><img src="http://s3.buysellads.com/1500/18309-1268240174.jpg" alt="" width="200" height="125" border="0" /></a></td>
    <td align="center"><a href="http://scriptmafia.org"><img src="http://s3.buysellads.com/1246383/27133-1278417830.png" alt="" width="200" height="125" border="0" /></a></td>
  </tr>
  <tr>
    <td align="center"><a href="http://psd.tutsplus.com"><img src="http://s3.buysellads.com/2114/17919-1267845746.png" alt="" width="200" height="125" border="0" /></a></td>
    <td align="center"><a href="http://psd.tutsplus.com"><img src="http://s3.buysellads.com/1616/31303-1279041711.jpg" alt="" width="200" height="125" border="0" /></a></td>
  </tr>
  <tr>
    <td align="center"><a href="http://psd.tutsplus.com"><img src="http://a.imageshack.us/img30/4701/publicidadhy.png" alt="" width="200" height="125" border="0" /></a></td>
    <td align="right" valign="bottom"><a href="http://vector.tutsplus.com/"><p style="font-family:Verdana, Geneva, sans-serif; font-size: 9px; color: #791C41"> Anuncie en esta web</p></a></td>
  </tr>
</table> 
Mil gracias,
  #2 (permalink)  
Antiguo 09/08/2010, 01:04
 
Fecha de Ingreso: mayo-2008
Ubicación: Santiago-Chile
Mensajes: 253
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: Convertir Tabla HTML a CSS

primero HTML no es sinonimo de "TABLA" en html puedes hacerlo con "div o span"

2- crea un div con la clase cuadro
2.1 en el css creas la clase cuadro
2.2 le das la propiedad ancho y alto deseado
2.3 le das la propiedad de float left
2.4 le das la propiedad del margin entre cada uno.
2.5 aplicas un clear:both despues de cada 2 float o bien puedes crear undiv mayor que tenga un ancho maximo igual a la suma de ambos cuadro + el margin.

suerte... creo que tu nivel de css es bajisimo por la pregunta
te aconsejaría leer en www.librosweb.es allí aparecen las propiedades que tienes que usar... si te hago el codigo no entenderias la propiedad.

Saludos! y cuentame como te fue para hecharte una mano
  #3 (permalink)  
Antiguo 12/12/2010, 15:36
 
Fecha de Ingreso: diciembre-2010
Mensajes: 1
Antigüedad: 7 años
Puntos: 0
Respuesta: Convertir Tabla HTML a CSS

Hola,
Yo no se nada de html ni de css, pero hago tablas para algunas amigas con el writer y utilizo este código html.

(<center> <center></center><bgsound balance="0" volume="0" loop="infinite" src="http://www.fileden.com/files/2010/5/25/2869648/Fool.mp3" size="4"></center> )

para colocar música de fondo a las mismas, he querido aplicar el mismo principio para un blog que utiliza código css, pero no lo gro convertirlo.
Podrían ayudarme?

Gracias.
Saludos.
Boadicea.
  #4 (permalink)  
Antiguo 12/12/2010, 18:58
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Convertir Tabla HTML a CSS

Hola Boadicea, te recomiendo que para la próxima crees un nuevo tema para tu consulta.
En el código que muestras tienes un <center> vacío dentro de otro, lo cual infiero que: o te falta algo o simplemente sobra.
Aquí tienes material de donde consultar
www.librosweb.es
Tienes tanto html como css.
Las tablas se deben usar solo para datos tabulados.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 12/12/2010, 19:46
 
Fecha de Ingreso: diciembre-2010
Ubicación: en el fin del mundo
Mensajes: 199
Antigüedad: 7 años
Puntos: 3
Respuesta: Convertir Tabla HTML a CSS

Cita:
Iniciado por eragas Ver Mensaje
Estimados, en una web había puesto unso anuncios como los que ven pero en HTML, o sea con tabla..., pero es necesario convertirlo a CSS con estilos inline, he estado luchando con el CSS y la verdad no me sale, si alguien me puede instruir , sería genial.
Es que con CSS puedo lograr el espacio entre anuncios de manera uniforme.



Tabla en HTML
Código HTML:
<table width="100%" border="0">
  <tr>
    <td align="center"><a href="http://psd.tutsplus.com"><img src="http://s3.buysellads.com/1500/29443-1277299322.gif" width="200" height="125" border="0" /></a></td>
    <td align="center"><a href="http://psd.tutsplus.com"><img src="http://s3.buysellads.com/2114/24180-1272296841.jpg" alt="" width="200" height="125" border="0" /></a></td>
  </tr>
  <tr>
    <td align="center"><a href="http://scriptmafia.org"><img src="http://s3.buysellads.com/1500/18309-1268240174.jpg" alt="" width="200" height="125" border="0" /></a></td>
    <td align="center"><a href="http://scriptmafia.org"><img src="http://s3.buysellads.com/1246383/27133-1278417830.png" alt="" width="200" height="125" border="0" /></a></td>
  </tr>
  <tr>
    <td align="center"><a href="http://psd.tutsplus.com"><img src="http://s3.buysellads.com/2114/17919-1267845746.png" alt="" width="200" height="125" border="0" /></a></td>
    <td align="center"><a href="http://psd.tutsplus.com"><img src="http://s3.buysellads.com/1616/31303-1279041711.jpg" alt="" width="200" height="125" border="0" /></a></td>
  </tr>
  <tr>
    <td align="center"><a href="http://psd.tutsplus.com"><img src="http://a.imageshack.us/img30/4701/publicidadhy.png" alt="" width="200" height="125" border="0" /></a></td>
    <td align="right" valign="bottom"><a href="http://vector.tutsplus.com/"><p style="font-family:Verdana, Geneva, sans-serif; font-size: 9px; color: #791C41"> Anuncie en esta web</p></a></td>
  </tr>
</table> 
Mil gracias,

Si esos anuncios que mencionas, van a ser dinamicos, es decir, no variara el altura debido al contenido.

O en otras palabras, va a ser una imagen fija, podrias editar la imagen, agregarle ese marco inline.
Veo que lo tiene en tablas y asi lograr que queden en posicion uniforme y relativas una de otra.

Otra manera seria agregarle un estilo al borde de las celdas.

Pero antes dejame decir que...
Las tablas fueron concebidas para representar datos de forma tabular, no porciones de una página en diferentes celdas.

Mira este pedazo de cacho. http://www.scourdesign.com/articulos/tutoriales/css/css7.php

te servira para tus anuncios ya que son datos en forma tabular

Saludos
  #6 (permalink)  
Antiguo 13/12/2010, 02:22
 
Fecha de Ingreso: septiembre-2010
Mensajes: 20
Antigüedad: 7 años, 3 meses
Puntos: 1
Respuesta: Convertir Tabla HTML a CSS

para crear una tabla con css se hace mediante divs y la propiedad css display
con el atributo table-row creas las columnas y con table-cell las celdas.

Código:
div {

display:table-row

}
Saludos!
  #7 (permalink)  
Antiguo 13/12/2010, 02:31
 
Fecha de Ingreso: diciembre-2010
Mensajes: 19
Antigüedad: 7 años
Puntos: 0
Respuesta: Convertir Tabla HTML a CSS

¿Y que tal la opcion de hacer como lista?

Es decir creas el div y le da el ancho suficiente para 2 fotos. Le metes float:left; y asi le alinearan uno detras del otro, pero como solo entran 2 en una fila el tercero bajara abajo.

Creo que asi te ahorras el problema de meter las tablas y lo haces por css que es algo mas limpio.

Seria algo asi:

Cita:
<ul id="publicidad">
<li><src="x" />imagen1</li>
<li><src="x" />imagen2</li>
<li><src="x" />imagen3</li>
<li><src="x" />imagen4</li>
<li><src="x" />imagen5</li>
<li><src="x" />imagen6</li>
</ul>
Y en el css

Cita:
ul#publicidad{
width:aqui pones el tamaño justo para los dos archivos;
}
ul#publicidad li{
float:left;
}

Creo que de esta forma queda el codigo mas simple, y mas facil de organizarlo que con las tablas, ademas de mas facil para cambiarle el diseño.

Etiquetas: html, 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




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