:

Las pginas 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 pgina web se utilizan tablas con bordes ocultos. La mayora de las pginas importantes se estructuran utilizando tablas ocultas. A. Las tablas comienzan con la etiqueta <table> y terminan con </table> B. Definimos el borde de la tabla. Las tablas que se utilizan para ordenar los elementos suelen tener bordes invisibles para los navegadores y empleamos border="0". Si queremos un borde visible asignamos otro nmero al atributo borde. Nosotros en el primer ejemplo vamos a utilizar un borde visible border="1" C. Definimos el tamao de la tabla. Podemos definirlo como porcentaje del ancho de la pgina utilizando width
WIDTH="100%" nos genera una tabla que ocupa todo el ancho de la pgina que estamos creando. WIDTH="50%" genera una tabla con la mitad del ancho del documento que creamos.

Podemos igualmente definir el tamao de la tabla en nmero de pixeles

WIDTH="100" ahora al no poner el % sern 100 pixel de larga la tabla y no el 100% del documento
PROFESORA: LAURA OSORNIO HUERTA Pgina 1

D. Fila <tr> Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas debern insertarse entre las etiqetas <table> y </table>. E. Columna o celda <td> <td> </td> Estas instrucciones de columna las pondremos dentro de las de fila. F. Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>, pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita. G. <caption> </caption> Se utiliza para poner un ttulo a la tabla, esta etiqueta se situarn despus de abrir la tabla con <table>, y tambin podrs darle atributos de posicin con el comando <caption align=top bottom> Por ejemplo: para crear una tabla con dos filas y 3 columnas escribimos:

PROFESORA: LAURA OSORNIO HUERTA

Pgina 2

H. Combinar celdas colspan, rowspan. Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas. A travs del atributo colspan se especifica el nmero de columnas por las que se extender la celda, y a travs del atributo rowspan se especifica el nmero de filas por las que se extender la celda. Por ejemplo: para crear una tabla combinando celdas a la derecha se utiliza colspan, escribimos:

Es posible modificar los siguientes atributos dentro de la tabla:

PROFESORA: LAURA OSORNIO HUERTA

Pgina 3

1. En un bloc de notas, utilizando cdigo HTML: Crea una tabla de 2 filas y 4 columnas, utilizando las etiquetas <table> </table>, <tr> </tr> (Filas) y <td> </td> (Celdas). Considera la estructura de la siguiente figura. Aplica un borde a la tabla de 2.

2. En un bloc de notas, utilizando cdigo HTML: Crear una tabla combinada, utiliza los atributos colspan para combinar celdas a la derecha y rowspan para combinar celdas hacia abajo. Considera la estructura de la siguiente figura. Aplica borde y color de borde a la tabla, as como aplicar un color de fondo a la primera fila. Agrega un texto en movimiento a la primera fila, escribe tu nombre completo. Agrega un ttulo a la tabla: EJEMPLO DE TABLA VACIA

3. En un bloc de notas, utilizando cdigo HTML: Realizar una tabla combinada, utilizando las etiquetas <table> </table>, <tr> </tr> (Filas) y <td> </td> (Celdas). Considera la estructura de la siguiente figura. Aplica bordes y color de borde a la tabla, as como aplicar imagen de fondo y color de fondo a las celdas.

PROFESORA: LAURA OSORNIO HUERTA

Pgina 4

Estructura de la tabla:
Columna 1 Fila 1 Fila 2 Fila 3 Fila 4 Fila 5 Columna 2 Columna 3 Columna 4

PROFESORA: LAURA OSORNIO HUERTA

Pgina 5