Las tablas

Puede parecer, a primera vista, que una tabla puede no servirte mientras estás con la redacción de tu página html.
En realidad, este no es el caso: intenta pensar, por ejemplo, en la parte de almacenamiento de datos de un sitio web de e-commerce: ¡aquí es cuando inmediatamente piensas cuánto es útil una tabla!

La tabla html es, por tanto, un elemento indispensable para organizar los datos.

El lenguaje html también tiene etiquetas para obviar esta necesidad: veamos juntos cómo crear una tabla en html.

En primer lugar tratamos de analizar la estructura de una tabla, en dos frentes, con la ayuda de una ayuda visual.

En primer lugar, tratemos de entender cómo se hace el andamiaje de nuestra tabla.

P.D. Los siguientes ejemplos serán en italiano pero es simplemente para que podáis entender visualmente como se realiza. 

Como puede ver, una tabla se compone de filas (un ejemplo es la fila resaltada en amarillo) y columnas (la parte resaltada en gris claro). Su intersección da vida a varias celdas, que contendrán nuestros datos.

Una vez que hemos aprendido la estructura básica, analicemos los componentes de nuestra tabla.
 

Tag html tabla

Como puede ver, tenemos varios componentes que se distinguen por otras tantas etiquetas.
El contenedor de nuestra tabla será la etiqueta <table> </table> que englobará a todas las demás.
Ahora, teniendo en cuenta la imagen de arriba, prueba a echar un vistazo a la de abajo: te ayudará a entender con ejemplos concretos lo que representan las otras etiquetas.

Intentemos diseccionar un poco este ejemplo:

Lo que en la tabla anterior era la etiqueta <caption> </caption> y representaba el título de nuestra tabla es, en la última imagen, "Datos personales del alumno". La leyenda, por lo tanto, necesitamos darle contexto a nuestra tabla. Para definirlo, intenta responder a la pregunta: ¿qué son estos datos?

Envuelta por la etiqueta <thead> </thead>, encontramos la línea <tr> </tr> que abraza los encabezados de la tabla, expresada, a su vez, dentro de la etiqueta <th> </th>. El <th> será el título de las columnas individuales y nos ayudará a dividir los datos a ingresar. (en nuestro caso "nombre" y "edad")

En este punto, el cuerpo de la tabla se hace cargo: la etiqueta <tbody> </tbody>, que consiste en los datos de las celdas individuales, insertada en la etiqueta <td> </td>. (en nuestra imagen de referencia los <td> </td> son “Mario” “24” “Claudia” “28”).

Por último, en la base de nuestra tabla encontramos el <tfoot></tfoot>, que define el footer de la tabla.

Esta sección se utiliza para ingresar los datos de resumen (en nuestro caso, la edad promedio de los estudiantes).

En este punto, deberías tener una idea mucho más claras sobre cómo es una tabla y qué etiquetas usar para insertar una en tu documento html.

Pero, habiendo aclarado la teoría, ¡pasemos a la práctica! Aquí hay una imagen para que entienda cómo, concretamente, escribir tu código para lograr lo anterior:

Esta es la forma correcta de escribir código en tu tabla.
Sin embargo, si intentas verificar lo que el navegador te mostrará siguiendo este código, es posible que no te guste lo que aparecerá:

Como puedes ver, tenemos todos nuestros datos, pero ¿dónde están los bordes de nuestra tabla html? ¿Dónde está la delimitación de las celdas?
La verdad es que hay formas en html de agregar estos y otros elementos de estilo a las tablas.
Sin embargo, es preferible que los elementos de estilo siempre se añadan insertando una hoja CSS en el código de tu sitio, pero lo veremos más adelante.