Ver Mensaje Individual
  #4 (permalink)  
Antiguo 31/01/2012, 21:26
furoya
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años
Puntos: 317
Respuesta: "Tabla" con diseño líquido

Yo tampoco entiendo muy bien. Especialmente lo de no usar CSS. Es imposible que hoy alguien vea un documento sin CSS.

Y sin duda usaría tablas.
Dos tablas; o más si tengo más elementos para mostrar.

Me parece que tu problema es el ajuste de tamaños, porque en una tabla se hace automaticamente, pero si pones elementos a flotar, estos ajustes se pierden.

Entonces no queda otra que "medirlos" del lado cliente y reescribir los altos y/o los anchos.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript">

var anchos = 0;

function ajusta(){
var tablas = document.getElementsByTagName("table").length;

for(t=0; t<tablas; t++){
anchos = (document.getElementsByTagName("table")[t].offsetWidth > anchos)?
document.getElementsByTagName("table")[t].offsetWidth : anchos;
//alert(anchos + " " + t);
}

for(t=0; t<tablas; t++){
document.getElementsByTagName("table")[t].style.width = anchos + "px";
//alert(anchos + " " + t);
}

}

//onload = ajusta;
</script>
<style type="text/css">
table {float: left; border: 1px solid red; margin: 5px 0;}
td {border: 2px solid black; margin: 5px; text-align: center; }
</style>
</head>
<body>
<h2>Ejemplo de tablas flotantes.</h2>

<table cellpadding=0 cellspacing=0><tbody>
<tr><td>Alberto Contreras</td></tr><tr>
<td><img src="http://img502.imageshack.us/img502/470/albertocontrerasregreso.jpg" 
height=250></td></tr>
</tbody></table>

<table cellpadding=0 cellspacing=0><tbody>
<tr><td>Grondona White</td></tr><tr>
<td><img src="http://img196.imageshack.us/img196/9730/grondonawhite01.jpg" height=250></td></tr>
</tbody></table>

<div style="clear: both;">Tablas flotantes que se autoajustan por ancho de documento. 
(Habilitando el evento <code>onload</code>). Se ve el efecto al redimensionar la ventana.</div>

</body>
</html>
En el ejemplo le di a ambas imágenes la misma altura, pero como se ve, los anchos difieren. Habilitando el escript (borrar la doble barra delante de onload = ajusta;) se hace el ajuste, que para simplificar es de sólo 2 tablas, si hay que agregar otras sería distinto, pero puedes preguntar en el foro de js, si esto te sirve. Aunque no creo, por más que tu planteo no se entienda, puedo adivinar que no es lo que buscas.

acerca de dos div