¿Cuando utilizar css para maquetar y cuando utilizar tablas?

cali7 · #1 (**permalink**) 29/11/2005, 09:27

He estado leyendo algunos articulos de como maquetas paginas con css y me he puesto manos a la obra para desechar completamente las tablas de la maquetacion y ufffffffffff me estoy volviendo loco.
Que si float:left, clear, etc etc etc
y no me aclaro.

¿Cuando se debe utilizar css y cuando tablas?

Gracias por vuestra atencion.

kazafun · #2 (**permalink**) 29/11/2005, 09:37

En teoria para maquetar se debe utilizar solamente CSS. Aunque veo algunas cosillas que se hacen mas sencillas con tablas, pero estamos en el eterno debate.
A mi me ha costado un poco, pero me decanto definitivamente por las capas+css.

Tampoco pasa nada porque lo mezcles un poquillo...

vites · #3 (**permalink**) 29/11/2005, 09:42

tablas son para mostrar datos "organizados", con un ejemplo lo entenderas mejor, si quieres hacer una tabla periodica con divs o con listas te vas a bolber loco, mientras que con tablas en mucho más sencillo

la css se usa siempre, aunque uses tablas.

seguramente estaras liado porque estaras intentando hacerlo todo con divs ( a mi era lo que me pasaba al principio ) pero prueba ha utilizar listas, para los listados, menus, ... veras como te resulta algo más facil

te dejo este enlace para que veas algunos ejemplos de lo que se puede hacer con listas, algunos ejemplos parecen echos con tablas

http://css.maxdesign.com.au/index.htm

baccxus · #4 (**permalink**) 29/11/2005, 09:48

Si realmente quieres aprovechar el CSS y sus beneficios, debes maquetar (columnas, encabezados, contenidos, menues, etc) con CSS, y estructurar bien tu contenido. Ahora si tu información es de tipo tabular:
Nombre - Aprellido - ID - Sexo - Fecha de nacimiento - etc.

Aquí sí usas una tabla, y a esta (la tabla) le puedes aplicar CSS, además debes tener en cuenta que las tablas también tienen su ordenamiento:
Título, Celdas de encabezamiento, Fila Principal, Celdas de pié de página, etc., y tienen una etiqueta para cada uno:

<caption>, <thead>, <tfoot>, <th>, etc...

saludos,

cali7 · #5 (**permalink**) 29/11/2005, 10:13

No si yo lo tengo muy claro, que lo ideal para maquetar es css, lo que no me queda tan claro es el posicionamiento de los elementos, porque la cabecera y el menu de navegacion y el pie de pagina los tengo maquetados perfectamente (los he hecho en paginas distintas) y cuando lo voy a unir todo pues el menu se mueve para donde le sale de los coj... , el pie se mete dentro de los contenidos etc, etc etc.

Tigervlc · #6 (**permalink**) 29/11/2005, 13:00

A ver si te sirve este ejemplillo:

Código HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Estilos CSS</title>
<style type="text/css">
<!--
body {
	background-color: #FF9900;
}
.todo {
	background-color: #999999;
	position: relative;
	text-align: center;
	width: 50%; /* 50% del <body> */
}
.todo h2 {
	font-family: "Times New Roman", Times, serif;
	color: #660000;
	padding: 0px 0px 10px 0px;
	border-bottom-color: #333333;
	border-bottom-style: solid;
	border-bottom-width: medium;
	margin-bottom: 10px;
}
.izquierda {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #990000;
	background-color: #CCCCCC;
	text-align: justify;
	position: relative;
	width: 20%; /* 20% del bloque "todo" */
	float: left;
	height: 200px;
	margin-left: 5%;
	margin-right: 2%;
	padding: 5px 5% 5px 5%;
}
.derecha {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FF9900;
	background-color: #000066;
	position: relative;
	width: 20%; /* 20% del bloque "todo" */
	float: right;
	height: 200px;
	padding: 5px 5% 5px 5%;
	margin-right: 5%;
	margin-left: 2%;
}
.azul {color: #000066}
-->
</style>
</head>

<body>
<div class="todo">
  <h2>Contenido de etiqueta &lt;h2&gt; en capa &quot;todo&quot;</h2>
  <div class="izquierda">Contenido de capa "izquierda", y un <span class="azul">trozo
    de texto que ponemos en color azul</span>. </div>
  <div class="derecha">Contenido de capa "derecha"</div>
</div>
</body>
</html>

Fíjate sobretodo en el float, los margin, padding, y width. Ten en cuenta algo importante para maquetar y que te cuadren los bloques DIV en su sitio: Has de tener presente que el margen entre bloques, y el "padding" o separación entre el borde del bloque y el contenido, no cuentan dentro del ancho total que des a un bloque. O sea, que si lo haces en términos relativos como en este caso, reparte porcentajes para los anchos de los bloques "izquierda" y "derecha", y también para los márgenes que les he dado, y los rellenos de celda horizontales, o si no, los bloques se descuadran y aparece uno más abajo que otro.

Si lo haces en absoluto, reparte los píxeles del mismo modo.

Otra cosa. P.ej:
padding: 5px 5px 5px 5px;
equivale a:
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
solo que la primera opción es aceptada por navegadores antiguos, y la segunda puede que no.

Si se puede mejorar el ejemplo de alguna forma, sería de agradecer que lo expusierais. Siempre se puede aprender más.

ciao!

stephen · #7 (**permalink**) 30/11/2005, 19:18

Concuerdo con Kazafun, aunque en estos momentos me estoy volviendo loco porque no encuentro una forma didáctica de centrar el contenido de mi pagina con capas. COn tablas es sencillo, pero con capas hay varias formas que no termino de entender.