Tablas HTML: Una guía completa con ejemplos y códigos!!!

Sumérgete en el mundo de las tablas HTML, una herramienta fundamental para organizar datos de manera estructurada en tu sitio web. Desde entender qué son hasta explorar ejemplos y códigos de uso, descubre cómo crear tablas responsivas que se adapten a diferentes dispositivos, aprovechando al máximo sus celdas, filas y columnas.

1. ¿Qué son y para que sirven las tablas HTML?

Las tablas HTML son herramientas usadas para organizar información en páginas web. Funcionan como las tablas que puedes encontrar en una hoja de cálculo o en un documento de texto, con filas y columnas que permiten presentar los datos de forma estructurada.

Las tablas HTML están compuestas por filas (definidas por la etiqueta <tr>) y celdas (definidas por las etiquetas <td> para datos comunes y <th> para encabezados). Las tablas también pueden tener otros elementos como título (<caption>) y grupos de filas para encabezado, cuerpo y pie (<thead>, <tbody>, y <tfoot>). (Más adelante iremos ampliando estos conceptos).

¿Para que sirven?

Son ideales para mostrar grandes cantidades de información de manera clara y fácil de leer en una página web. Por ejemplo:

• Resultados de búsqueda
• Listas de precios
• Calendarios
• Datos de comparación
• Y básicamente cualquier tipo de información que se presente mejor en un formato de filas y columnas.

Originalmente, las tablas HTML se utilizaban también para definir el diseño de una página web. Sin embargo, actualmente se recomienda usar hojas de estilo en cascada (CSS) para controlar la apariencia de las páginas, y las tablas HTML se utilizan principalmente para su propósito original: presentar datos tabulados.

RESUMEN: Las tablas HTML son una forma efectiva de mostrar información organizada en filas y columnas dentro de una página web.

2. Sintaxis correcta de una tabla en HTML.

A continuación dejo una estructura en código HTML bastante completa para crear un tabla en una página web. Y en los siguientes puntos iré explicando que son y como usar cada uno de estos elementos HTML usados para crear la tabla, así como también sus atributos mas comunes.

Visualización de este código en el navegador:

Ejemplo de Tabla HTML

th = COLUMNA 1	th = COLUMNA 2
td = Celda = Columna 1	td = Celda = Columna 2
td = Celda = Columna 1	td = Celda = Columna 2
tfoot

Las etiquetas utilizadas en el ejemplo anterior para crear tablas en HTML se dividen o clasifican en tres categorías principales, según su función y ubicación en la estructura de la tabla:

1. Etiquetas de estructura de tabla:
   • <table>: Define la tabla en su conjunto.
   • <tr>: Define una fila dentro de la tabla.
   • <th>: Define una celda de encabezado dentro de una fila. Generalmente se utiliza para el encabezado de columnas.
   • <td>: Define una celda de datos dentro de una fila.
2. Etiquetas de agrupación de contenido:
   • <thead>: Define el grupo de filas que contienen el encabezado de la tabla.
   • <tbody>: Define el grupo de filas que contienen el cuerpo principal de la tabla.
   • <tfoot>: Define el grupo de filas que contienen el pie de la tabla.
3. Otras etiquetas adicionales:
   • <colgroup>: Define un grupo de columnas en una tabla para aplicar estilos o atributos comunes a esas columnas.
   • <col>: Define una única columna dentro de un grupo de columnas.
   • <caption>: Define un título o leyenda para la tabla.

Estas etiquetas se utilizan en combinación para estructurar y organizar el contenido de la tabla de manera semántica y accesible. La división en estas categorías facilita la comprensión y el mantenimiento del código HTML, así como también proporciona un contexto claro sobre el propósito de cada parte de la tabla.

A continuación iremos ampliando que son y como usar cada uno de estos elementos.

3. Las principales etiquetas HTML para crear tablas.

Como dijimos, las etiquetas utilizadas para crear tablas en HTML las podemos clasificar en tres categorías principales, según su función y ubicación en la estructura de la tabla.

La clasificación de las etiquetas para crear tablas HTML son:

1. Etiquetas de estructura de tabla:
2. Etiquetas de agrupación de contenido:
3. Etiquetas adicionales:

