HTML Tables

HTML Tables

La ruta del desarrollador web frontend autónomo🤹‍♂️


Las tablas HTML permiten a los desarrolladores web organizar los datos en filas y columnas.

Ejemplo:


Define una tabla

Una tabla HTML consiste de celdas dentro de filas y columnas:

Ejemplo:


Celdas de una tabla

Cada celda de la tabla se define con una etiqueta <td> y </td>.

td significa datos de tabla (table data)

Todo lo que está entre <td> y </td> es el contenido de una celda de tabla.

Ejemplo:

Nota: una celda de tabla puede contener todo tipo de elementos HTML: texto, imágenes, listas, enlaces, otras tablas, etc.


Filas de una tabla

Cada fila de una tabla empieza con una etiqueta de inicio <tr> y una etiqueta de cierre </tr>.

tr significa fila de una tabla (table row)

Ejemplo:

Puedes tener tantas filas como quieras en una tabla; solo asegúrate de que la cantidad de celdas sea la misma en cada fila.

Nota: hay momentos en que una fila puede tener menos o más celdas que otra. Aprenderás sobre esto en los próximos capítulos.


Encabezados

Para utilizar una celda como encabezado de una tabla, utilice la etiqueta <th> en lugar de la etiqueta <td>:

th significa encabezado de tabla (table header)

Ejemplo:

Por defecto, el texto en los elementos <th> se muestrán en negrita y centrados, pero puedes cambiarlo con CSS.


Resumen

  • <table> define una tabla

  • <th> define un encabezado de celda en una tabla

  • <tr> define una fila en una tabla

  • <td> define una celda en una tabla


Traducido con 💚 desde W3Schools.com

Did you find this article valuable?

Support Santos Romero by becoming a sponsor. Any amount is appreciated!