Convertir Tabla HTML a CSS

[eragas]

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,

[bkolores]

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

[Boadicea]

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.

[C2am]

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.

[Portgaz]

Iniciado por eragas

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

[poltero]

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!

[deibiz1]

¿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:

<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

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.