En este artículo vamos a estudiar el modo de creación de una página web medianamente avanzada, en el que tenemos una estructura de columnas para mostrar los contenidos. Para crear la estructura de columnas utilizaremos tablas HTML y explicaremos algunos de los trucos típicos utilizados para la maquetación con tablas.

La motivación de este artículo es que he recibido a menudo consultas sobre el procedimiento para crear páginas web con distintas columnas. En el manual de HTML se explican todos los detalles sobre la creación de tablas, pero realmente no se cuenta cómo utilizarlas para maquetar una página web. De modo que era necesario presentar un artículo práctico para cubrir este asunto.

También es importante decir que la corriente actual de diseño de páginas web utiliza CSS y capas, en lugar de tablas, para el posicionamiento de los contenidos. Si ya conoces CSS posiblemente no te interese leer este artículo. En ese caso te recomendaría leer los contenidos acerca de la maquetación CSS. Pero en la práctica, mucha gente visita DesarrolloWeb.com para aprender a hacer páginas web desde cero, y en un primer momento o si sólo tienes conocimientos de HTML, es más sencillo empezar a maquetar páginas usando tablas.

Maquetación por tablas paso a paso

Las tablas en realidad están pensadas para presentar información tabulada, es decir, usando filas y columnas. Sin embargo, este uso lo podemos extender a toda la página web y crear una macrotabla que englobe todos los contenidos que se van a mostrar en la página entera. Como las tablas tienen filas y columnas, nos servirán para crear varias áreas donde se mostrarán los contenidos maquetados como si fuera una revista o un portal.

En este artículo vamos a crear un ejemplo medianamente sencillo de maquetación usando tablas. Lo podemos ver a continuación para hacernos una idea del objetivo buscado.

Como hemos visto, esta página está compuesta por una cabecera y un cuerpo de página. Para crear la cabecera y el cuerpo utilizaremos tablas independientes. Esto lo hacemos porque con dos tablas separadas para simplificar el ejemplo, es decir, por comodidad y porque se hace más fácil de diseñar. No obstante, como la distribución de columnas y filas en la cabecera y cuerpo en este ejemplo es distinta, necesitamos utilizar tablas independientes. Pero la razón más importante de poner cabecera y cuerpo en tablas distintas es que en algunos navegadores, cuando hay diseño con tablas, hasta que no se carga el código de la tabla entera no se muestra nada. Si tuviéramos toda la página metida en la misma tabla, el usuario no vería nada hasta que no se terminase de cargar toda la página en su navegador. Si separamos las tablas de cabecera y cuerpo conseguimos que la cabecera de la página se cargue y se muestre rápidamente y luego, aunque tarde bastante en cargarse el resto de la página con todo el cuerpo, por lo menos el usuario ve la cabecera y puede saber que la página está por cargar del todo.

En este caso la cabecera es bastante típica, con el logotipo, un banner y una barra de navegación horizontal. El código puede ser como el siguiente.

<table width="778" cellspacing="1" cellpadding="3" border="0" bgcolor="#000000" align="center">
<tr>
    <td width=180 align=center bgcolor="#ffffff"><img src="logo.gif" width="154" height="72" alt="Todo Clásico" border="0"></td>
    <td bgcolor="#ffffff" align=center><img src="banner.gif" width="468" height="60" border="0"></td>
</tr>
<tr>
    <td colspan=2 bgcolor="#ffffff" background="fondohorizontal.gif">
     
    <font face="Garamond">Portada | Noticias | Agenda | Artistas | Buscador | Comunidad | Tienda</font>
    </td>
</tr>
</table>

Si nos fijamos, la cabecera tenía un contorno negro. Esto lo conseguimos de manera similar a como explicamos en un taller anterior de HTML: Recuadro elegante y sencillo con HTML. Simplemente ponemos un color de fondo negro a la tabla, luego hacemos que las casillas estén separadas (cellspacing) de un píxel y definimos en blanco el color de todas las casillas. Así, la separación entre casillas aparecerá en negro y las casillas en blanco. En este caso hemos definido un margen entre el borde de la casilla y el contenido (cellpadding) de tres pixels, para que el contenido de las casillas no se pegue con el borde.

La barra de navegación horizontal ocupa todo el ancho de la cabecera, por eso tiene un colspan=2. Le hemos puesto un fondo degradado para mejorar el diseño un poco.

Otra cosa destacable es el ancho de la tabla, que lo hemos hecho de 778 píxeles. Podríamos haber hecho un diseño que ocupase todo el ancho de la página, pero he creado un diseño no fluido con ancho fijo. Este tipo de diseños, en mi opinión, son más sencillos de que queden bien. El tamaño de 778 píxeles es porque es lo máximo que se puede poner que quepa en definiciones de pantalla de 800 x 600. Podemos conocer más sobre diseños fluidos en el artículo Páginas fluidas. También tenemos otro artículo donde podemos saber más sobre definiciones de pantalla.

Por su parte, el cuerpo tiene una distribución de tres columnas. El código de la tabla que englobaría todo el cuerpo es el siguiente:

<table width="778" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
    <td width=150 valign="top">
    <!--NAVEGADOR LATERAL IZQUIERDO-->
    </td>
    <td width=10></td>
    <td width=484 valign="top">
    <!--CUERPO PRINCIPAL-->
    </td>
    <td width=10></td>
    <td width=124 align=center valign="top">
    <!--LATERAL DERECHO-->
    </td>
</tr>
</table>

La técnica para hacer esta tabla es distinta que la tabla de la cabecera. Esta tabla no tiene reborde negro, para no recargar demasiado el diseño de la página. Pero lo más importante es que los márgenes y espacio entre celdas (cellspacing y cellpadding) los hemos eliminado o puesto a cero. Entonces, los espacios que tiene que haber entre celdas los hemos puesto con celdas vacías de 10 pixel. Esto lo hago así porque de este modo me resulta más sencillo calcular los espacios de la tabla y porque así podemos definir márgenes que no afectan a todas las celdas de la tabla, sino sólo a las que los necesitan.

La tabla tiene tres celdas donde se meterán contenidos y dos celdas con espacio o márgenes para separar las tres casillas donde están los contenidos. Dentro de cada celda colocamos los contenidos necesarios. En la primera irá la barra de navegación de la izquierda, en la celda del centro el cuerpo principal y en la tercera casilla irá el lateral derecho, que hemos utilizado para colocar publicidad.

Los anchos de cada celda, definidos por el atributo width, son bastante típicos en este tipo de estructuras de tres columnas. Además, podemos ver que todas las celdas tienen el atributo valign="top" para que los contenidos se sitúen en la parte de arriba de la tabla.

El contenido de cada una de las celdas del cuerpo incluye más código HTML, incluso otras tablas anidadas. En general, podemos poner en cada columna el código HTML que necesitemos, con cualquier etiqueta, teniendo en cuenta que el ancho disponible está limitado al ancho de la celda.

Podemos ver el ejemplo en una página aparte. Mirar también el código fuente para ver el ejemplo con su codificación completa.