Tablas

Las tablas es el elemento del lenguaje HTML que utilizaremos para mostrar información de forma agrupada. Ya sea texto, imágenes, vídeos,…El elemento table será el que nos ayudará para crear las tablas en HTML. Un mal uso de las tablas en HTML es el motivo de maquetación, uso que se dió a las tablas en los principios del lenguaje HTML. Algo que hoy en día es una mala práctica. Cambiando por un modelo de maquetación apoyado en capas.

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. Una vez que avance en este curso puede visitar el apunte de CSS) 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> ... </table>

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

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

El primer elemento es table es el elemento que representa las tablas y será el que agrupe al resto de elementos. Por lo tanto tiene sus etiquetas de inicio y cierre.

Siguiendo con la construcción de la tabla el siguiente elemento que necesitamos es tr. El elemento tr representa a una fila de la tabla. Por lo tanto tendremos tantos elementos tr como filas tenga la tabla.

Así, si queremos tener una tabla de tres filas tendremos un código como el que sigue:

El último elemento que necesitamos conocer es td. El elemento td es el que representa de una forma unitaria a una celda. Por lo tanto los elementos tr tendrán tantos elementos td en su interior como celdas contenga la fila.

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 paises en una columna y su cantidad de habitantes en otra:

<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td>China</td>
<td>1300 millones</td>
</tr>
<tr>
<td>India</td>
<td>1080 millones</td>
</tr>
<tr>
<td>Estados Unidos</td>
<td>295 millones</td>
</tr>
</table>
</body>
</html>

El código de arriba nos mostrará lo siguiente:

China	1300 millones
India	1080 millones
Estados Unidos	295 millones

Lo primero que aparece es la apertura del elemento table, donde inicializamos la propiedad border con el valor 1, con esto el contorno de cada celda será visible (pruebe de asignarle el valor cero y otros valores superiores a 1)

<table border="1">

Seguidamente viene la apertura de la primer fila de la tabla con el elemento tr:

<tr>

Continuamos con la apertura de la primer celda de la primer fila de la tabla:

<td>

Luego el dato propiamente dicho de la celda:

India

Cerramos la celda:

</td>

Abrimos la proxima celda:

<td>

Disponemos el valor de la celda:

1300 millones

Cerramos la celda:

</td>

Ahora cerramos la primer fila de la tabla:

</tr>

El mecanismos de la siguiente fila es similar a la primera.