Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

8. Diseño de páginas (I)

8.1 Diseño por tablas.

Características

Hace años, cuando salieron las primeras páginas web y el lenguaje CSS no estaba aún desarrolllado, la forma de diseñar la página con varios apartados distintos era mediante tablas. Hoy en día esta forma de diseñar la página está prácticamente olvidada, ya que con el desarrollo de CSS2 tenemos nuevas formas más eficaces de diseñar una página.

No obstante indicaremos aquí cómo se hace para diseñar una página mediante tablas, aunque, como hemos dicho, este método está hoy en día en desuso.

La página es una gran tabla

El método de estructura de tabla consiste en crear una gran tabla que abarque todo el espacio de la página. Luego mediante las propiedades height (alto) y width (ancho) de CSS podemos modificar el ancho o alto de las celdas para que ocupen el espacio que queremos. Asimismo con los atributos colspan y rowspan podemos fusionar varias celdas para que una sola celda ocupe toda una fila (como por ejemplo en la cabecera de la página), y crear así varios espacios diferentes.

Luego sólo tenemos que dar distintos fondos y estilos a cada celda, bien sea en código CSS o con atributos HTML que modifican el estilo. En el tema 6. Tablas del manual de HTML se explica cómo crear y modificar el aspecto de las tablas, así como la forma de poner distintos fondos a cada celda; que éstas tengan o no los bordes separados; que los bordes sean o no visibles; etc. Con lo cual conseguiremos que no se note que lo que realmente estamos viendo es una tabla.

Transformar una tabla en diseño de página

Veamos un ejemplo de página con cabecera, pie y tres columnas, una central más ancha y dos a los lados más estrechas: En este ejemplo transformamos una tabla que ocupa toda la página en un diseño de página:

partimos de la siguiente tabla:

Tabla-página; paso 1

cuyo código HTML es el siguiente:

<table  width="100%"  border="1" align="center" cellspacing="0">
<tr>
<td>Celda</td>
<td>Celda</td>
<td>Celda</td>
</tr>
<tr>
<td>Celda</td>
<td>Celda</td>
<td>Celda</td>
</tr>
<tr>
<td>Celda</td>
<td>Celda</td>
<td>Celda</td>
</tr>
</table>	

La primera fila será la cabecera, y la última el pie de página, por lo que debemos fusionar las tres celdas de cada una de estas dos filas mediante el atributo colspan, por lo que en cada una de estas filas habrá una sola celda (eliminamos las otras dos).

Después mediante los atributos width y height definimos la anchura y altura de las celdas.

La tabla tendrá ya el siguiente aspecto:

Tabla-página; paso 2

Y su código HTML es ahora el siguiente:

<table  width="100%"  border="1" align="center" cellspacing="0">
<tr>
<td colspan="3"  height="100">Celda</td>
</tr>
<tr>
<td width="20%" height="400">Celda</td>
<td width="60%">Celda</td>
<td>Celda</td>
</tr>
<tr>
<td colspan="3" height="100">Celda</td>
</tr>
</table>

Hemos definido ya los espacios que van a ocupar cada una de las secciones de la página.

Como puedes ver nos hemos servido de los atributos width y height para dar un ancho y un alto determinado a las celdas. En anchura (width) los valores pueden ser tanto porcentajes como píxeles.

Si definimos la anchura en píxeles la página tendrá un ancho fijo, y su vista en el navegador será más o menos grande dependiendo de la resolución de pantalla que tenga el usuario, por lo tanto debemos centrar toda la tabla respecto a la página, de esta manera, si la tabla se viera más pequeña que la ventana, la página siempre estaría centrada en horizontal. Si definimos la anchura en porcentaje, lo normal es dar una anchura del 100% a la tabla, así ocupa siempre todo el ancho de la ventana, las diferentes celdas de una misma fila (que constituyen las columnas), deben tener un ancho que sume entre todas el 100%. También podemos dejar la última celda (columna) sin señalarle el ancho. ésta ocupará el ancho que le falte a la suma de las demás para completar el 100%.

La altura (height) debe definirse siempre mediante píxeles. Esta es siempre una altura mínima, ya que si el contenido de la celda ocupara un espacio (en altura) mayor que el que se indica en el atributo, la altura de la celda se amplia para dar cabida a todo el contenido. Las demás celdas de la misma fila se amplían también para que toda la fila tenga la misma altura. Podemos dejar también la altura sin definir, con lo cual ésta será siempre la necesaria para que se vea el contenido de la columna más larga de la fila a la que pertenezca la celda.

Ahora ya sólo nos queda darle un estilo diferente a cada una de las celdas, es decir eliminar el color del borde, dar diferentes fondos a cada celda, definir direrentes estilos para el texto de cada celda, etc.

La estructura básica de la página podría quedar así:

Tabla-página; paso 3

Y su código HTML es ahora el siguiente:

<table  width="100%"  border="0" align="center" cellspacing="0">
<tr>
<td colspan="3" height="100" bgcolor="#ffccff">Cabecera</td>
</tr>
<tr>
<td width="20%" height="400" bgcolor="#ccffff">Columna izquierda</td>
<td width="60%">Cuerpo central</td>
<td bgcolor="#cccccc">Columna derecha</td>
</tr>
<tr>
<td colspan="3" height="100" bgcolor="#ffffcc">Pie de página</td>
</tr>
</table>

Hemos usado el atributo bgcolor para dar diferente color a cada celda, a la vez que el atributo border le hemos dado un valor=0 para eliminar el borde de las celdas.

mediante los diferentes atributos ya vistos en el tema 6. Tablas podemos cambiar el aspecto del interior de las celdas: la alineación horizontal y vertical del texto, separar o no las celdas, etc. Aunque aquí hemos usado atributos de HTML, tambien podemos usar el código CSS para realizar todos estos cambios.

Después de rellenar las celdas con texto y otros elementos, y aplicar estilo y otros elementos la página anterior podría quedar así:

Tabla-página; paso 4

Como puedes observar hemos rellenado la estructura anterior con texto e imágenes dentro de las celdas de la tabla que componen la página. El aspecto ya no es el de una tabla, sino el de una página Web dividida en varias secciones.

limitaciones del diseño por tablas

El diseño de páginas a través de tablas tiene una serie de limitaciones que hace que practicamente no se use hoy en día. Los diseños actuales usan el código CSS para definir las secciones de las páginas. Las principales limitaciones del diseño de tablas son las siguientes:

• Es una estructura rígida, en la que las celdas deben ocupar una posición determinada la cual no puede cambiarse fácilmente.
• El código HTML se recarga al tener que usar atributos distintos para cada una de las celdas, y además para cada uno de los elementos de dentro de las celdas
• Las secciones o espacios de la página ocupan unos lugares definidos dentro de la tabla, con lo cual no pueden ocupar sitios diferentes de los que ocupan las celdas ni tampoco podemos superponer unos sobre otros.

No obstante el diseño de tabla funciona perfectamente y puede ser utilizado tanto en una página entera como dentro la una sección para presentar subsecciones o espacios distintos.

El diseño por tablas es obsoleto y está hoy en día practicamente en desuso. Una vez descartado este tipo de diseño entramos en el verdadero diseño de las páginas actuales. En la proxíma página veremos cuales son los principales tipos de diseño actual.

Tipos de diseño

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com