Foros del Web » Creando para Internet » CSS »

¿Cuando utilizar css para maquetar y cuando utilizar tablas?

Estas en el tema de ¿Cuando utilizar css para maquetar y cuando utilizar tablas? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/11/2005, 09:27
 
Fecha de Ingreso: agosto-2004
Mensajes: 15
Antigüedad: 13 años, 3 meses
Puntos: 0
¿Cuando utilizar css para maquetar y cuando utilizar tablas?

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.
  #2 (permalink)  
Antiguo 29/11/2005, 09:37
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
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...
  #3 (permalink)  
Antiguo 29/11/2005, 09:42
Avatar de vites  
Fecha de Ingreso: agosto-2005
Ubicación: Lugar en el que esta ubicado algo
Mensajes: 58
Antigüedad: 12 años, 3 meses
Puntos: 0
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
  #4 (permalink)  
Antiguo 29/11/2005, 09:48
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
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,
__________________
Al final del día hablar es gratis, codificar no lo es
  #5 (permalink)  
Antiguo 29/11/2005, 10:13
 
Fecha de Ingreso: agosto-2004
Mensajes: 15
Antigüedad: 13 años, 3 meses
Puntos: 0
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.
  #6 (permalink)  
Antiguo 29/11/2005, 13:00
 
Fecha de Ingreso: mayo-2003
Mensajes: 527
Antigüedad: 14 años, 6 meses
Puntos: 3
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!
  #7 (permalink)  
Antiguo 30/11/2005, 19:18
 
Fecha de Ingreso: noviembre-2003
Ubicación: Ciudad de México
Mensajes: 28
Antigüedad: 14 años, 1 mes
Puntos: 0
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.
__________________
Los estándares Web siempre causaran polémica
http://mxgaribay.com
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:09.