Tablas en HTML

Las tablas son sin duda uno de los elementos más potentes del HTML. En el interior de las celdas de una tabla, que pueden ser con borde visible o invisible, se puede poner cualquier cosa: texto de cualquier tamaño y color, imágenes, links... Por supuesto, además de permitir cualquier contenido, tienen sus propios atributos de alineación tanto horizontal como vertical, y atributos de dimensionado. Si no definimos su tamaño, lo adaptan al contenido, pero también es posible definirlo de forma fija. El elemento básico de definición de tabla es <TABLE> </TABLE> y en su interior se disponen los sub elementos <TR> para definir una fila (Row), <TD> para definir una celda de datos (Data). Estos sub elementos también han de llevar sus correspondientes cierres: </TR> y </TD>.

Aunque no es muy habitual su uso también es posible definir una fila de cabecera. Una cabecera <TH> es los mismo que una celda de datos <TD> pero de forma automática el texto de su contenido recibe los atributos de negrita y centrado. Sólo es posible definirlas al principio de las filas, de las columnas o de ambas a la vez.

He aquí una tabla-resumen de los elementos utilizados y los atributos que admite cada uno:

	TABLE	TR	TD	TH	CAPTION
BORDER	X	-	-	-	-
ROWSPAN	-	-	X	X	-
COLSPAN	-	-	X	X	-
ALIGN	-	X	X	X	X
VALIGN	-	-	X	-	-
WIDTH	X	-	X	-	-
HEIGTH	X	-	X	-	-
CELLPADDING	X	-	-	-	-
CELLSPACING	X	-	-	-	-

Veamos el significado de cada atributo:

BORDER: Indica el ancho de los bordes de la tabla. Se mide en píxels. CELLSPACING: Indica el número de píxels que separan una celda de otra. CELLPADDING: Indica los píxels de separación entre el borde de la celda y su contenido. WIDTH: Según donde se escriba, sirve para controlar el ancho de toda la tabla o de sus columnas. Si se incluye en <TABLE> puede indicar el tamaño tanto en píxels como en porcentaje respecto al ancho de la pantalla. ALIGN: Indica la alineación horizontal de los datos dentro de las celdas. Puede tener tres valores: LEFT (izquierda), RIGHT (derecha) y CENTER (centro). VALIGN: Indica la alineación vertical de los datos dentro de las celdas. Puede tener tres valores: TOP (arriba), BOTTOM (abajo) y MIDDLE (centro). ROWSPAN: Se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado número de filas. COLSPAN: Se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado número de columnas.

Existen otros elementos interesantes para personalizar el aspecto de las tablas que utilizaremos después con Dreamweaver y cuando estudiemos las hojas de estilo (.css)

Ejercicio: Crea una tabla idéntica a la que aparece más arriba resumiendo los atributos de la etiqueta TABLE.

Ejercicio: Crea una tabla con dos columnas y 4 filas. En la columna izquierda pon los nombres de cuatro ciudades y en la derecha fotografías de esas ciudades.

Aquí tienes un repaso exhaustivo de las tablas en HTML merece mucho la pena leerse y, más aún, entender todo lo que dice.