HTML Tablas

Una tabla HTML, tal y como explica Wikipedia, es una forma gráfica de representar información de manera esquematizada, ordenada y compacta.

                

Estas son las tres etiquetas básicas y las más utilizadas:
La etiqueta table indica el inicio y cierre de la tabla.
El resto de etiquetas necesariamente estarán recogidas entre <table> y </table>.
tr representa una nueva fila de la tabla.
td es la etiqueta de último nivel y se traduce en una celda de datos en la tabla.

Para añadir semántica a la tabla, contamos con la etiqueta th que sustituye a la etiqueta td para celdas de cabecera.

Es posible utilizarlas en cualquier punto de la tabla, aunque su uso se recomienda para las primeras y las últimas filas y columnas de la tabla.
Esta etiqueta también se puede utilizar para trabajar estilos; de hecho, verás que los navegadores destacan el texto de estas celdas en negrita.

      Ejemplo tabla sencilla en HTML5

                                 

También es posible agrupar filas en tres bloques de estilos.

thead agrupa una o más filas de cabecera,

tbody se utiliza para agrupar filas de cuerpo, típicamente aquellas que contienen el grueso de los datos y tfoot, como cabría esperar, agrupa las filas del pie de la tabla.

Caption añade un título sobre la tabla.

Igual que en los procesadores de texto, en HTML es posible combinar celdas.

Para ello utilizamos dos atributos de las celdas: colspan y rowspan.

Colspan y rowspan esperan un valor entero que especifique cuántas columnas o filas, respectivamente, ocupa la celda.

Para dar estilos por columnas podemos hacer uso de las etiquetas colgroup y col.

La etiqueta col no tiene etiqueta de cierre, pero conviene cerrarla adecuadamente para cumplir con el estándar.

El atributo span funciona de forma parecida en colgroup o col a como lo hacían colspan y rowspan para las celdas de la tabla.

El valor del atributo indica el número de columnas que agrupará colgroup o col.

Para aplicar estilos a las columnas, es necesario estudiar el tema CSS.

En resumen, las etiquetas básicas para codificar una tabla en HTML son table para la tabla, tr para cada fila y td para las celdas.

Para añadir un título a la tabla, utiliza la etiqueta caption entre las etiquetas table.
Th, en sustitución de td, añade semántica especificando celdas de cabecera.
Las etiquetas que puedes usar para facilitar el trabajo posterior de CSS son las agrupaciones de filas: thead para las de cabecera, tbody para las filas de datos y tfoot para las del pie de la tabla, así como agrupaciones de columnas: colgroup y col.
Los atributos colspan y rowspan de las etiquetas th y td sirven para extender las celdas y el atributo span de las etiquetas colgroup y col para extender columnas.

Tabla HTML  (Evolución del desempleo en España)

Y para terminar, te dejo tres consejos que espero te sean útiles:


1. Utiliza tablas HTML exclusivamente para representar tablas y no caigas en la tentación de maquetar tu página con tablas: el código generado resulta farragoso, tu página no será accesible y además no es cool.

Antes se utilizaban las tablas para maquetar y, pese que a día de hoy puedas visitar algunas páginas conocidas que siguen haciendo uso de estas prácticas, como la de la CIA, hay más argumentos en contra que a favor. 
En la página www.hotdesign.com/seybold/spanish, puedes leer muchos más.

2. Repasa bien la combinación de celdas, recuerda que una mala codificación puede dar lugar a resultados desastrosos.

3. Utiliza la agrupación de filas y columnas para que el posterior trabajo de estilo con CSS resulte más sencillo.