Páginas Web Sin Tablas
Ricardo Aroca | 01 de julio de 2005 | 
249 comentarios
El cambio siempre es difícil. Sobre todo si llevas mucho tiempo haciendo las cosas de una forma. Lo que vamos a ver ahora es uno de esos cambios difíciles, pero que tienen tremendos beneficios. Este artículo está pensado sólo como un punto de inicio en el uso de CSS + HTML .
El desafío es el siguiente: "Transformar una página diagramada con tablas en HTML puro, a una página semánticamente correcta diagramada a través de CSS "
La forma común (o usando tablas para la Diagramación)
Vamos a ocupar el ejemplo típico de una página estructurada en 3 áreas principales: un encabezado, el cuerpo o contenido y el pie de página. Esta página diagramada con tablas, muestra el ejemplo más común. Los colores se han utilizado para diferenciar los distintos bloques que la conforman.
A través de HTML puro, crear esta diagramación implica construir un tabla con 3 filas. En la fila superior (Encabezado)se inserta una segunda tabla con dos filas, una para el nombre del sitio y otra para la barra de navegación. En la fila del medio (Contenido), se inserta una tercera tabla, la que da la separación entre el menú y el contenido mismo. Finalmente, en la fila inferior, no agregamos tablas pero eventualmente es así.
Pueden ver el código fuente del ejemplo de página diagramada con tablas, para observar que es extremadamente confuso realizar mantención en el código. Consideremos además que este es un ejemplo muy simple.
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#CCCCCC">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><font size="7">Nombre de mi Sitio</font></td>
</tr>
<tr>
<td>Inicio | Servicios |Quienes Somos | Contáctenos </td>
</tr>
</table>
</td>
</tr>
<tr valign="top">
<td width="200" bgcolor="#FFFF99">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><strong>MENU</strong></td>
</tr>
<tr>
<td>Opción 1</td>
</tr>
<tr>
<td>Opción 2 </td>
</tr>
<tr>
<td>Opción 3 </td>
</tr>
<tr>
<td>Opción 4 </td>
</tr>
<tr>
<td>Opción 5 </td>
</tr>
</table>
</td>
<td width="427"><p> Lorem ipsum dolor ... </p></td>
</tr>
<tr bgcolor="#33CCFF">
<td height="19" colspan="2">Todos los derechos reservados Tecnostart.cl </td>
</tr>
</table>
Esto se debe a que las tablas no fueron creadas para diagramar sino para tabular datos. En este punto debemos darnos cuenta que a través de este modo de diagramar estamos ocupando elementos HTML tanto para publicar contenido, como para dar forma al contenido. Estamos ocupando tablas para dar posición (es decir formato) a nuestro contenido. Y ahí está precisamente el error.
Pero entonces, ¿como puedo reemplazar las tablas de manera que la construcción sea lógica y separe el contenido de la forma?. Aquí es donde entra a la cancha nuestro compañero: Las Hojas de Estilo o CSS .
La forma inteligente y óptima (o usando CSS )
HTML se ocupa de entregar el contenido y CSS de dar formato al contenido. Así de simple.
Debemos escribir código HTML simple y luego a través de hojas de estilo CSS hacemos que quede lindo.
El desafío es construir igual o mejor, el ejemplo anterior, pero esta vez sin tablas, usando HTML y CSS . El resultado se puede ver aquí. Puedes ver también la hoja de estilo que da el formato al ejemplo.
Analicemos la página HTML
<head>
<link xhref="estilo-ejemplo.css" rel="stylesheet" type="text/CSS" />
</head>
Esta línea dentro del head, indica que se debe vincular la hoja de estilo "estilo-ejemplo.cssS", al documento HTML . Este paso es fundamentamental en la separación de contenido y forma porque en el documento HTML escribimos sólo el contenido y en el documento CSS escribimos código para dar forma.
<body>
<div id="Encabezado">
Elementos del Encabezado
<div id="BarraDeNavegacion">
Elementos de la Barra de Navegacion
</div>
</div>
<div id="Menu">
Elementos del Menu
</div>
<div id="Contenido">
Contenido de la pagina
</div>
<div id="PieDePagina">
...
</div>
</body>
En esta parte aparece otro elemento fundamental: la etiqueta DIV. Una etiqueta DIV, representa un bloque de código. La técnica es agrupar en forma lógica los elementos de una página dentro de etiquetas DIV, para luego darles forma a través de CSS . La propiedad id, representa un identificador de cada bloque DIV y nos permitirá hacer ajustes precisos sobre ellos en nuestra hoja de estilos.
Analizando la Hoja de Estilos CSS
Si nuestra hoja de estilos está vacía, nuestra página se verá mas o menos así
Se aprecian claramente los cuatro bloques principales, mas un quinto dentro del bloque Encabezado. Queda claro que sólo hay contenido y de ahora en adelante no vamos a tocar nuestro código HTML , sino que trabajaremos en nuestra hoja de estilos.
Lo primero que haremos será dar posición y forma a los bloques. Queremos que menú sea menos ancho y que se ubique en el lado izquierdo de la página. Además el contenido debe ir al lado derecho del menú.
#Encabezado{
background-color:#CCCCCC;
padding:5px;
}
#Contenido{
background-color:#FFFFFF;
margin-left:200px;
}
#Menu{
background-color:#FFFF99;
padding-left:5px;
width:195px;
float:left;
}
#PieDePagina{
clear:both;
background-color:#33CCFF;
}
Explicamos un poco el código.
Las propiedades del Encabezado indican que el color de fondo será #CCCCCC y tendrá un relleno de 5 pixeles.
El contenido tendrá un color de fondo #FFFFFF y un margen de 200 pixeles desde el borde izquierdo de la página
El menú tendrá un color de fondo #FFFF99, un relleno al lado izquierdo de 5 pixeles y un ancho interno de 195px (195 + 5= 200 px). La línea float:left, nos indica que el bloque Menu va a ubicarse al lado izquierdo de la pantalla y permitirá que los demás elementos aparezcan a su lado derecho. Esto hace posible que el contenido esté al lado derecho del menú.
El Pie de Página tiene la propiedad clear:both, lo que indica que se borrarán todas las secuencias float anteriores. Esto hace para que el pie de página se muestre bajo el menú y el contenido, de otra forma se mostraría bajo el contenido, pero al lado del menú si este fuera más largo que el contenido. Además hemos especificado que el color de fondo sea #33CCFF.
Ahora nuestra página se ve así
Podemos retocar el estilo visual de nuestra página a través de otras líneas en nuestra hoja de estilo.
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#Encabezado h1{
margin:0px;
font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
font-size:300%;
font-weight:normal;
}
#Encabezado #BarraDeNavegacion a{
padding-right:10px;
color:#FF0000;
text-decoration:none;
}
#Encabezado #BarraDeNavegacion a:hover{
font-weight:bold;
}
#Menu h2{
margin:0px;
font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
font-size:150%;
font-weight:normal;
}
#Menu ul{
margin:0;
padding:0;
list-style:none;
}
Finalmente la página queda así
Queda como tarea para el lector averiguar como se relaciona este código CSS con los elementos de la página.
Se puede mejorar la página haciendo que el fondo del bloque Menú se extienda hasta el pié de página, pero eso queda para otra ocasión.
Comentarios
Complementando la idea, se puede establecer una altura mínima del div comentario a través del siguiente código
min-height: 70px; height: auto !important; height: 70px;las dos primeras líneas sólo sirven para Firefox y la ultima para IExplorer que en realidad interpreta el la propiedad height como una altura mínima o min-height
Me parece excelente el tutorial presentado, y de mucha utilidad, pero tengo una consulta que herramienta puedo utilizar para realizar las imagenes GIFS, de las esquinas
Cualquier editor de imágenes medianamente avanzado. En lo personal utilizo Macromedia Fireworks, pero el más utilizado por los profesionales del diseño es Adobe Photoshop. Con la integración de Macromedia a Adobe, al parecer vamos a tener que aprender a utilizar Photoshop, porque es difícil que Adobe mantenga el desarrollo dos herramientas similares.
Me agrada heber encontrado este excelente tutorial, claro y sencillo sobre todo en español. Felicidades Ricardo... Disculpe Ricardo pero ¿me podría enviar las imágenes del ejemplo? es que no se manejar ningun programa de diseño de imágenes. Gracias..
Está todo interesante, pero... cuando se necesita imprimir la página ¿como se ve?
Depende del navegador y el soporte para CSS que tenga.
Puedes crear una hoja de estilo CSS especialmente diseñada para impresión. Sobre eso escribí en Creando páginas imprimibles con CSS
me parecio muy completa y de mucha utilidad. Pero tengo una duda. Yo estoy acostumbrado a hacer los listados dinamico con tablas haciendo un bucle en la fila determinada. Mi duda es como remplazo la tablas en estas ocaciones. eje: do while ..... Rs(campo) loop
Si los datos deben ser tabulados, entonces debes usar tablas. La idea es no usarlas para hacer el layout de la página.
Me parece un buen acercamiento al paso entre las famosísimas tablas a los contenedores div. He trabajado en este proceso desde hace un rato, y al principio si fue dificil, ahora lo tengo más controlado, pero he visto cosas que siguen siendo dificiles de hacer con divs, como los layouts líquidos, he encontrado que una combinación entre una tabla y los divs pueden ser los resultados más eficaces al menos en mi caso. Si se puede hacer un layout líquido con puros divs, y que además tenga header, footer, y tres columnas al centro, pero es un relajo, y siempre queda el detalle de que en FireFox se ve diferente, sobre todo cuando en el CSS usas margins y paddings, y cuando empiezas a anidar muchos divs. =)
Recomiendo visitar http://blog.html.it/layoutgala/, que es una colección de 40 layouts de páginas hechos con CSS y HTML sin tablas.
Es una excelente herramienta, que cubre la mayoría de las necesidades al momento de meterle mano al código.
Muy buena info que voy a aplicar a mi sitio en forma urgente para eliminar las molestas tablas. Estuve manejando todo en base a tu excelente tutorial, copiando lo básico y editanto visualmente con dreamwaver. Lo único en lo que tengo dudas es ¿como poder aplicar un anuncio adsense dentro de por ejemplo el contenido sin que interfiera con este en la escritura? Muchas gracias y saludos.
Me pareció muy útil y claro el tutorial, en especial para personas como yo que recién comenzamos con la programación web y esta bueno saber las técnicas que ya quedaron obsoletas y como se las reemplaza. Por cierto gracias por el link de los layouts. Saludos.
Un exelente tutorial.
Gracias, me fue de mucha utilidad.
Muy bueno el tutorial, me gustaria saber como extender el color del menu hasta el pie.
muy bueno el tutorial , acabo de enterarme de esta metodo de diseñar paginas web. aunque yo siempre habia diseñado con tablas y combinado con hojas de estilos para el formato de textos ,imagenes de fondo etc. y me funciona muy bien . mi consulta es como haces
para ajustar a la resolucion de pantalla ej 800*600 . en conclusion veo que utilizas mas codigo de css. seguro lleva mas tiempo maquetar una web.
Hola Miguel. Creo q la mejor forma de asegurarse q nuestra pagina se vea correctamente en la gran mayoria de las pantallas es centrarla horizontalmente. No se si te refieres a esto. Si es asi, te comento que de esta forma evitas, por ejemplo, la sensacion de vacio a la derecha de nuestra pagina. Con css es muy sencillo. Si bien es cierto q debes acostumbrarte a trabajar con css, facilita mucho el mantenimiento, entre otras cosas.
Hola Miguel. Creo q la mejor forma de asegurarse q nuestra pagina se vea correctamente en la gran mayoria de las pantallas es centrarla horizontalmente. No se si te refieres a esto. Si es asi, te comento que de esta forma evitas, por ejemplo, la sensacion de vacio a la derecha de nuestra pagina. Con css es muy sencillo. Si bien es cierto q debes acostumbrarte a trabajar con css, facilita mucho el mantenimiento, entre otras cosas.
Hola Miguel. Creo q la mejor forma de asegurarse q nuestra pagina se vea correctamente en la gran mayoria de las pantallas es centrarla horizontalmente. No se si te refieres a esto. Si es asi, te comento que de esta forma evitas, por ejemplo, la sensacion de vacio a la derecha de nuestra pagina. Con css es muy sencillo. Si bien es cierto q debes acostumbrarte a trabajar con css, facilita mucho el mantenimiento, entre otras cosas.
Hola Miguel. Creo q la mejor forma de asegurarse q nuestra pagina se vea correctamente en la gran mayoria de las pantallas es centrarla horizontalmente. No se si te refieres a esto. Si es asi, te comento que de esta forma evitas, por ejemplo, la sensacion de vacio a la derecha de nuestra pagina. Con css es muy sencillo. Si bien es cierto q debes acostumbrarte a trabajar con css, facilita mucho el mantenimiento, entre otras cosas.
Mil gracias por el tutorial. Lo leí detenemidamente, probé el ejemplo y pude terminar aprendiendo exactamente lo que estaba necesitando. Hacía gran cantidad de años que usaba TABLE para hacer el 100% de una web.
Comentar
Los campos con asterisco * son obligatorios.
