CSS: lenguaje de estilo para las páginas web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 51
Visitas el mes pasado: 162
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
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.
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.
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:
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:
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í:
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í:
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.
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:
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.
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