Tablas en HTML

Creación de Tablas

Desde sus primeras versiones, HTML incluyó el soporte para crear tablas de datos en las páginas web. Además de ser sencillo, el modelo definido por HTML es muy flexible y bastante completo.

Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno de publicación de documentos:

Las tablas de HTML puede contener elementos simples, agrupaciones de filas y de columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos.

A pesar de que las tablas HTML son fáciles de comprender y utilizar, son uno de los elementos más polémicos de HTML. El problema de las tablas es que no siempre se utilizan adecuadamente. Aunque parezca obvio, las tablas se deben utilizar para mostrar información tabular.

Hasta hace unos años, las tablas también se utilizaban para definir la estructura de las páginas web. La cabecera de la página era una fila de una gran tabla, el pie de página era otra fila de esta tabla y la zona de contenidos estaba formada por varias columnas dentro de esa gran tabla.

Aunque algunos malos diseñadores siguen utilizando hoy en día las tablas para definir la estructura completa de las páginas web, se trata de una técnica obsoleta y nada recomendable. El motivo es que se complica en exceso el código HTML y su mantenimiento es muy complejo. La solución correcta para definir la estructura de las páginas consiste en la utilización de hojas de estilos CSS.

Definición de una tabla HTML

Una tabla HTML se define con la <table> etiqueta.

Cada fila de la tabla se define con el <tr> etiqueta. 
Un encabezado de la tabla se define con la <th> etiqueta.
Por defecto, encabezados de la tabla están en negrita y centrado a los datos y la celda de la tabla se define con la <td> etiqueta.

Atributos complementarios

Tabla HTML - encabezamientos Izquierda-align

Por defecto, encabezados de la tabla están en negrita y centrado.

A la izquierda a alinear los encabezados de la tabla,

utilizamos la propiedad de CSS text-align 

th {
    text-align: left;}

---

Tabla HTML - Adición de espaciado de bordes

espaciamiento Border especifica el espacio entre las células.

Para establecer el espaciado de bordes de una tabla,

utilizamos la propiedad de CSS espaciado de borde

table {
    border-spacing: 5px;}

Tabla HTML - Adición de título de la tabla

La etiqueta <caption> Se utiliza para titular la tabla
Nota: La etiqueta <caption> debe insertarse inmediatamente después de la etiqueta <table>.

Resumen:

• Utilice el código HTML <table> elemento para definir una tabla
• Utilice el código HTML <tr> elemento para definir una fila de la tabla
• Utilice el código HTML <td> elemento para definir una tabla de datos
• Utilice el código HTML <th> elemento para definir un encabezado de la tabla
• Utilice el código HTML <caption> elemento para definir un título de la tabla
• Utilice el colspan atributo para hacer un lapso de celdas en 2 o más columnas
• Usar la rowspan atributo para hacer un lapso de 2 o más filas de celdas.