<Curso de programación HTML básico y creación de páginas web>

CURSO DE PROGRAMACIÓN HTML BÁSICO Y CREACIÓN DE PÁGINAS WEB

TEMA 4: Formato avanzado del documento

4.4 Trabajar con Tablas

Las tablas pueden configurarse como cualquier otro elemento dentro del HTML, a continuación encontrarás los atributos de la etiqueta TABLE:

border="*"	Con este atributo podrás controlar el grosor en píxeles del borde de la tabla.
cellpadding="*"	Define el espacio entre el borde de la celda y el contenido de la misma, se mide en píxeles.
cellspacing="*"	Define el espacio entre celdas y está definido también en píxeles.
width="*"	Determina la anchura de la tabla en píxeles o en porcentaje en relación al ancho del documento.
align="***"	Especifica la alineación de la tabla, izquierda, centrada o derecha. (left, center, right)

Las instrucciones para crear una tabla son:

En la pestaña de HTML

1. Coloca el cursor en el espacio donde deseas colocar la tabla.
2. Da un clic en el icono

para abrir la caja de diálogo donde crearás tu tabla.
3. En la caja de diálogo introducirás los valores que desees para tu tabla. Lo primero a configurar es el tamaño de la tabla (Table Size) tanto en filas (rows) como columnas (columns), posteriormente específica el ancho (width).
4. Determina los valores de los atributos de formato, borde (border), espacio interior (cell padding) y espacio entre celdas (cell spacing).
5. Da un clic en OK y verás como aparece la tabla en tu página, en la pestaña de Preview.

En la pestaña de Design
Sigue las indicaciones descritas en la pestaña de HTML.

Practiquemos la creación de tablas con estos ejemplos:

TABLA 1

tabla1.html

Tabla de 2 filas por 3 columnas, espacio entre líneas de 2 píx., borde 1

1	2	3
4	5	6

Ver código completo

TABLA 2

tabla2.html

Tabla de 4 filas por 2 columnas, ancho de tabla 300 píxeles con borde 0 y fondo de celda gris y celdas al 50% de ancho.

1	2
3	4
5	6
7	8

Ver código completo

TIPS

Si colocas el borde de la tabla con valor "0" (cero), verás que se hace invisible en la visualización en el navegador, esta opción es muy práctica para organizar todos los elementos de la página. Si realmente deseas que aparezca el borde, dale un valor de 1 o mayor.

El uso de tablas es muy recomendable para mejorar el aspecto visual de tu página, piensa cómo ordenarías el texto y la fotos dentro de una tabla:

Título
	Texto de prueba, texto. Texto de prueba, texto.
Pie de página

Título	Texto de prueba, texto. Texto de prueba, texto.
Pie de página