✅ Cómo hacer TABLAS en HTML con sus Celdas y Columnas

Tablas

<table>

• Con la etiqueta <table> podemos definir una tabla.
• Cada fila se define con <tr>.
• El encabezado de la tabla se define con <th>.
• Y las celdas se definen con <td>.
• Dentro de un <td> puede haber cualquier tipo de elemento HTML, textos, imágenes, listas, etc.

Añadir borde

Si no se especifica un borde para la tabla saldrá sin bordes por defecto. Tenemos que usar la propiedad de CSS border.

Uniendo los bordes

Si queremos que unir los bordes de cada elemento para que solo haya un borde y no se vea doble, podemos usar la propiedad border-collapse.

Añadir padding a las celdas

Si queremos dejar espacio entre el contenido de las celdas y el borde podemos usar la propiedad padding de CSS.

Alinear a la izquierda los encabezados

Por defecto los <th> se muestran en negrita y centrados. Si queremos alinearlos a la izquierda podemos usar la propiedad de CSS text-align con el valor left.

Añadir espacio entre los bordes

Podemos añadir espacio entre las celdas usando la propiedad de CSS border-spacing.

Celdas que ocupan varias columnas

Tenemos el atributo colspan en el que podemos indicar el número de columnas que ocupa esa celda.

Celdas que ocupan varias filas

Tenemos el atributo rowspan en el que podemos indicar el número de filas que ocupa esa celda.

Añadir un título a la tabla

Podemos usar la etiqueta <caption> para añadir un título a la tabla.

Resumen

• Usamos <table> para definir una tabla
• Usamos <tr> para definir una fila en una tabla
• Usamos <td> para definir una celda de la tabla
• Usamos <th> para los encabezados de la tabla
• Usamos <caption> para ponerle un título
• Con la propiedad de CSS border podemos ponerle un borde
• Con la propiedad de CSS border-collapse podemos juntar los bordes
• Con el padding de CSS podemos darle relleno a las celdas
• Con el text-align de CSS podemos alinear el texto de las celdas
• Con el border-spacing podemos setear espacio entre celdas
• El atributo colspan hace que una celda ocupe varias columnas
• El atributo rowspan hace que una celda ocupe varias filas