tablas

Estructura de una tabla
1. La etiqueta general, que engloba a todas las demás es  y . Es decir:
 
[resto de las etiquetas] 

 
2. En el siguiente nivel, dentro de la anterior, están las etiquetas para formar cada fila (row) de la tabla, que son y . Hay que repetirlas tantas veces como filas queremos que tenga la tabla. Es decir, para una tabla con dos filas, sería:

 
[etiquetas de lasdistintas celdas de la primera fila] 
 
 
[etiquetas de las distintas celdas de la segunda fila] 
 

3. En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que son  y , que engloban el contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirla tantas veces como celdas queremos que haya en esa fila.
Veamos un ejemplo de una tabla con dos filas.Cada fila va a tener tres celdas. Dentro de cada celda vamos a poner un texto indicativo de la posición de dicha celda:


fila1-celda1 fila1-celda2 fila1-celda3


fila2-celda1 fila2-celda2 fila2-celda3


Que resulta:
fila1-celda1
fila1-celda2
fila1-celda3
fila2-celda1
fila2-celda2
fila2-celda3
 
Filas con desigual número de celdas
En este ejemplo hemos puesto dos filas con igualnúmero de celdas. ¿Qué pasa si ese número es distinto? Pues el navegador forma el número de filas y columnas que haga falta, dejando espacios en blanco en las filas que tengan menos celdas.
Si en el ejemplo anterior eliminamos la tercera celda de la segunda fila, es decir si borramos fila2-celda3, resultará:
fila1-celda1
fila1-celda2
fila1-celda3
fila2-celda1
fila2-celda2

Variando elespesor de los bordes
El atributo BORDER permite establecer el espesor del borde de la tabla:


Si en el ejemplo anterior ponemos:


Resultará: 
fila1-celda1
fila1-celda2
fila1-celda3
fila2-celda1
fila2-celda2


Contenido de las celdas
Hasta ahora, en todos los ejemplos se ha puesto un texto normal dentro de las distintas celdas. Pero se puede poner en ellas cualquier otro elemento delos que van en un documento HTML, como imágenes, enlaces, etc. No hay más que poner dentro de la etiqueta de la celda la etiqueta correspondiente a una imagen, un enlace, etc.
Ejemplo con una imagen:
 
 



Ejemplo con un enlace:
 
Página principal  

Página principal
Posicionamiento del contenido dentro de la celda
Normalmente, el contenido de una celda está alineado a la izquierda.Pero se puede cambiar esto añadiendo dentro de la etiqueta de la celda los siguientes atributos:
 
 Al centro  
 A la derecha 
Al centro
A la derecha

 
El alineamiento por defecto en el sentido vertical es en el medio. También se puede cambiar, añadiendo dentro de la etiqueta de la celda los siguientes atibutos:
 Arriba  
 Abajo 

Arriba
Abajo

Variando las dimensiones de la tablaEl navegador da tamaño a la tabla de acuerdo con el número de filas, de columnas, por el contenido de las celdas, espesor de los bordes, etc.
A veces nos puede convenir forzarle para que la tabla tenga unas dimensiones totales mayores que las que le corresponden, tanto en anchura como en longitud. Esto se consigue añadiendo dentro de la etiqueta de la tabla los atributos WIDTH y HEIGHT igual a unporcentaje de la dimensión de la pantalla, o a una cifra que equivale al número de pixels.
Por ejemplo, si en el último ejemplo ponemos:



Arriba
Abajo
O, si en ese mismo ejemplo, ponemos:



Arriba
Abajo

Celdas que abarcan a otras varias
A veces puede interesarnos que una celda se extienda sobre otras varias. Esto se consigue añadiéndo dentro de la etiqueta de la celda losatributos COLSPAN=número para extenderse sobre un número determinado de columnas, o ROWSPAN=número para extenderse verticalmente sobre un número determinado de filas.
Por ejemplo, en la primera tabla de este capítulo vamos a añadir una fila con una sola celda, que abarca a dos columnas:
 Celda sobre 2 columnas 
Celda sobre 2 columnas
fila1-celda1
fila1-celda2
fila1-celda3
fila2-celda1...