¿Cuáles son los bloques de estructura de tablas HTML?

Autor: | Última modificación: 10 de abril de 2024 | Tiempo de Lectura: 3 minutos
Temas en este post: ,

Algunos de nuestros reconocimientos:

Premios KeepCoding

¿Sabías que puedes crear tablas con HTML? Por eso, es tan importante que conozcas los bloques de estructura de tablas HTML y la forma en la que se agrupan estos elementos. De esta manera, podrás reproducir el proceso y crear tablas de contenido en tus programas. Así pues, a continuación, te presentamos cuáles son los bloques de estructura de tablas HTML.

¿Cuáles son los bloques de estructura de tablas HTML?

Los bloques de estructura de las tablas están compuestos por celdas y elementos, como filas y columnas, que se forman con comandos específicos, como verás a continuación:

Estructura básica de las tablas

El lenguaje de marcado de HTML tiene la posibilidad de construir varios elementos caracterísiticos de cualquier página o aplicación web. Uno de esos elementos posibles es la creación de tablas, conformadas por columnas y filas, así como botones de texto en celdas.

Los bloques de estructura de tablas HTML son los siguientes:

  • Las celdas, que se organizan en filas y columnas.
  • El elemento table o <table>, que es donde se establecerán todos los elementos dentro del objeto, tal como las columnas y las filas.
  • También aparece el elemento fila, es decir, el elemento <tr>.
  • Además, encontrarás el elemento celdas. Tiene dos opciones: la celda que pertenece al encabezado en forma de <th> y la celda de datos, que está formada por el extracto <td>.

A continuación, te mostramos cómo luce la estructura de las tablas de código en un programa donde se instancian plantillas con el lenguaje de marcado de HTML:

<table>

<tr>

🔴 ¿Quieres Aprender a Programar con Python? 🔴

Descubre el Full Stack Jr. Bootcamp - Aprende a Programar desde Cero de KeepCoding. La formación más completa del mercado y con empleabilidad garantizada

👉 Prueba gratis el Bootcamp Aprende a Programar desde Cero por una semana

<th> F1 C1 </th>

<td> F1 C2 </td>

<td> F1 C3 </td>

</tr>

<th> F2 C1 </th>

<td> F2 C2 </td>

<td> F2 C3 </td>

</tr>

</table>

Los bloques de estructura de tablas HTML deben esquematizarse en grupos, de los que hablaremos en el siguiente apartado.

Agrupación de las tablas en HTML

Ahora que conoces los elementos que conforman la estructura básica de las tablas HTML, debes aprender sobre la configuración o forma de agrupación de estos elementos de la tabla en HTML.

Para agrupar todos los elementos que forman la cabecera de la tabla, como la celda para la cabecera en forma de <th>, se utiliza el comando <thead> dentro del fichero HTML del programa de código.

Por otro lado, el comando <tbody> es el que se encarga de agrupar todos los elementos que corresponden al contenido del cuerpo de la tabla HTML. Allí se instaurarán todos los elementos de la celda de datos que estarán establecidas con el comando <td>.

Además, para agrupar los elementos que se constituirán en el pie de la tabla, deberás utilizar el comando <tfoot>.

Como añadido, hay dos comandos para configurar las columnas y filas de la tabla: colspan y rowspan. Su objetivo es expandir una celda a varias columnas o varias filas. Estas variables pueden establecerse en un fichero HTML de la siguiente manera:

<td colspan = «2»

rowspan = «2»>

<td rowspan = «2»>

<td colspan = «3»>

Recuerda que los bloques de estructura de tablas HTML también pueden establecerse en el desarrollo de una aplicación que se utilice con la dependencia Flask de Python.

Sigue desarrollando aplicaciones web

Ya sabes cuáles son los bloques de estructura de tablas HTML, pero aún es necesario que sigas ejercitando tus habilidades para aumentar tus conocimientos sobre el desarrollo de aplicaciones web y de escritorio.

Para eso, te recomendamos visitar el programa de nuestro Aprende a Programar desde Cero Full Stack Jr. Bootcamp. Esta formación intensiva es perfecta para ti si tu objetivo es convertirte en un programador profesional en menos de un año. ¡Anímate y sigue aprendiendo sobre programación!

¡CONVOCATORIA ABIERTA!

Aprende a Programar desde Cero

Full Stack Jr. Bootcamp

Apúntate y consigue uno de los perfiles más demandados con Python, Java y Spring Boot en solo 6 meses.