En HTML5, la costumbre de usar las tablas en lugar de div cada día más se va perdiendo, y es así como debe de ser, ya que ofrece muchas limitaciones en cuanto a darle un formato que uno desee, ya sea en colores, fuentes, diseños, etc. Por otra parte, las div cada vez más se hacen más atractivas y versátiles, debido a que permite un diseño web mucho más vistoso y con una gran facilidad de interpretación y escritura en código, ya que se le da formato mediante el uso del lenguaje CSS, en este caso, el CSS3.
Propiedades de las tablas
Además de los
atributos específicos de cada celda o línea, las tablas pueden ser
adicionalmente formateadas a partir de los atributos que nos ofrece la propia
etiqueta <table>. He aquí aquellos que pueden parecernos en un principio
importantes:
align: Alinea horizontalmente la tabla con
respecto a su entorno.
background: Nos permite colocar un fondo para la
tabla a partir de un enlace a una imagen.
bgcolor: Da color de fondo a la tabla.
border: Define el número de pixels del borde
principal.
bordercolor: Define el color del borde.
cellpadding: Define, en pixels, el espacio entre
los bordes de la celda y el contenido de la
misma.
cellspacing: Define el espacio entre los bordes (en
pixels).
height: Define la altura de la tabla en pixels
o porcentaje.
width: Define la anchura de la tabla en
pixels o porcentaje.
Los atributos
que definen las dimensiones, height
y width, funcionan de una manera
análoga a la de las celdas tal y como hemos visto en el capitulo anterior.
Contrariamente, el atributo align no
nos permite justificar el texto de cada una de las celdas que componen la
tabla, sino más bien, justificar la propia tabla con respecto a su entorno.
Vamos a poner
tres ejemplos de alineado de tablas, centradas, alineadas a la derecha y a la
izquierda.
| Ejemplo de tabla centrada |
| |
| Ejemplo de tabla alineada a la derecha |
| |
| Ejemplo de tabla alineada a la izquierda |
|
En la siguiente imagen podemos ver gráficamente el significado de estos atributos.
Podéis
comprobar vosotros mismos que los atributos definidos para una celda tienen
prioridad con respecto a los definidos para una tabla. Podemos definir, por
ejemplo, una tabla con color de fondo rojo y una de las celdas de color de
fondo verde y se verá toda la tabla de color rojo menos la celda verde. Del
mismo modo, podemos definir un color azul para los bordes de la tabla y hacer
que una celda particular sea mostrada con un borde rojo. (Aunque esto no
funcionará en todos los navegadores debido a que algunos no reconocen el
atributo bordercolor).
| Tabla de color rojo de fondo | El atributo bgcolor de la tabla está en rojo. |
| Celda normal | Esta celda está en verde. tiene el atributo bgcolor en color verde |
Tablas
anidadas
Muy útil también es el uso de
tablas anidadas. De la misma forma que podíamos incluir listas dentro de otras
listas, las tablas pueden ser incluidas dentro de otras. Así, podemos incluir
una tabla dentro de la celda de otra. El modo de funcionamiento sigue siendo el
mismo aunque la situación puede complicarse si el número de tablas embebidas
dentro de otras es elevado.
Consejo: Páginas como
DesarrolloWeb.com y muchas otras (La mayoría de las páginas avanzadas) que
basan su diseño en tablas, realizan anidaciones de tablas constantemente para
meter unos elementos de la página dentro de otros. Se pueden anidar tablas sin
límite, sin embargo, en el caso de Netscape 4 hay que tener cuidado con el
número de tablas que anidamos, porque a medida que metemos una tabla dentro de
otra y otra dentro de esta y otra más, aumentando el grado de anidación
sucesivamente... podemos encontrar problemas en su visualización y puede que la
página tarde un poco de tiempo más en mostrarse en pantalla.
Vamos a ver un código de
anidación de tablas. Veamos primero el resultado y luego el código, así
conseguiremos entenderlo mejor.
| Celda de la tabla principal |
|
Este sería el
código:
<table cellspacing="10" cellpadding="10" border="3">
<tr>
<td align="center">
Celda de la tabla principal
</td>
<td align="center">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td>Tabla anidada, celda 1</td>
<td>Tabla anidada, celda 2</td>
</tr>
<tr>
<td>Tabla anidada, celda 3</td>
<td>Tabla anidada, celda 4</td>
</tr>
</table>
</td>
</tr>
</table>
Propiedades de las div
Las capas (div) no son más que unos
recuadros, que pueden situarse en cualquier parte de la página, en los que
podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse
entre sí, lo que proporciona grandes posibilidades de diseño.
Podemos insertar una capa a través de las
etiquetas <div> y </div>, que como ya vimos,
sirven para agrupar bloques de texto.
A través del atributo id se le da un nombre a la capa,
y a través del atributo style se
establecen el resto de propiedades de la capa.
A través de las propiedades left (izquierda) y top (superior) se establece la
posición de la capa respecto a los márgenes izquierdo y superior de la página.
Pueden tomar un número como valor, acompañado de px cuando haga referencia a píxeles, y acompañado de % cuando
haga referencia a un porcentaje.
Para que la capa aparezca en la posición
establecida, es necesario incluir también la propiedad position con el valor absolute. Si no se estableciera este
valor, la capa se mostraría pegada al margen izquierdo, en la posición en la
que hubiera sido insertada dentro del código.
A través de las propiedades width (anchura) y height (altura) se establece el
tamaño de la capa. Pueden tomar un número como valor, acompañado de px cuando haga referencia a
píxeles, y acompañado de % cuando
haga referencia a un porcentaje.
A través de la propiedad z-index puede establecerse el
índice de la capa dentro de la página. Una capa podrá ser solapada por aquellas
capas cuyo índice sea mayor. Siempre es un valor numérico.
A través de la propiedad visibility puede establecerse la
visibilidad de la capa. Puede tomar los valores inherit (se muestra la capa mientras la capa a la que
pertenece también se esté mostrando), visible (muestra la capa, aunque la capa a la que pertenece
no se esté viendo) y hidden (la
capa está oculta).
A través de las propiedades layer-background-image y background-image se puede
establecer una imagen de fondo para la capa. La ruta y el nombre de la imagen
han de aparecer entre paréntesis, después de la palabra url.
A través de las propiedades layer-background-color y background-color se puede
establecer un color de fondo para la capa. Ha de ser un número hexadecimal.
A través de la propiedad overflow puede establecerse si se
mostrará o no el contenido de la capa cuando no pueda ser visualizado en su
totalidad, por ser la capa demasiado pequeña. Puede tomar los valores visible (se muestra todo el
contenido de la capa, aunque esto implique hacer que la capa sea más
grande), hidden (no es
posible visualizar el contenido de la capa que no quepa en ella), scroll (se muestra la barra de
desplazamiento, aunque el contenido de la capa pueda ser visualizado
totalmente) y auto (se muestra la barra de desplazamiento cuando sea
necesario).
A través de la propiedad clip puede establecerse el área
de la capa que podrá ser visualizado. Lo que hace es recortar la capa, haciendo
que partes de ella no sean visibles. Ha de especificarse la distancia de los
márgenes de la capa entre paréntesis, después de la palabra url.
- El primer valor ha de ser la distancia (se asume
que está en píxeles) del margen
superior, hasta la que no
se visualizará el contenido de la capa.
- El segundo valor ha de ser la distancia del margen izquierdo, hasta la
que no se visualizará el
contenido de la capa.
- El tercer valor ha de ser la distancia del margen superior, hasta la
que se visualizará el
contenido de la capa.
- El cuarto valor ha de ser la distancia del margen izquierdo, hasta la
que se visualizará el
contenido de la capa.
También es posible incluir auto como valor de alguna de
estas distancias, lo que indica que la distancia se corresponderá con los
bordes de la capa.
Todas estas propiedades se especifican a
través del atributo style,
y deben aparecer entre comillas dobles, con un punto y coma detrás de cada una.
Para asignar los valores a las propiedades no se utiliza el símbolo = (igual), sino que se utiliza el
símbolo : (dos
puntos).
Por ejemplo, podríamos insertar una capa
escribiendo el siguiente código:
<div id="capa" style="position:absolute; width:200px; height:115px; z-index:3; visibility: visible; background-color: #0099CC; layer-background-color:#0099CC; background-image: url(imagenes/fondocapa.gif); layer-background-image: url(imagenes/fondocapa.gif); clip: rect(1 auto auto 3);">
Este
texto está dentro de una capa.
</div>
Otra forma de insertar capas es utilizando
las etiquetas <span> y </span>, en lugar de las
etiquetas <div> y </div>.
La etiqueta <span> se utiliza del mismo modo que la etiqueta <div>, y es compatible con un
mayor número de navegadores.
También existen las etiquetas <layer> y </layer>, pero solamente son reconocidas por el navegador
Netscape.
La principal diferencia de la etiqueta <layer>, en lo que se refiere a
las otras dos, es que las propiedades de la capa se especifican como atributos
independientes, y no como valores dentro del atributo style.
Por ejemplo, podríamos insertar una capa
escribiendo el siguiente código:
<layer name="capa" width="200px" height="115px" z-index="3" visibility="show" bgcolor="#0099CC" background="imagenes/fondocapa.gif">
Este
texto está dentro de una capa.
</layer>
No hay comentarios:
Publicar un comentario