ACLARACIÓN: En la explicación de los atributos de las siguientes etiquetas, en varias ocasiones nombraré atributos que corresponden a la aplicación de personalización de estilos, en tal caso RECOMIENDO, usar estilos CSS para el desarrollo de dichos estilos, de todas manera nombraré algunos atributos que permiten realizar dicha personalización directamente desde la aplicación de la etiqueta, lo cual solo es recomendable aplicar en ocasiones especiales!!!

3.1. Etiquetas de estructura de tabla:

Las etiquetas de estructura de tabla en HTML son las principales y se utilizan para definir la estructura básica de una tabla y las mimas son:

1. Etiqueta <table>
2. Etiqueta <tr>
3. Etiqueta <th>
4. Etiqueta <td>

3.1.1. Etiqueta <table>:

La etiqueta <table> en HTML se utiliza para definir una tabla en una página web. Esta etiqueta marca el inicio de la tabla y encierra todo el contenido relacionado con la tabla. Aquí tienes una descripción de su uso y algunos ejemplos:

CARACTERÍSTICAS DE <table>:

1. Dentro de la etiqueta <table>, se utilizan etiquetas como <tr> para definir filas y <th> o <td> para definir celdas de encabezado o datos, respectivamente.
2. La etiqueta <table> se puede estilizar y personalizar aún más utilizando CSS para controlar el diseño, el espaciado, los colores y otros aspectos visuales de la tabla.
3. Opcionalmente, se pueden utilizar otras etiquetas para agrupar filas de encabezado (<thead>), cuerpo (<tbody>) y pie de tabla (<tfoot>).

ATRIBUTOS COMUNES DE <table>:

• border: Especifica el ancho del borde de la tabla (en píxeles). Un valor de 0 (cero) elimina completamente el borde.
• width: Establece el ancho de la tabla en píxeles o como un porcentaje del ancho del contenedor.
• align: Alinea la tabla horizontalmente dentro de su contenedor. Los valores pueden ser "left", "center" o "right".
• cellpadding: Define el espacio interno entre el contenido de las celdas y los bordes de las celdas.
• cellspacing: Define el espacio entre las celdas de la tabla.

RECOMENDACIÓN CON ESTILOS CSS: Se recomienda utilizar CSS para el diseño y reservar el uso de tablas para datos tabulares reales.

3.1.2. Etiqueta <tr>:

La etiqueta <tr> en HTML se utiliza para definir una fila horizontal dentro de una tabla. Esta etiqueta marca el inicio de una nueva fila y encierra el contenido de las celdas ( <td> o <th>) de esa fila. Aquí tienes una descripción de su uso y un ejemplo:

CARACTERÍSTICAS DE <tr>:

1. La <tr> etiqueta actúa como contenedor de celdas de tabla ( <td> para celdas de datos y <td>para celdas de encabezado) que a su vez, definen las columnas de la tabla.
2. Es importante recordar que cada <tr> debe contener un número consistente de celdas (<td> o <th>) para que la tabla se muestre correctamente.
   • Si una fila tiene menos celdas que las otras, las celdas faltantes se rellenarán automáticamente.
   • Si tiene más celdas, las adicionales serán ignoradas o se mostrarán en una nueva fila.

ATRIBUTOS DE <tr>:

Esta etiqueta generalmente no tiene atributos propios. La mayoría de las veces, los atributos que afectan a una fila en una tabla se aplican a las celdas dentro de esa fila, no a la etiqueta <tr> en sí misma.

3.1.2. Etiqueta <th>:

La etiqueta <th> en HTML define una celda que representa un encabezado para un grupo de celdas en una tabla. Se utiliza para etiquetar columnas o filas, proporcionando contexto y mejorando la legibilidad de los datos de la tabla.

CARACTERÍSTICAS DE <th>:

1. Crea una celda de encabezado dentro de una tabla HTML.
2. Tiene la misma apariencia que la etiqueta <td> (celda de datos), pero suelen mostrarse en negrita y centradas por defecto.
3. Mejora la accesibilidad para lectores de pantalla y otras tecnologías de asistencia.

ATRIBUTOS COMUNES DE <th>:

1. scope: Este atributo especifica el alcance de la celda de encabezado y puede tomar los siguientes valores:
   • col: Indica que el encabezado se aplica a una columna.
   • row: Indica que el encabezado se aplica a una fila.
   • colgroup: Indica que el encabezado se aplica a un grupo de columnas.
   • rowgroup: Indica que el encabezado se aplica a un grupo de filas.
