Maquetar una página web con tablas

  • Por
  • 05 de septiembre de 2006
  • Valoración:
  • 12 Comentarios
  • HTML, Taller HTML
Explicaciones prácticas sobre la maquetación de páginas web con HTML usando tablas.
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Comentarios

20/9/2006
lamentable que expliquen como maquetar en tablas, cuando lo que se esta tratando es de eliminar las tablas en el tema "maquetación"... :(

RESPUESTA

Estamos de acuerdo, pero todavía hay gente que nos pregunta cómo maquetar una página con tablas, porque están aprendiendo HTML y necesitan saberlo. Así que creo que se merecen una respuesta. Pero todo esto está comentado en el artículo para que de todos modos, todo el mundo sepa que la corriente actual es maquetar con CSS.

Juan

13/11/2006
Buenas, Tengo una pregunta.Maquete mi pagina con tablas, como lo indicaba el manual pero la duda que tengo es como hago para k cuando le de click en el link del menu, osea en el navegador lateral izq me cargue la info en el cuerpo ppal??

RESPUESTA

Igual no entendí bien la pregunta algo no has entendido tú, porque esta pregunta es un poco rara. Todos los link se cargan en el cuerpo principal, a no ser que estés utilizando frames, que entonces los link se cargan el en frame donde estaba el link. Ese es el comportamiento normal, aunque se puede cambiar el frame donde se debe cargar una página. Consultar nuestra documentación de frames en el manual de HTML.

Pero en este artículo no se habla de frames, así que entiendo que tú no los estás utilizando. Simplemente decirte que todas las páginas se van a cargar a pantalla completa, en toda la ventana. Si en las nuevas páginas también deseas conservar la misma estructura de tablas, tendrás que poner las mismas tablas en todas las páginas.

Eli

28/3/2007
Por fin lo entiendo!!! Normalmente trabajo con frames, y llevo un tiempo mirando como se hace de otro modo, el trabajo con tablas me parecia facil y bonito, pero no acababa de entender con las explicaciones que encontraba que lo que se hace es repetir la misma pagina cambiando el contenido, yo tambien entendia que la tabla actuaba como un sistema de marcos! No me gusta la idea, mirare si acabo de entender el tema del CSS, me gustaria poder hacer virguerias como las que veo por ahi. Gracias a millones, haceis un gran trabajo compartiendo vuestros conocimientos con los que hacemos lo que podemos en plan autodidacta.

Eli

28/3/2007
Jesus, en esta pagina hay mucha informacion de maquetacion con css. Yo tambien estoy intentando aprender por mi cuenta y es impresionante la cantidad de informacion que hay, pero mucha de ella resulta casi incomprensible para empezar. A mi me esta resultando muy claro este articulo, para bautizarme en esto: http://www.desarrolloweb.com/articulos/1823.php

Adrián Faúndez

18/3/2008
Muy buenas, si bien es cierto en un comentario se hable que la tendencia actual es maquetar con CSS, podrían hacer un paralelo y mostrar la versión CSS ya que sacaron a la luz esta diferencia de desarrollo. Los que estamos entrando en HTML lo hacemos paralelamente con CSS por razones obvias, es demasiada la interrelación de ambas con las paginas web.

Bryan

18/2/2009
hola señor me intereseo mucho su texto pero es que yo lo busque porque hise un curso de html y alfinal es donde dan el codigo esencial de las webs que fueron las tablas y pues el problema es que cuando tengo lista la tabla y quiero agregar enlaces yo quiero que la otra pagina tambien tenga ese diseño de tabla y que no se altere toda la tabla con el texto que le agrege a esa celda

aqui le dejo mi correo:
billymax123@hotmail.com


para que me ayude en eso gracias

an

13/6/2009
agradecimiento y aclaración
Antetodo agradecer el articulo y explicar que lamentablemente, en ocasiones nos toca mantener una página antigua que está maquetada en tablas, o realizar boletines que se utilizan con un gestor de contenidos que no soporta divs, ni backgrounds.
Un saludo y un agradecimiento

kensei

20/10/2009
agrdecimiento
justo lo que buscaba!!........tengo un problema con el tiempo de entrega de un proyecto...y esto lo facilita, ya que era exactamente lo que buscaba.....gracias!!.....gracias!!.....gracias!!.....gracias!!.....gracias!!.....es excelente para los que aun no comenzamos a meternos con otro metodos de diseño...o como se llame,(me refiero al css)....al fin puedo seguir con mi trabajo....gracias otra vez!!!. =)

Melo

19/2/2010
Opcional
Considero para casi todos nosotros que estamos comenzando que es mejor empezar por los cimientos y no por el tejado .. y si el conocimiento de tablas puede servir para una mejor comprensión de CSS, pues este es el camino... en caso contrario cada cual puede ir directamente al manual de CSS.

Y ya que estamos en esto tengo una pregunta: en la actualidad, ya que no son precisamente las tablas la metodología mas puntera para la elaboración de páginas, el hecho de que se carguen algunas paginas con este modelo, pudiera ser que Google u otro buscador de alguna manera descriminara a estos "que van un poco tarde"? (pensando en posicionamiento, AdSense, etc...)

ISAIAS

10/3/2010
Aveces si es necesario...
Muchas gracias por el artículo,
Si definitivamente hay que saber de todo, yo nunca habia maquetado un site con tablas, pero un cliente tenia varias cosas antiguas que no podía dejar y ocupaba ver como se trabajaba en estos casos, incluso no tan antiguo mailings y cosas por el estilo y este tutoria me ayudó mucho..gracias...

mari :)

03/10/2013
felicitaciones
Me sirvió de mucho! no lo hubiera entendido de no leer el articulo. Muchisimas gracias!

ErikROCHA

25/1/2014
Obsoleto y no recomendado
Saludos Miguel Alvarez, sería una buena idea editar el título poniendo "Obsoleto" o "No recomendado" y pensar que alguna vez las tablas fueron los reyes de la maquetación web, pero eso ya quedo en el pasado.

Compartir