"Tabla" con diseño líquido

[danihxh]

Saludos!

Tengo una página que carga una serie de productos con sus diferentes características y mediante CSS consigo una estructura que le da un aspecto semejante al de una tabla, pero que ajusta sus filas y columnas según el ancho de la pantalla para mostrar correctamente toda la información necesaria.

Eso ahora mismo lo hago con un <div> que encierra cada producto (y le coloca un border que lo separa del resto), en el interior del cual coloco otros dos divs con float:left y width 50% o 100%, dependiendo del ancho de la ventana (esto lo hago con un media type de CSS)

El problema es que de esta manera, al mostrar la página en un navegador sin CSS, se ve todo el texto en una sola línea, algo que no queda muy bien. Había probado a hacerlo con una lista, de manera que quedase en vertical, pero tampoco me convence esta manera de mostrar los productos.

Creo que lo más apropiado sería mostrarlo en forma de tabla, pero no se me ocurre nada para conseguir el mismo comportamiento líquido al hacer una tabla HTML.

¿Alguna idea?

[kseso?]

No acabo de entender muy bien ni cuál es el problema ni qué o porqué busca otra estructura.

El problema es que de esta manera, al mostrar la página en un navegador sin CSS, se ve todo el texto en una sola línea, algo que no queda muy bien

Si está contenido en una sola etiqueta es lo lógico. Si lo contiene en varias que sean de bloque forzará varias líneas en ausencia de css.

Creo que lo más apropiado sería mostrarlo en forma de tabla, pero no se me ocurre nada para conseguir el mismo comportamiento líquido al hacer una tabla HTML.

Es que creo que es lo lógico usar una tabla si son datos que se ajustan a lo que es el cometido de las <table></table>.

Pero si quiere ensayar otro etiquetado, pruebe las "definition lists" [dl | dt | dd]. Con la ventaja añadida que podrá enlazar otras listas o elementos dentro de ella

Código HTML:

<dl>
  <dt><strong>The ingredients:</strong></dt>
  <dd>
      <ul>
          <li>100 g. flour</li>
          <li>10 g. sugar</li>
          <li>1 cup water</li>
          <li>2 eggs</li>
          <li>salt, pepper</li>
      </ul>
  </dd>
 
  <dt><strong>The procedure:</strong></dt>
  <dd>
      <ol>
          <li>Mix dry ingredients thoroughly.</li>
          <li>Pour in wet ingredients.</li>
          <li>Mix for 10 minutes.</li>
          <li>Bake for one hour at 300 degrees.</li>
      </ol>
  </dd>
 
  <dt><strong>Notes:</strong></dt>
  <dd>The recipe may be improved by adding raisins.</dd>
</dl>
 

Ejemplo sacado del enlace anterior.

[danihxh]

Gracias por la idea! No es lo que buscaba, pero me servirá para otra coas :P

Lo que decía que quería conseguir era una tabla que en la que por ejemplo cada producto cargado en ella ocupe 4 filas, con las 5 columnas, pero a partir de un cierto ancho de la página las dos últimas filas se coloquen al lado de las otras dos (mediante CSS), sería algo así:

SIN CSS:

[___FILA 1___]
[___FILA 2___]
[___FILA 3___]
[___FILA 4___]

CON CSS (Si la ventana es suficientemente ancha):

[___FILA 1___][___FILA 3___]
[___FILA 2___][___FILA 4___]

Por eso decía que es posible hacerlo si no se utiliza el elemento <table>, sería tan sencillo como envolver los divs correspondientes a fila 1 y 2 en otro que según el ancho de la ventana tenga ancho 50% o ancho 100% y que tenga float:left. Lo mismo con fila 3 y 4.

Pero bueno, supongo que no se puede hacer nada así, así que es posible que intente hacerlo combinando las listas que tú me has sugerido con otros tipos de listas, y disponiendo el contenido tanto en horizontal como en vertical... no quedará una tabla pero estará todo más o menos ordenado.

[furoya]

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

[danihxh]

Bueno, no era bien bien lo que buscaba porque no me convence lo de dividir una tabla en dos o más... pero bueno, es lo más parecido que he encontrado a lo que quería hacer. De todos modos finalmente lo he hecho con diferentes tipos de listas.

Muchas gracias por vuestra ayuda! :)