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

Tablas

See the Pen HTML | 1.19 - Tablas - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

<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.

See the Pen HTML | 1.19 - Tablas - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

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.

See the Pen HTML | 1.19 - Tablas - 2 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

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.

See the Pen HTML | 1.19 - Tablas - 3 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

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.

See the Pen HTML | 1.19 - Tablas - 4 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

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.

See the Pen HTML | 1.19 - Tablas - 5 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Añadir espacio entre los bordes

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

See the Pen HTML | 1.19 - Tablas - 6 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Celdas que ocupan varias columnas

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

See the Pen HTML | 1.19 - Tablas - 7 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Celdas que ocupan varias filas

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

See the Pen HTML | 1.19 - Tablas - 8 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Añadir un título a la tabla

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

See the Pen HTML | 1.19 - Tablas - 9 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

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

¿Quieres más?

Si estás interesado en el mundo de la programación y el desarrollo web, te recomiendo que te suscribas a mi canal de youtube donde tienes mucho más contenido gratuito

IR AL CANAL

¿Quieres convertirte en desarrollador web? [GRATIS]

Déjame aquí tu mejor email y te mandaré un curso para que puedas empezar en el desarrollo web totalmente GRATIS!

¡Prometo no enviarte SPAM! Sólo cosas relevantes que te interesen.