2. abbr: Este atributo proporciona una abreviatura o una descripción abreviada del contenido de la celda de encabezado. Ayuda a mejorar la accesibilidad y proporciona información adicional sobre el contenido de la celda.
3. align: Especifica la alineación del contenido de la celda de encabezado. Sin embargo, este atributo se considera obsoleto en HTML5 y se recomienda utilizar CSS para estilos de alineación.
4. colspan: Especifica el número de columnas que una celda de encabezado debe ocupar en la tabla.
5. rowspan: Especifica el número de filas que una celda de encabezado debe ocupar en la tabla.
6. headers: Especifica una lista de identificadores de celdas que actúan como encabezados para la celda actual.

3.1.3. La etiqueta <td>

La etiqueta <td> en HTML se utiliza para definir una celda de datos dentro de una fila en una tabla. Esta etiqueta marca el inicio de una celda de datos y encierra el contenido que se mostrará en esa celda. Aquí tienes una descripción de su uso y algunos ejemplos:

CARACTERÍSTICAS DE <td>:

1. Define una celda de datos dentro de una fila de una tabla HTML.
2. Puede contener cualquier tipo de contenido HTML válido, como texto, párrafos, imágenes, listas, enlaces, etc.
3. Diferencia con <th>: 
   • A diferencia de la etiqueta <th> que se usa para celdas de encabezado, <td> se utiliza para celdas que contienen datos regulares.
   • Por defecto, el estilo del texto dentro de <td> está alineado a la izquierda, mientras que el texto dentro de <th> suele estar centrado y en negrita (aunque esto puede personalizarse con CSS).

ATRIBUTOS COMUNES DE <td>:

• colspan: Define el número de columnas que abarca una celda. Por ejemplo, colspan="2" hará que la celda se expanda horizontalmente ocupando el espacio de dos columnas.
• rowspan: Define el número de filas que abarca una celda. Por ejemplo, rowspan="2" hará que la celda se expanda verticalmente ocupando el espacio de dos filas.
• headers: Define el encabezado relacionado con la celda mediante su identificador (id). Esto se usa para crear relaciones entre celdas de datos y sus encabezados.
• class: Permite asignar una clase CSS a la celda. Las clases CSS se definen en una hoja de estilos separada y otorgan la posibilidad de aplicar estilos personalizados a la celda, como color de fondo, fuentes, márgenes, etc.
• style: Se puede utilizar para definir estilos en línea directamente dentro de la etiqueta <td>. Esto permite aplicar estilos concretos a una celda sin necesidad de una hoja de estilos externa.
• width: Define el ancho de la celda en pixeles (px) o en porcentaje (%) del ancho total de la tabla. Aunque se recomienda usar CSS para controlar el ancho de las celdas, este atributo sigue siendo válido.
• height: Define el alto de la celda en pixeles (px). Similar a width, se recomienda usar CSS para el control del alto, pero el atributo sigue estando disponible.
• align: Define la alineación horizontal del contenido dentro de la celda. Puede tomar valores como «left» (izquierda), «center» (centro), «right» (derecha), «justify» (justificado).
• valign: Define la alineación vertical del contenido dentro de la celda. Puede tomar valores como «top» (arriba), «middle» (medio), «bottom» (abajo).

Además de estos atributos, existen otros menos comunes que se utilizan en casos específicos.

RECOMENDACIÓN: Recuerda utilizar hojas de estilo en cascada (CSS) para definir la apariencia de las tablas, para un mejor control y mantenibilidad del código.

3.1.4. Ejemplo de uso de estas etiquetas de estructura para tablas HTML:

VISUALIZACIÓN:

Encabezado 1	Encabezado 2
Dato 1	Dato 2
Dato 3	Dato 4

Usando solamente estas etiquetas indispensables puedes crear una tabla funcional y estructurada en HTML. Sin embargo, si deseas estilizar o agregar funcionalidades adicionales a la tabla, como colores, bordes, o interactividad, necesitarías recurrir a CSS para estilos o incorporar las siguientes etiquetas para mejorar su accesibilidad y usabilidad.

3.2. Etiquetas de agrupación de contenido:

Las etiquetas de agrupación de contenido en HTML se utilizan para dividir y organizar el contenido de una tabla en secciones distintas.

