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

Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.

Únete al discord

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.

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

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares
Koding Beats