TAREA 11

TABLAS

El objetivo fundamental de las tablas es mostrar una serie de datos en forma ordenada, organizado en filas y columnas.

Algo importante es que no utilizaremos las tablas para organizar la página completa (esto se hace en la actualizad mediante CSS, es decir hojas de estilo).

Para la creación de una tabla intervienen una serie de elementos:

<table> Es la marca de comienzo de la tabla. Este elemento requiere la marca de cierre.

<tr> Es la marca de comienzo de una fila. Esta marca debe estar dentro del elemento table. Este elemento requiere la marca de cierre.

<td> Es la marca de comienzo de una celda. Esta marca debe estar dentro del elemento tr. Este elemento requiere la marca de cierre.

Para recordar el nombre de estos elementos HTML:

<table>

<tr> viene de table row que significa fila de la tabla.

<td> viene de table data que significa dato de la tabla.

La mejor forma de entender y dominar este concepto es implementar tablas y ver su resultado dentro del navegador. Confeccionemos una tabla que muestre los nombre de países en una columna y su cantidad de habitantes en otra:

Ejercicio 1

Crea una página cuyo título sea "GOLEADORES" con tabla de 3 columnas y 4 filas, de modo que en la 1ª columna salga el nombre del equipo, en la 2ª el nombre del jugador y el la 3ª el nº de goles.

TABLA CON ENCABEZADO

La primer característica que le vamos a agregar a una tabla son las celdas de encabezado. Normalmente la primera fila de una tabla suele representar los títulos para cada columna.

Para indicar que se trata de una celda de encabezado utilizamos el elemento <th> en lugar de <td>

El navegador representa distinto las celdas de datos y las celdas de encabezamiento.

Confeccionemos el mismo problema del concepto anterior pero agregando un título a cada columna de la tabla mediante celdas de encabezamiento:

Ejercicio 2

Crea una fila de encabezado en el ejercicio 1 (equipo, jugador, nº de goles)

TABLA CON TÍTULO

Para disponer un título a una tabla debemos incorporar el elemento <caption> TÍTULO </caption> inmediatamente después que abrimos la marca <table>. El elemento caption requiere la marca de apertura y cierre.

Dispongamos un título a nuestra tabla con la población de distintos paises:

Ejercicio 3

Agrega al ejercicio 2 el título "MÁXIMOS GOLEADORES"

COMBINACIÓN DE CELDAS

En algunas situaciones se necesita que una celda ocupe el lugar de dos o más celdas en forma horizontal o vertical, para estos casos el elemento td o th dispone de dos propiedades llamadas rowspan y colspan.

A estas propiedades se les asigna un valor entero a partir de 2.

Si queremos que una celda ocupe tres columnas luego inicializamos la propiedad colspan con el valor 3: <td colspan="3">Facturación de los últimos tres meses</td>

Si por el contrario queremos que una celda se extienda a nivel de filas luego hacemos: <td rowspan="3">Secciones</td>

Veamos un ejemplo empleando el concepto de combinación de celdas:

Ejercicio 4

Incorpora al ejercicio 3 una cabecera horizontal (Máximos goleadores) y otra vertical (Champions)