Estas etiquetas ayudan a estructurar el contenido de la tabla de manera semántica y facilitan su comprensión tanto para los desarrolladores como para los motores de búsqueda. Estas son:

• Etiqueta <thead>
• Etiqueta <tbody>
• Etiqueta <tfoot>

3.2.1. La etiqueta <thead>:

La etiqueta <thead> en HTML se utiliza para definir el grupo de filas que contienen el encabezado de una tabla. Esta etiqueta se coloca dentro de la etiqueta <table> y generalmente se utiliza para incluir filas que contienen celdas de encabezado (<th>). Ejemplo:

CARACTERÍSTICAS DE <thead>:

1. Aunque es una práctica común utilizar <thead> para definir el encabezado de una tabla, no es obligatorio.
2. Si no se utiliza <thead>, los encabezados de la tabla pueden estar directamente dentro de la etiqueta <table>.
3. Sin embargo, usar <thead> proporciona una estructura semántica más clara y facilita la comprensión del código.
4. Al agrupar el encabezado de la tabla dentro de <thead>, es más fácil aplicar estilos específicos o realizar manipulaciones con JavaScript en el encabezado de la tabla.
5. Utilizar correctamente la etiqueta <thead> contribuye a una mejor accesibilidad de la tabla para los usuarios, especialmente aquellos que utilizan tecnologías de asistencia como lectores de pantalla.

ATRIBUTOS DE <thead>:

Si bien la etiqueta <thead> no posee atributos específicos para definir su funcionalidad, puede heredar algunos atributos generales de HTML que te permiten personalizar su comportamiento.

3.2.2. La etiqueta <tbody>:

La etiqueta <tbody> en HTML se utiliza para definir el grupo de filas que contienen el cuerpo principal de una tabla. Esta etiqueta se coloca dentro de la etiqueta <table> y generalmente contiene todas las filas que no son parte del encabezado (<thead>) ni del pie de la tabla (<tfoot>). Ejemplo:

CARACTERÍSTICAS DE <tbody>:

1. En el ejemplo, dentro de <tbody>, cada fila ( <tr>) define una sección horizontal de datos y cada una de las etiquetas <td> son para celdas individuales.
2. La etiqueta <tbody> se utiliza para agrupar las filas que contienen los datos principales de la tabla, excluyendo el encabezado y el pie de la tabla.
3. No es obligatorio usar la etiqueta <tbody>, sin embargo ayuda a organizar y estructurar semánticamente el contenido de la tabla.
4. Al agrupar el cuerpo principal de la tabla dentro de <tbody>, es más fácil aplicar estilos específicos o realizar manipulaciones con JavaScript en esa sección de la tabla.
5. Contribuyen a una mejor accesibilidad de la tabla para los usuarios, especialmente aquellos que utilizan tecnologías de asistencia como lectores de pantalla.

ATRIBUTOS DE <tbody>:

Si bien la etiqueta <tbody> no posee atributos específicos para definir su funcionalidad, puede heredar algunos atributos generales de HTML que te permiten personalizar su comportamiento.

3.2.3. La etiqueta <tfoot>:

La etiqueta <tfoot> en HTML se utiliza para definir el grupo de filas que contienen el pie de una tabla. Esta etiqueta se coloca dentro de la etiqueta <table> y generalmente contiene información resumida, totales u otros detalles relevantes que se colocan al final de una tabla.

CARACTERÍSTICAS DE <tfoot>:

1. Al igual que con <tbody>, dentro de <tfoot> cada fila ( <tr>) define una sección horizontal de datos y cada una de las etiquetas <td> son para celdas individuales.
2. Dentro de la etiqueta <tfoot>, generalmente se usa el atributo colspan para fusionar celdas horizontalmente, permitiendo que una celda del pie de la tabla abarque múltiples columnas.
   • Esto es útil cuando se desea combinar varias columnas en una única celda para presentar información resumida o totales en el pie de la tabla.
3. Se utiliza para agrupar las filas que contienen información que se mostrará al final de la tabla. Esto puede incluir totales, resúmenes, notas de copyright u otra información relevante para la tabla en su conjunto.
4. Al igual que las etiquetas <thead> y <tbody>, <tfoot> es opcional en una tabla. Si no se utiliza <tfoot>, la información de pie de tabla puede estar directamente dentro de la etiqueta <table>.
5. Proporciona una estructura semántica clara y facilita la comprensión del contenido de la tabla.
6. Al agrupar el pie de la tabla dentro de <tfoot>, es más fácil aplicar estilos específicos o realizar manipulaciones con JavaScript en esa sección de la tabla.
7. Utilizar correctamente la etiqueta <tfoot> contribuye a una mejor accesibilidad de la tabla para los usuarios, especialmente aquellos que utilizan tecnologías de asistencia como lectores de pantalla.

ATRIBUTOS DE <tfoot>:

Al igual que <thead> y <tbody>, <tfoot> no tiene atributos específicos para definir su funcionalidad, puede usar atributos HTML generales para fines de estilo o secuencias de comandos:

• id: Asigna una identificación única a la sección de pie de página.
• class: Aplica una clase CSS para diseñar todo el pie de página.

3.2.4. Ejemplo de uso de estas etiquetas de agrupación de contenido para tablas HTML:

VISUALIZACIÓN:

Encabezado 1	Encabezado 2
Dato 1	Dato 2
Dato 3	Dato 4
tfoot

En este ejemplo, la etiqueta <tfoot> contiene una fila (<tr>) que define el pie de la tabla. Como punto aparte, si observamos este último ejemplo a diferencia del ejemplo del punto 3.1.4. podemos ver que se puede crear una tabla sin usar estas etiquetas de agrupación <thead>, <tbody> y <tfoot>. Pero al usarlas estamos proporcionando una estructura semántica más clara y significativa para la tabla ayudando a los desarrolladores y motores de búsqueda a comprender mejor la organización y jerarquía de la información en la tabla.

3.3. Etiquetas adicionales:

Si volvemos a revisar el ejemplo de sintaxis de una tabla del punto 2, podemos ver que aparecen algunas etiquetas hasta aquí no mencionadas las cuales no son primordiales (<colgroup>, <col>, <caption>), pero brindan características adicionales los cuales iremos mencionando a continuación:

3.3.1. Etiqueta <colgroup> y <col>:

La etiqueta <colgroup> y su respectiva etiqueta <col> (se usan en conjunto normalmente) son utilizadas en HTML para definir grupos de columnas en una tabla y aplicar estilos y atributos a esas columnas de manera eficiente. Aquí te explico cada una:

1. Etiqueta <colgroup>: Se utiliza para agrupar un conjunto de columnas en una tabla HTML. Esto permite aplicar estilos, atributos y otras propiedades a todas las columnas dentro del grupo de manera simultánea.
2. Etiqueta <col>: Es una etiqueta de autocierre que se utiliza dentro de <colgroup> para definir una columna individual en una tabla HTML. Puedes aplicar atributos y estilos específicos a cada columna utilizando <col>.

EJEMPLO DE SU USO:

VISUALIZACIÓN:

Nombre	Edad
Juan	25

Explicación:

• La etiqueta <colgroup> se usa para crear un elemento contenedor para agrupar una o más etiquetas <col>. Se coloca dentro de la etiqueta <table>, después de cualquier elemento <caption> (si se usa) y antes de <thead>, <tbody>, <tfoot> o <tr>.
• Las etiquetas <col> se usan para aplicar estilos a las dos columnas, en este ejemplo a las columnas (<th>Nombre<th/> y <th>Edad</th>). Como podemos ver en la visualización del ejemplo.

ATRIBUTOS DE <colgroup> y <col>:

• ATRIBUTOS DE <colgroup>: No tiene atributos específicos para definir su funcionalidad básica. Sin embargo, sí puede heredar atributos HTML generales como:
  • id: Asigna un identificador único al grupo de columnas, útil para scripts o referencias de estilo.
  • class: Permite aplicar una clase CSS para diseñar el grupo completo.
  • style: Aunque no es un atributo estándar, algunos navegadores modernos lo admiten para aplicar estilos directamente al grupo de columnas.
• ATRIBUTOS DE <col>: Sí tiene algunos atributos específicos además de heredar atributos HTML generales:
  • span (opcional): Define el número de columnas a las que se aplica la definición actual. Por defecto, es 1 (afecta a la columna actual).
  • width (opcional): Define el ancho de la(s) columna(s) en píxeles, porcentaje o unidades relativas (em, vw, etc.).
  • id: Asigna un identificador único a la(s) columna(s).
  • class: Permite aplicar una clase CSS para diseñar la(s) columna(s).
  • style: Aplica estilos CSS directamente a la(s) columna(s).

3.3.2. Etiqueta <caption>:

La etiqueta <caption> en HTML define un título o leyenda para una tabla. Proporciona una manera de describir brevemente el contenido de la tabla, mejorando la accesibilidad y la claridad.

EJEMPLO DE SU USO:

VISUALIZACIÓN:

Tabla de Ejemplo

Nombre	Edad	Ciudad
Juan	25	Madrid

Como podemos ver en el ejemplo, la etiqueta <caption> proporciona el titulo sobre la tabla.

CARACTERÍSTICAS DE <caption>:

1. Crea un elemento de título asociado con una tabla.
2. Mejora la accesibilidad para lectores de pantalla y usuarios que dependen de descripciones de texto alternativas.
3. Para el SEO, Los motores de búsqueda pueden considerar el texto del título al indexar el contenido de la tabla.
4. Se coloca como hijo inmediato de la etiqueta <table>, normalmente justo después de la etiqueta <table> de apertura.
5. La etiqueta <caption> puede ser estilizada con CSS para ajustar su apariencia visual.

ATRIBUTOS DE <caption>:

Aunque se utiliza principalmente con fines informativos, puede heredar algunos atributos HTML generales para mejorar su funcionalidad y apariencia como; id, classs, tyle.

4. Anidación de tablas en HTML.

Las tablas anidadas en HTML es una técnica que permite colocar una tabla dentro de otra, creando una jerarquía de datos dentro de una estructura tabular. Esto puede ser útil para organizar información compleja de manera más lógica y visualmente atractiva.

Imagine una tabla principal que contiene información general, y dentro de algunas de sus celdas, se incluyen otras tablas más pequeñas que detallan información adicional relacionada con la celda principal. Esto es lo que se conoce como tablas anidadas en HTML.

4.1. Estructura básica de una tabla anidada:

• Tabla principal: La tabla que contiene las demás tablas anidadas.
• Tabla anidada: La tabla que se coloca dentro de una celda de la tabla principal.

4.2. ¿Cómo crear una tabla anidada en HTML?

1. Cree la tabla principal: Utilice la etiqueta <table> para definir la estructura de la tabla principal.
2. Defina las filas y celdas: Use las etiquetas <tr> y <td> para crear las filas y celdas de la tabla principal.
3. Incluya la tabla anidada: Dentro de una celda de la tabla principal, inserte otra etiqueta <table> para definir la tabla anidada.
4. Estructura la tabla anidada: Agregue filas y celdas (<tr> y <td>) a la tabla anidada como lo haría con una tabla normal.
5. Cierre las etiquetas: Cierre todas las etiquetas </table> en orden inverso al que las abrió.

4.3. Ejemplo y explicación de una tabla anidada HTML:

<table border="1">
    <tr>
      <th>Nombre</th>
      <th>Edad</th>
      <th>Ciudad</th>
      <th>Direcciones</th>
    </tr>
    <tr>
      <td>Alice</td>
      <td>30</td>
      <td>New York</td>
      <td>
        <table border="1">
          <tr>
            <th>Dirección principal</th>
            <th>Dirección secundaria</th>
          </tr>
          <tr>
            <td>123 Main St</td>
            <td>456 Elm St</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
      <td>Chicago</td>
      <td>789 Oak St</td>
    </tr>
  </table>Lenguaje del código: HTML, XML (xml)

VISUALIZACIÓN:

Nombre	Edad	Ciudad	Direcciones
Alice	30	New York	Dirección principal Dirección secundaria 123 Main St 456 Elm St
Bob	25	Chicago	789 Oak St

Aquí creo una tabla HTML con una tabla anidada, a continuación explico el código HTML usado para el ejemplo:

1. La primera fila esta compuesta por la primera etiqueta de fila de apertura y cierre <tr> y </tr>; y dentro de ella se engloban los encabezados con sus 4 etiquetas de encabezados compuestas por las etiquetas <th> que engloban los siguientes conceptos; Nombre, Edad, Ciudad y Direcciones.
2. La segunda fila que esta compuesta por la siguiente etiqueta de fila <tr> y </tr>; y dentro de la cual realizamos la anidación HTML, al incorporar otra tabla dentro de su cuarta etiqueta de datos <td>, la cual explico a continuación:
   • Dentro de sus tres primeras etiquetas de apertura y cierre de datos <td>; englobo los siguientes conceptos; Alice, 30 y New York.
   • Dentro de su cuarta etiqueta de apertura y cierre de dato <td>; es donde se engloba la tabla HTML anidada; para lo cual inserto toda una nueva estructura de código HTML para crear una nueva tabla, la cual, como podemos visualizar en el ejemplo, posee dos filas creadas con dos etiquetas de apertura y cierre para filas (<tr>), y cada fila con dos celdas que forman las columnas creadas con las etiquetas de celdas <th> (para los encabezados) y <td> (para los datos).
3. La tercera fila, compuesta por la tercera etiqueta de fila <tr>; es una fila común con cuatro celdas de datos para las 4 columnas creadas con sus respectivas etiquetas <td>, para los conceptos; Bob, 25, Chicago y 789 Oak St.

4.4. Consideraciones adicionales para la anidación de tablas HTML:

• Profundidad de anidación: Los estándares HTML permiten hasta 6 niveles de anidación de tablas.
• Complejidad y accesibilidad: Evite anidar tablas en exceso, ya que puede dificultar la lectura y la accesibilidad del contenido.
• Estilos CSS: Utilice CSS para personalizar la apariencia de las tablas anidadas, incluyendo bordes, relleno, espaciado y colores.

5. ¿Cómo combinar o unir celdas en las tablas HTML?

Para combinar o unir dos celdas en una tabla HTML, podemos usar los atributos colspan y rowspan, los cuales nos permiten fusionar celdas, creando celdas más grandes que ocupan el espacio de varias celdas.

Esta tarea nos da como resultado como cuando queremos combinar dos celdas en una planilla de Excel.

5.1. El atributo colspan:

Este atributo especifica el número de columnas que una sola celda debe abarcar horizontalmente.

Se aplica tanto a <th> (celdas de encabezado) como a <td> (celdas de datos). Cuando aumenta el valor de colspan, la celda se expande horizontalmente, cubriendo el número especificado de columnas adyacentes.

5.1.1. Ejemplo usando el atributo colspan:

Consideremos una tabla con categorías de productos y sus correspondientes subcategorías. Se puede utilizarlo colspan para abarcar una celda de encabezado en varias columnas para las categorías principales.

VISUALIZACIÓN:

Product Categories
Electronics	Clothing	Home Appliances
Laptops, Phones, TVs	Shirts, Pants, Dresses	Refrigerators, Washing Machines, Ovens

En este ejemplo, podemos ver como usando colspan="3" en la fila de encabezado, combinamos tres celdas en línea horizontal para crear una sola más grande

5.2. El atributo rowspan:

Similar a colspan, este atributo define el número de filas que una sola celda debe abarcar verticalmente.

También se aplica tanto a las células <th>como <td>. Con un valor de rowspan más alto, la celda se expande verticalmente, ocupando el espacio de varias filas debajo de ella.

5.1.2. Ejemplo usando el atributo rowspan:

Imagine una tabla que muestra los detalles de los empleados, incluido su nombre, designación y departamentos. Puede utilizar rowspan para combinar celdas verticalmente para departamentos que abarcan varias filas.

VISUALIZACIÓN:

Name	Designation	Department
Alice	Software Engineer	Web Development
Bob	Designer
Charlie	Manager	Sales

En el ejemplo, podemos ver como la segunda fila usa un rowspan="2" para combinar las celdas de la fila dos y tres y formar una sola.

6. ¿Cómo asociar dos celdas de una tabla HTML?

Cuando deseamos asociar los datos de una celda especifica para que intercepten en línea vertical y horizontal, podemos usar los atributos scope, headers, y id, los cuales son fundamentales para asociar correctamente los encabezados de columna o fila con las celdas de datos correspondientes en una tabla HTML.

6.1. Explicación detallada de cada uno de estos atributos:

1. Atributo scope:
   • El atributo scope se utiliza en las etiquetas <th> para especificar si el encabezado se aplica a una fila (row), una columna (col), un grupo de columnas (colgroup), o un grupo de filas (rowgroup).
   • Esto ayuda a los lectores de pantalla a interpretar correctamente la relación entre los encabezados y las celdas de datos en la tabla.
2. Atributo headers:
   • El atributo headers se utiliza en las etiquetas <td> o <th> para asociar celdas de datos individuales con los encabezados de columna o fila correspondientes.
   • El valor de este atributo debe ser una lista de IDs separados por espacios que correspondan a los IDs únicos de los encabezados de columna o fila que la celda está relacionada.
   • Esto es especialmente útil en tablas complejas donde un encabezado puede abarcar varias celdas de datos o viceversa.
3. Atributo id:
   • El atributo id se utiliza en las etiquetas <th> para asignar un identificador único a cada encabezado de columna o fila.
   • Estos IDs se utilizan luego en los atributos headers de las celdas de datos para establecer la asociación entre los encabezados y las celdas.
   • Es importante que cada ID sea único en toda la página HTML para evitar conflictos.

6.2. Ejemplo y explicación de su uso:

VISUALIZACIÓN:

	Encabezado 1	Encabezado 2
Fila 1	Dato 1	Dato 2
Fila 2	Dato 3	Dato 4

Explicación del ejemplo:

1. En este ejemplo, los atributos scope en los encabezados <th> indican que son encabezados de columna.
2. Mientras que los atributos scope en las celdas de datos <td> indican que son encabezados de fila.
3. Los atributos headers en las celdas de datos están asociados con los IDs únicos de los encabezados correspondientes.
   • Por ejemplo, la celda que contiene «Dato 1» especifica que está asociada con el encabezado «Encabezado 1».

El uso de estos atributos en tablas HTML garantiza una asociación adecuada entre los encabezados y las celdas de datos en la tabla, mejorando la accesibilidad y la comprensión del contenido por parte de los usuarios.

7. Las tablas HTML en WordPress.

Antes que nada, déjame decirte que no es estrictamente necesario saber usar todos estos códigos HTML para tablas si estas usando WordPress.

Por ejemplo, el editor de bloques Gutenberg (recomendado) en WordPress simplifica en gran medida la creación de contenido, incluidas las tablas, eliminando la necesidad de conocer todos los detalles del código HTML. Con Gutenberg, puedes crear tablas de manera visual y sin escribir código HTML directamente.

Sin embargo, es útil tener un conocimiento básico de HTML para comprender cómo funcionan las tablas y cómo estructurarlas adecuadamente en caso de que necesites realizar ajustes manuales o personalizaciones más avanzadas. Pero para la mayoría de los casos, puedes crear y editar tablas fácilmente en WordPress con Gutenberg sin necesidad de conocer todos los detalles del código HTML.

7.1. ¿Cómo crear tablas HTML desde WordPress?

Aquí te muestro cómo crear tablas HTML paso a paso utilizando el editor de bloques Gutenberg:

1. Accede al editor de bloques Gutenberg: Inicia sesión en tu panel de WordPress y ve a la página o entrada donde deseas agregar la tabla.
2. Agrega un nuevo bloque de tabla: Haz clic en el botón + en la parte superior izquierda del editor para agregar un nuevo bloque. En el buscador de bloques, escribe «tabla» y selecciona el bloque «Tabla».
3. Edita la tabla: Una vez que hayas agregado el bloque de tabla, verás una tabla vacía con filas y columnas. Puedes hacer clic en las celdas para escribir tu contenido, o puedes usar las opciones del bloque en el panel lateral derecho para editar la tabla según tus necesidades.
4. Añade o elimina filas y columnas: Puedes usar los botones de arriba de la tabla para agregar o eliminar filas y columnas según sea necesario. Además, puedes hacer clic derecho en la tabla para acceder a más opciones de edición.
5. Personaliza el estilo de la tabla (opcional): Si deseas personalizar el estilo de la tabla, como el color de fondo de las celdas o el borde de la tabla, puedes hacerlo utilizando CSS personalizado. Puedes agregar este CSS personalizado en el área de personalización de tu tema o utilizando un plugin de personalización CSS.
6. Previsualiza y publica: Antes de publicar tu página o entrada, asegúrate de previsualizarla para ver cómo se ve la tabla en tu sitio web. Una vez que estés satisfecho con el resultado, puedes publicar o actualizar tu página o entrada para que la tabla sea visible para tus visitantes.

Siguiendo estos pasos, podrás crear tablas HTML fácilmente en WordPress utilizando el editor de bloques Gutenberg. Este método te permite crear tablas de manera intuitiva y sin necesidad de conocimientos avanzados de HTML o CSS.

PREGUNTAS FRECUENTES Y RESUMEN