Estructura de tabla atípica (reto)

renton · #1 (**permalink**) 13/05/2007, 16:51

Buenas Gente!

Tengo un reto, necesito crear una estructura de tabla que me permita realizar lo que, mas o menos, he intentado representar en el "esquema" de abajo.

Básicamente seria una estructura de noticia con un recuadro lateral que permita poner un titular en grande o unas cuantas fotos, pero el texto de la noticia debe "rodear" el cuadro (osea, que no queden como dos columnas perfectas, sino que la de la izquierda ocupe el lugar sobrante del de la derecha).

Y necesito hacerla con tablas, (he encontrado ejemplos de este tipo de estructura, pero realizado con divs).

Alguna idea?
Mil Gracias!

Shade · #2 (**permalink**) 14/05/2007, 07:25

Mediante tablas solamente es imposible (que yo sepa!, nunca hay que decir imposible).

webosiris · #3 (**permalink**) 18/05/2007, 09:10

Cita:

Iniciado por renton

Y necesito hacerla con tablas, (he encontrado ejemplos de este tipo de estructura, pero realizado con divs).

y porque necesitas usar tablas?

las tablas son para tabular datos, y lo que quieres hacer evidentemente no es tabular datos sino maquetar...

renton · #4 (**permalink**) 18/05/2007, 09:58

bueno, básicamente porque toda la web está programada con tablas, porque toda la vida he utilizado tablas para crear webs, porque soy programador (no maquetador ni diseñador) y no tengo ni pájara de utilizar correctamente los divs a la hora de "maquetar" y porque las veces que lo he intentado, cada browser me muestra el diseño diferente.

Raulmmmm · #5 (**permalink**) 18/05/2007, 13:00

Bueno, algo cutre sería:
<table border="0">
<tr><td colspan="2">Aquí pones el texto de encima de las noticias</td></tr>
<tr><td width="75%">Aquí pones el texto de al lado de la imagen</td><td>Aquí pones la imagen</td></tr>
<tr><td colspan="2">Aquí pones el texto de debajo</td></tr>
</table>
Es lo único que se puede hacer. Saludos

AlZuwaga · #6 (**permalink**) 18/05/2007, 15:19

Me puse a recrear esa estructura maquetándola con CSS y, la verdad, no me salió. No se si es que no se puede (lo dudo) o si estoy muy torpe hoy

programeitor · #7 (**permalink**) 19/05/2007, 18:11

hola

esto es lo maximo que he logrado componer, el texto grande se cuela por debajo de la foto, y ademas he tenido que echar mano de dos divs. espero que te valga.

Código HTML:

<html><head>
<title>tabla maquetada</title><style>
body{background:gray;margin:5%;}
table{color:black;border-collapse:collapse;}
tr{border:1px solid black;}
td{position:relative;vertical-align:top;}
.texto{
top:0px;left:0px;width:500px;height:300px;z-index:0;
border:1px solid black;padding:10px;background:white;
}
.foto{top:73px;right:121px;width:120px;z-index:1;}
.nota{top:160px;right:243px;width:120px;z-index:2;}
.foto img{width:98px;height:70px;}
div{background:white;border:1px solid black;padding:10px;}
.div1{height:90px;border-bottom:0;}
.div2{height:60px;border-top:0;}
</style></head><body>
<table>
<tr>
<td class="texto">texto grande</td>
<td class="foto"><div class="div1"><img></div></td>
<td class="nota"><div class="div2">nota</div></td>
</tr>
<tr>
<td class="texto">texto grande</td>
<td class="foto"><div class="div1"><img></div></td>
<td class="nota"><div class="div2">nota</div></td>
</tr>
</table></body></html>

saludos

programeitor · #8 (**permalink**) 20/05/2007, 14:01

Bueno, acabodever que "cuadra" namas quenel IE.

sera cuestion de CSS namas

, supongo

.