LECCION 14ª LAS UTILES TABLAS

Las páginas web necesitan tener los elementos que colocamos ordenados y que se mantengan ordenados en los distintos navegadores.

Para definir el orden o la estructura de una página web se utilizan tablas con bordes ocultos. La mayoría de las páginas importantes se estructuran utilizando tablas ocultas.

Vamos a realizar una tabla con los bordes visibles

A) Las tablas comienzan con <table> y terminan con </table>

B) Definimos el borde de la tabla. Las tablas que se utilizan para ordenar los elementos sulen tener bordes invisibles para los navegadores y empleamos border="0". Si queremos un borde visible asignamos otro número al atributo borde. Nosotros en el primer ejemplo vamos a utilizar un borde visible border="1"

C) Definimos el tamaño de la tabla. Podemos definirlo como porcentaje del ancho de la página utilizando width

WIDTH="100%" nos genera una tabla que ocupa todo el ancho de la página que estamos creando.

WIDTH="50%" genera una tabla con la mitad del ancho del documento que creamos.

Podemos igualmente definir el tamaño de la tabla en número de pixel

WITH="100" ahora al no poner el % serán 100 pixel de larga la tabla y no el 100% del documento

D) Tenemos que definir las filas que lleva la tabla

◘TR◘ ◘/TR◘

E) Y definimos las columnas utilizando

◘TD◘ ◘/TD◘

Estas instrucciones de columna las pondremos dentro de las de fila.

EJEMPLO

Vamos a construir una tabla con el borde visible de tamaño el 100 por 100 del ancho del documento con dos filas y tres columnas.

Por tanto utilizamos al principio el "tag" ◘table◘ y al final ◘/table◘.

Definimos el borde border="1" y el ancho witdh="100%"

Definimos la primera fila con ◘tr◘ y ◘/tr◘ y dentro las tres columnas ◘td◘ ◘/td◘

◘tr◘ ◘td◘◘/td◘ ◘td◘ ◘/td◘ ◘td◘ ◘/td◘ ◘/tr◘

Y hacemos lo mismo con la segunda fila y sus tres columnas

◘tr◘ ◘td◘ ◘/td◘ ◘td◘ ◘/td◘ ◘td◘ ◘/td◘ ◘/tr◘

Las instrucciones para construir la tabla nos queda. Recuerda que da igual que las instrucciones se escriban en mayúsculas o minúsculas. Los espacios en blanco no afectan al resultado por tanto es lo mismo poner ◘tr◘ ◘td◘ ◘/td◘ ◘td◘ ◘/td◘ ◘td◘ ◘/td◘ ◘/tr◘

en una columna como lo ponemos a continuación.

◘table border="1" witdh="100%"◘
◘TR◘
◘td◘◘/td◘
◘td◘◘/td◘
◘td◘◘/td◘
◘/TR◘
◘TR◘
◘td◘◘/td◘
◘td◘◘/td◘
◘td◘◘/td◘
◘/TR◘
◘/Table◘

Y el resultado.

NOTA Donde allá ◘ usar<>¡¡