Duda: Maquetacion DIV o TABLE

Dago · #1 (**permalink**) 12/02/2010, 12:39

Esta es una duda MUY comun... ¿Que utilizo para maquetar mi sitio? ¿DIV+css o TABLE?
Pongamos un ejemplo practico.
Un sitio con un banner de cabecera, un espacio, un menú, otro espacio y dos columnas de texto. Luego, otro espacio y un pie.

Ancho: 800px
Menu: inicio - informacion - contacto

Ejemplo con table:

Código:

<html>

<head>
</head>

<body>
<table width="800">
<tr>
<td>ACA IMAGEN o Banner de cabecera</td>
</tr>
<tr>
<td>Acá espacio</td>
</tr>
<tr>
<td>

<table width="800">
<tr>
<td>inicio</td><td>informacion</td><td>contacto</td>
</tr>
</table>

</td>
</tr>
<tr>
<td>Espacio</td>
</tr>
<tr>
<td>

<table width="800">
<tr>
<td>Columna 1 texto</td><td>Columna 2 texto</td>
</tr>
</table>

</td>
</tr>
<tr>
<td>espacio</td>
</tr>
<tr>
<td>pie</td>
</tr>


<table>

</body>

</html>

Yo lo haría de esta manera, a modo de ejemplo, con tablas y tablas indexadas.

Ahora bien... La pregunta: Sugieren alguna manera mas practica. En lo posible adjuntar ejemplo para comprara.

¿Con Tablas o P/DIV/SPAN?

Espero respuestas,
Saludos

Ryo · #2 (**permalink**) 12/02/2010, 12:45

Usar tablas para eso no sigue el sentido que HTML da a las tablas. Las tablas son para tablas de datos...

Puedes hacerlo así, pero tendrá sus inconvenientes y limitaciones. Te sugiero aprender a hacerlo correctamente, usando CSS y estudiando qué elemento HTML corresponde a cada situación.

elkpo15 · #3 (**permalink**) 12/02/2010, 12:55

Yo en mi caso aun que soy nuevo con esto de html y css use:

<div id="cabezera">
<img src="url-de-mi-imagen" alt="nombre" width="1024" height="64">
</div>

Osea yo primero con el photoshop cree una imagen creo que con una medida 400x10 ni idea, dps lo agrege como en el ejemplo anterior dentro de la etiqueta <img> y lo fui ajustando con width y height, ya teniendo una medida por decir "perfecta" para la cabezera que seria 1024x64, me hize otro banner con esa medida y me quedo perfecto y la calidad tambien.
Yo igualmente no te confies mucho de mi ejemplo por que yo recien empiezo con el html,css y photoshop xD, pero ahora si se trata de botones ahi ya me parece medio imposible xD; Aca te di el ejemplo de una simple cabezera ahora si vos queres hacer suponete un menu vertical, columnas o pie de pagina "creo" que es mejor el div ni idea, el problema en "mi" es cuando tenemos que ajustar imagenes con el div que de ahi ni idea se como se usa y con las tables menos jaja.

loncho_rojas · #4 (**permalink**) 12/02/2010, 13:05

Cita:

Iniciado por elkpo15

el problema en "mi" es cuando tenemos que ajustar imagenes con el div que de ahi ni idea se como se usa y con las tables menos jaja.

que linda historia... la verdad no entiendo el sentido del post.. suena a: "Estoy re aburrido, y voy a escribir algo"

Si al menos plantearas alguna pregunta, o cuestion.. pero no que te respondamos el
"Ser o no ser" que tienes como interrogante.

Dago · #5 (**permalink**) 12/02/2010, 13:08

Creo que esta bastante claro: Un ejemplo planteado y, la posibilidad de argumentar... Maquetacion con tablas o con Div.
Solo eso.

Ryo · #6 (**permalink**) 12/02/2010, 13:09

De hecho, el ejemplo no es bueno... En general, usar anchos fijos no es una buena práctica (en todo caso, definir un max-width), y menos tan exagerados. Para las imágenes no queda otra, pero 1024px de ancho es muchísimo. La imagen fija debería tener un ancho tirando a pequeño y luego hay técnicas para "llenar" la cabecera usando el background ;)

elkpo15 · #7 (**permalink**) 12/02/2010, 13:15

Creo que estas muy equivocado loncho_rojas yo simplemente queria ayudarlo quizas como dije anteriormente mi ejemplo no es "muy practico" y dije en mi por que yo tambien sufro el mismo problema :/.

pitufoweb · #8 (**permalink**) 12/02/2010, 13:19

Cita:

Iniciado por Dago

Ahora bien... La pregunta: Sugieren alguna manera mas practica. En lo posible adjuntar ejemplo para comprara.
Saludos

Hola,

aqui te dejo un ejemplo de como se haría con div's:

Código HTML:

<div id="contenedor">
	<div id="cabecera">ACA IMAGEN o Banner de cabecera</div>

	<div class="espacio">Acá espacio</div>

	<ul id="menu">
		<li>inicio</li><li>informacion</li><li>contacto</li>
	</ul>

	<div class="espacio">espacio</div>

	<div id="dos_columnas">
		<div id="columna1">Columna 1 texto</div>
		<div id="columna2">Columna 2 texto</div>
	</div>

	<div class="espacio">espacio</div>

	<div id="pie">pie</div>

</div>

Solo faltaria es CSS, pero también es algo sencillo.

Saludos.

Dago · #9 (**permalink**) 12/02/2010, 13:20

Mil gracias, pitufo web... Justo lo que buscaba. Algo que reflejara la forma correcta u otra forma de hacerlo :D

loncho_rojas · #10 (**permalink**) 12/02/2010, 13:25

Cita:

Iniciado por Dago

Creo que esta bastante claro: Un ejemplo planteado y, la posibilidad de argumentar... Maquetacion con tablas o con Div.
Solo eso.

Y creo que al postear marque especificamente un mensaje, al cual respondi.. creo que al responder se le llama POSTEAR, o no.. es a ese fragmento que me referia.. no al TOPICO del foro en si...

Y ya que estamos, si bien tiene sentido este topico... creo que ya se discutio bastante... y los canones apuntan sobre maquetar con minimalismo, es decir CAPAS+CSS... las tablas para tabular informacion!

Nadie se muere si hacen las Webs con tablas tampoco, solo que sera mas incomodo a la larga

Salvo que de nuevo se plantee dicha discusion que me parece carece de sentido...

jomaruro · #11 (**permalink**) 14/02/2010, 05:46

Hola:

[QUOTE=loncho_rojas;3279840
Y ya que estamos, si bien tiene sentido este topico... creo que ya se discutio bastante... y los canones apuntan sobre maquetar con minimalismo, es decir CAPAS+CSS... las tablas para tabular informacion!

Nadie se muere si hacen las Webs con tablas tampoco, solo que sera mas incomodo a la larga

Salvo que de nuevo se plantee dicha discusion que me parece carece de sentido...[/QUOTE]

+1.

Y cuando esteis aburridos id a jugar al futbol.

Saludos.