10. Tablas.
Una tabla se define entre las etiquetas <table> y </table>. A partir de este momento hay que definir las filas de la tabla que se definen con <tr> y </tr> (table row). Un par de etiquetas para cada una de las filas. Dentro de cada fila se definen las celdas que forman esa fila con las etiquetas <td> y </td> (table data).
Vamos a empezar definiendo una tabla de 3 filas y 3 columnas (para nuestro lenguaje serán tres filas, cada una de ellas con tres celdas). Vamos a indicar que queremos una tabla con borde. Esto se hace dentro de la etiqueta <table> con el atributo border. Así: <table border>. Por otro lado, vamos a poner algo dentro de cada celda. Pero, en lugar de poner algo concreto y visible, vamos a utilizar una cadena de caracteres que ya hemos visto que se utilizaba para añadir un espacio a la separación entre palabras:
El código y el resultados serán los siguientes:
siendo el resultado:
Podemos hacer que nuestra tabla esté centrada en la página con el atributo align="center". O "left" o "right", que ocupe una determinada proporción del espacio en horizontal con el atributo width="50%". O "30%" o "70%", que el borde sea mayor que el establecido por defecto (que es 1): border="3" o que tenga un color de fondo con el atributo bgcolor="#6699FF".
siendo el resultado:
De manera similar a los atributos de la tabla, podemos definir todos esos parámetros a las filas o a las celdas. Por ejemplo podemos empezar asignando a las celdas de la primera fila un ancho diferente. Si a este respecto no hago nada más en las otras celdas, lo que haga afectará a todas las columnas. Puedo definir colores diferenciados. En este caso, el color de la fila o de la celda prevalecerá sobre el definido en el conjunto de la tabla
siendo el resultado:
Disponemos de una etiqueta para poner el título de la tabla. Es <caption> con su correspondiente de cierre. Se coloca después de la etiqueta de definición de la tabla y añade un texto por encima de la tabla y centrado con ésta.
Disponemos de una etiqueta especial para aquellas celdas que son cabecera respecto de las celdas situadas debajo de ellas. Son las etiquetas <TH> (table header). El texto situado en ellas queda centrado y en negrita. Lo único que hay que hacer es sustituir la etiqueta normal de celda por esta otra.
Veamos un ejemplo:
siendo el resultado:
También podemos hacer tablas anidadas, o sea, dividir celdas dentro de la propia tabla; para ello utilizaremos el atributo rowspan. Veamos un ejemplo. Si queremos hacer la siguiente tabla:
siendo el código:
Ejercicio 11. Tablas 1.
Debes crear una página web que tenga el mismo aspecto que la siguiente imagen:
Además, tienes que tener en cuenta los siguientes requisitos:
Ejercicio 12. Tablas 2.
Debes crear una página web que tenga el mismo aspecto que la siguiente imagen:
Para ver la solución del ejercicio 12, escribe el código que te facilitará el profesor.
Contraseña Ejercicio 12: