Tutorial HTML: Tablas (table, tr, td, th)

Estructura básica de una tabla: table, tr, td, th

Las tablas son elementos fundamentales en HTML que permiten organizar datos en filas y columnas, creando una estructura ordenada y fácil de leer. Aunque en el pasado se usaban para maquetar páginas web completas, hoy su uso se limita a lo que realmente son: presentación de datos tabulares como horarios, estadísticas o catálogos de productos.

Elementos principales de una tabla

Una tabla en HTML se construye mediante una estructura jerárquica de etiquetas, donde cada una cumple una función específica:

• <table>: Es el contenedor principal que define toda la tabla.
• <tr> (table row): Define una fila dentro de la tabla.
• <td> (table data): Define una celda de datos dentro de una fila.
• <th> (table header): Define una celda de encabezado, similar a <td> pero con formato especial.

Creando una tabla simple

Veamos cómo crear una tabla básica con estos elementos:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>25</td>
    <td>Spain</td>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
    <td>USA</td>
  </tr>
</table>

En este ejemplo:

1. La etiqueta <table> envuelve toda la estructura
2. La primera fila <tr> contiene tres celdas de encabezado <th>
3. Las siguientes filas contienen celdas de datos <td>

Diferencia entre th y td

La principal diferencia entre <th> y <td> es semántica y visual:

• <th>: Indica que la celda es un encabezado que describe el tipo de datos de una columna o fila. Por defecto, los navegadores muestran su contenido en negrita y centrado.
• <td>: Representa una celda de datos regular. Su contenido se muestra con formato normal y alineado a la izquierda.

Esta distinción es importante no solo visualmente sino también para la accesibilidad, ya que los lectores de pantalla pueden identificar y anunciar correctamente los encabezados de tabla.

Añadiendo bordes y estructura visual

Por defecto, las tablas HTML se muestran sin bordes visibles. Para mejorar la visualización, podemos añadir bordes básicos con CSS:

<table style="border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid black; padding: 8px;">Product</th>
    <th style="border: 1px solid black; padding: 8px;">Price</th>
  </tr>
  <tr>
    <td style="border: 1px solid black; padding: 8px;">Laptop</td>
    <td style="border: 1px solid black; padding: 8px;">999€</td>
  </tr>
  <tr>
    <td style="border: 1px solid black; padding: 8px;">Smartphone</td>
    <td style="border: 1px solid black; padding: 8px;">599€</td>
  </tr>
</table>

La propiedad border-collapse: collapse hace que los bordes de las celdas adyacentes se combinen en un solo borde, creando una apariencia más limpia.

Tablas con encabezados en filas y columnas

Las tablas más complejas pueden tener encabezados tanto en la primera fila como en la primera columna:

<table>
  <tr>
    <th>Quarter</th>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
    <th>Q4</th>
  </tr>
  <tr>
    <th>Sales</th>
    <td>10,000€</td>
    <td>12,500€</td>
    <td>14,800€</td>
    <td>16,200€</td>
  </tr>
  <tr>
    <th>Expenses</th>
    <td>8,000€</td>
    <td>9,200€</td>
    <td>9,800€</td>
    <td>10,500€</td>
  </tr>
</table>

En este ejemplo, tanto la primera fila como la primera columna utilizan <th> para identificar los encabezados de categorías y periodos.

Buenas prácticas para tablas HTML

Para crear tablas accesibles y bien estructuradas:

• Usa <th> para todos los encabezados de filas y columnas.
• Mantén una estructura consistente en todas las filas.
• Evita tablas excesivamente complejas; si es necesario, divídelas en tablas más pequeñas.
• No uses tablas para maquetar la página; utiliza CSS para el diseño.
• Incluye siempre un número igual de celdas en cada fila para mantener la integridad estructural.

Ejemplo práctico: Horario semanal

Veamos un ejemplo más completo de un horario semanal:

<table>
  <tr>
    <th>Time</th>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
  </tr>
  <tr>
    <th>9:00</th>
    <td>Mathematics</td>
    <td>Science</td>
    <td>English</td>
    <td>History</td>
    <td>Art</td>
  </tr>
  <tr>
    <th>11:00</th>
    <td>Physics</td>
    <td>Chemistry</td>
    <td>Biology</td>
    <td>Geography</td>
    <td>Music</td>
  </tr>
  <tr>
    <th>13:00</th>
    <td colspan="5">Lunch Break</td>
  </tr>
  <tr>
    <th>14:00</th>
    <td>Computer Science</td>
    <td>Physical Education</td>
    <td>Spanish</td>
    <td>Economics</td>
    <td>Free Period</td>
  </tr>
</table>

Este ejemplo muestra un horario escolar donde:

1. La primera fila contiene los días de la semana como encabezados
2. La primera columna muestra las horas como encabezados
3. Incluye una celda que se extiende por 5 columnas para el periodo de almuerzo

Tablas vacías y celdas sin contenido

Si necesitas crear celdas vacías, puedes hacerlo de dos formas:

<table>
  <tr>
    <th>Morning</th>
    <td>Available</td>
    <td></td>
  </tr>
  <tr>
    <th>Afternoon</th>
    <td>&nbsp;</td>
    <td>Booked</td>
  </tr>
</table>

• Una celda vacía <td></td> puede no mostrarse correctamente en algunos navegadores
• Usar   (non-breaking space) garantiza que la celda tenga un espacio visible

Consideraciones de accesibilidad

Las tablas deben ser accesibles para todos los usuarios, incluidos aquellos que utilizan tecnologías de asistencia:

• Usa estructuras simples cuando sea posible
• Asegúrate de que el orden de lectura (de izquierda a derecha, de arriba a abajo) tenga sentido
• Evita tablas anidadas que puedan confundir a los lectores de pantalla
• Considera añadir un elemento <caption> para describir el propósito de la tabla

<table>
  <caption>Monthly Budget Overview</caption>
  <tr>
    <th>Category</th>
    <th>Budget</th>
    <th>Actual</th>
  </tr>
  <tr>
    <td>Housing</td>
    <td>800€</td>
    <td>795€</td>
  </tr>
  <tr>
    <td>Transportation</td>
    <td>150€</td>
    <td>173€</td>
  </tr>
</table>

El elemento <caption> proporciona un título descriptivo para la tabla, mejorando la comprensión para todos los usuarios.

Elementos de agrupación: thead, tbody, tfoot

Las tablas HTML pueden volverse complejas cuando contienen muchos datos. Para mejorar su estructura y organización, HTML ofrece elementos de agrupación que permiten dividir la tabla en secciones lógicas: encabezado, cuerpo y pie de tabla. Estos elementos no solo mejoran la semántica del código, sino que también facilitan la aplicación de estilos y el manejo de tablas grandes.

Organizando tablas en secciones lógicas

Los tres elementos principales de agrupación son:

• <thead>: Define la sección de encabezado de la tabla
• <tbody>: Contiene el cuerpo principal de datos de la tabla
• <tfoot>: Define la sección de pie de la tabla (generalmente para totales o resúmenes)

Estos elementos actúan como contenedores para filas (<tr>) y permiten aplicar estilos o comportamientos específicos a cada sección de la tabla.

Estructura básica con elementos de agrupación

Veamos cómo implementar estos elementos en una tabla de ventas trimestrales:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Q1</th>
      <th>Q2</th>
      <th>Q3</th>
      <th>Q4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptops</td>
      <td>120</td>
      <td>145</td>
      <td>135</td>
      <td>160</td>
    </tr>
    <tr>
      <td>Smartphones</td>
      <td>250</td>
      <td>280</td>
      <td>320</td>
      <td>350</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total Units</th>
      <td>370</td>
      <td>425</td>
      <td>455</td>
      <td>510</td>
    </tr>
  </tfoot>
</table>

En este ejemplo:

1. <thead> contiene la fila con los nombres de las columnas
2. <tbody> contiene las filas de datos de productos
3. <tfoot> contiene una fila de resumen con los totales

Ventajas de usar elementos de agrupación

Utilizar estos elementos de agrupación ofrece múltiples beneficios:

• Mejora semántica: El código comunica claramente la estructura y propósito de cada parte de la tabla.
• Estilización específica: Permite aplicar estilos CSS diferentes a cada sección.
• Impresión optimizada: Los navegadores pueden repetir automáticamente <thead> y <tfoot> en cada página cuando se imprime una tabla larga.
• Accesibilidad: Las tecnologías de asistencia pueden identificar mejor las diferentes partes de la tabla.

Aplicando estilos a las secciones

Una ventaja clave de estos elementos es la posibilidad de aplicar estilos específicos a cada sección:

<style>
  thead {
    background-color: #f2f2f2;
    font-weight: bold;
  }
  tbody tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  tfoot {
    background-color: #e6e6e6;
    font-weight: bold;
  }
</style>

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>10€</td>
      <td>5</td>
      <td>50€</td>
    </tr>
    <tr>
      <td>Widget B</td>
      <td>15€</td>
      <td>3</td>
      <td>45€</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Order Total</td>
      <td>95€</td>
    </tr>
  </tfoot>
</table>

Este ejemplo muestra cómo aplicar:

• Un fondo gris claro al encabezado
• Filas alternadas con colores diferentes en el cuerpo
• Un estilo distintivo para el pie de tabla

Orden de los elementos en el código

Un aspecto interesante de estos elementos es que, aunque <tfoot> representa el pie de la tabla, en el código HTML se coloca generalmente antes de <tbody>:

<table>
  <thead>
    <!-- Filas de encabezado -->
  </thead>
  <tfoot>
    <!-- Filas de pie de tabla -->
  </tfoot>
  <tbody>
    <!-- Filas de datos -->
  </tbody>
</table>

Esta estructura era obligatoria en HTML 4, pero en HTML5 es opcional. Sin embargo, mantener este orden puede ser útil cuando se trabaja con tablas grandes, ya que permite al navegador renderizar el encabezado y pie antes de procesar todos los datos del cuerpo.

Múltiples secciones de cuerpo

HTML permite incluir múltiples elementos <tbody> dentro de una misma tabla, lo que resulta útil para agrupar filas relacionadas:

<table>
  <thead>
    <tr>
      <th>Department</th>
      <th>Employee</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="3">Marketing</th>
    </tr>
    <tr>
      <td></td>
      <td>John Smith</td>
      <td>3000€</td>
    </tr>
    <tr>
      <td></td>
      <td>Jane Doe</td>
      <td>3200€</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Development</th>
    </tr>
    <tr>
      <td></td>
      <td>Mike Johnson</td>
      <td>3500€</td>
    </tr>
    <tr>
      <td></td>
      <td>Sarah Williams</td>
      <td>3800€</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2">Total</th>
      <td>13500€</td>
    </tr>
  </tfoot>
</table>

Esta estructura permite:

• Agrupar visualmente los empleados por departamento
• Aplicar estilos diferentes a cada grupo
• Mejorar la navegación en tablas grandes

Consideraciones de compatibilidad

Los elementos de agrupación son ampliamente compatibles con los navegadores modernos, pero hay algunos aspectos a considerar:

• Aunque estos elementos son opcionales, su uso es altamente recomendado para tablas complejas.
• Si no se especifica un <tbody>, los navegadores crean uno implícitamente.
• Para máxima compatibilidad, asegúrate de que cada sección contenga al menos una fila <tr>.

Ejemplo práctico: Informe financiero

Veamos un ejemplo más completo de un informe financiero trimestral:

<table>
  <thead>
    <tr>
      <th>Financial Report</th>
      <th>Q1</th>
      <th>Q2</th>
      <th>Q3</th>
      <th>Q4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Revenue</th>
      <td>125,000€</td>
      <td>148,000€</td>
      <td>162,000€</td>
      <td>175,000€</td>
    </tr>
    <tr>
      <th>Expenses</th>
      <td>96,000€</td>
      <td>102,000€</td>
      <td>110,000€</td>
      <td>115,000€</td>
    </tr>
    <tr>
      <th>Marketing</th>
      <td>22,000€</td>
      <td>25,000€</td>
      <td>28,000€</td>
      <td>30,000€</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Net Profit</th>
      <td>7,000€</td>
      <td>21,000€</td>
      <td>24,000€</td>
      <td>30,000€</td>
    </tr>
  </tfoot>
</table>

Este informe muestra:

• Un encabezado claro con los períodos
• Datos organizados en el cuerpo de la tabla
• Un pie de tabla que muestra el resultado final (beneficio neto)

Combinando con otros atributos de tabla

Los elementos de agrupación funcionan perfectamente con otros atributos de tabla como colspan y rowspan:

<table>
  <thead>
    <tr>
      <th rowspan="2">Product</th>
      <th colspan="2">Q1</th>
      <th colspan="2">Q2</th>
    </tr>
    <tr>
      <th>Sales</th>
      <th>Revenue</th>
      <th>Sales</th>
      <th>Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product A</td>
      <td>120</td>
      <td>3,600€</td>
      <td>150</td>
      <td>4,500€</td>
    </tr>
    <tr>
      <td>Product B</td>
      <td>85</td>
      <td>4,250€</td>
      <td>100</td>
      <td>5,000€</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>205</td>
      <td>7,850€</td>
      <td>250</td>
      <td>9,500€</td>
    </tr>
  </tfoot>
</table>

Esta combinación crea una tabla más compleja pero bien estructurada que muestra datos de ventas trimestrales con encabezados de múltiples niveles.

Mejorando la accesibilidad

Para crear tablas más accesibles con estos elementos de agrupación:

• Añade un elemento <caption> para proporcionar un título descriptivo
• Usa el atributo scope en las celdas <th> para indicar si son encabezados de fila o columna
• Considera usar el atributo headers para asociar celdas de datos con sus encabezados en tablas complejas

<table>
  <caption>Quarterly Sales Report 2023</caption>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
      <th scope="col">Q3</th>
      <th scope="col">Q4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Laptops</th>
      <td>45</td>
      <td>50</td>
      <td>55</td>
      <td>60</td>
    </tr>
    <tr>
      <th scope="row">Tablets</th>
      <td>30</td>
      <td>35</td>
      <td>40</td>
      <td>45</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>75</td>
      <td>85</td>
      <td>95</td>
      <td>105</td>
    </tr>
  </tfoot>
</table>

Estos atributos de accesibilidad, combinados con los elementos de agrupación, crean una tabla que es tanto visualmente organizada como accesible para usuarios de tecnologías de asistencia.

Atributos de tablas: colspan, rowspan, scope

Las tablas HTML pueden representar datos complejos que requieren estructuras más elaboradas que simples cuadrículas uniformes. Para estos casos, HTML proporciona atributos especiales que permiten modificar el comportamiento de las celdas, combinándolas horizontal o verticalmente y mejorando la accesibilidad.

Combinando celdas horizontalmente con colspan

El atributo colspan permite que una celda se extienda a través de múltiples columnas, ocupando el espacio que normalmente ocuparían varias celdas adyacentes. Esto resulta útil para crear encabezados que abarquen varias columnas o para datos que aplican a múltiples categorías.

La sintaxis es simple: se añade el atributo colspan con un valor numérico que indica cuántas columnas debe ocupar la celda:

<table>
  <tr>
    <th colspan="3">Course Schedule</th>
  </tr>
  <tr>
    <th>Time</th>
    <th>Monday</th>
    <th>Wednesday</th>
  </tr>
  <tr>
    <td>9:00</td>
    <td>HTML Basics</td>
    <td>CSS Fundamentals</td>
  </tr>
  <tr>
    <td>11:00</td>
    <td colspan="2">Web Development Workshop</td>
  </tr>
</table>

En este ejemplo:

• El encabezado principal "Course Schedule" ocupa 3 columnas
• La celda "Web Development Workshop" ocupa 2 columnas, indicando que esta clase se imparte tanto el lunes como el miércoles

Combinando celdas verticalmente con rowspan

De manera similar, el atributo rowspan permite que una celda se extienda verticalmente a través de múltiples filas. Esto es útil para datos que permanecen constantes a lo largo de diferentes categorías o periodos.

<table>
  <tr>
    <th>Subject</th>
    <th>Mark</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>Mathematics</td>
    <td>85</td>
    <td rowspan="2">Passed</td>
  </tr>
  <tr>
    <td>Science</td>
    <td>92</td>
  </tr>
  <tr>
    <td>History</td>
    <td>65</td>
    <td>Failed</td>
  </tr>
</table>

En este ejemplo:

• La celda "Passed" ocupa 2 filas, aplicándose tanto a Matemáticas como a Ciencias
• Observa que no incluimos una celda de estado en la segunda fila, ya que ese espacio está ocupado por la celda con rowspan="2"

Combinando colspan y rowspan

Para tablas más complejas, podemos combinar ambos atributos para crear estructuras avanzadas:

<table>
  <tr>
    <th></th>
    <th colspan="2">Morning</th>
    <th colspan="2">Afternoon</th>
  </tr>
  <tr>
    <th></th>
    <th>9:00</th>
    <th>11:00</th>
    <th>14:00</th>
    <th>16:00</th>
  </tr>
  <tr>
    <th rowspan="2">Monday</th>
    <td>HTML</td>
    <td rowspan="2" colspan="2">Project Work</td>
    <td>Review</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>JavaScript</td>
  </tr>
</table>

En este horario:

• "Project Work" ocupa un bloque de 2×2 celdas, extendiéndose por 2 filas y 2 columnas
• La celda "Monday" se extiende verticalmente por 2 filas

Consideraciones importantes al usar colspan y rowspan

Al trabajar con estos atributos, es crucial mantener la integridad estructural de la tabla:

• Cuenta correctamente las celdas: Cuando usas colspan o rowspan, debes omitir el número correspondiente de celdas en las filas o columnas afectadas.

• Mantén el balance: El número total de celdas (contando las expandidas según su valor de colspan) debe ser igual en cada fila.

• Evita la complejidad excesiva: Las tablas con muchas celdas combinadas pueden volverse difíciles de mantener y pueden crear problemas de accesibilidad.

Ejemplo de error común:

<!-- Incorrecto: desequilibrio en el número de celdas -->
<table>
  <tr>
    <td colspan="2">Título</td>
    <td>Extra</td>  <!-- Esta celda causa un desequilibrio -->
  </tr>
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
</table>

Mejorando la accesibilidad con el atributo scope

El atributo scope mejora significativamente la accesibilidad de las tablas al indicar explícitamente si una celda de encabezado (<th>) se aplica a una fila, columna, grupo de filas o grupo de columnas. Esto ayuda a los lectores de pantalla a interpretar correctamente la estructura de la tabla.

Los valores posibles para el atributo scope son:

• col: La celda es un encabezado para una columna
• row: La celda es un encabezado para una fila
• colgroup: La celda es un encabezado para un grupo de columnas
• rowgroup: La celda es un encabezado para un grupo de filas

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Email</th>
    <th scope="col">Phone</th>
  </tr>
  <tr>
    <th scope="row">John Smith</th>
    <td>john@example.com</td>
    <td>555-1234</td>
  </tr>
  <tr>
    <th scope="row">Maria Garcia</th>
    <td>maria@example.com</td>
    <td>555-5678</td>
  </tr>
</table>

En este ejemplo:

• Los encabezados de columna (Name, Email, Phone) tienen scope="col"
• Los encabezados de fila (nombres de personas) tienen scope="row"

Uso de scope con colspan y rowspan

Cuando combinamos scope con celdas que utilizan colspan o rowspan, debemos elegir el valor adecuado según el propósito principal de la celda:

<table>
  <tr>
    <th scope="col">Time</th>
    <th scope="colgroup" colspan="5">Weekly Schedule</th>
  </tr>
  <tr>
    <th scope="col"></th>
    <th scope="col">Monday</th>
    <th scope="col">Tuesday</th>
    <th scope="col">Wednesday</th>
    <th scope="col">Thursday</th>
    <th scope="col">Friday</th>
  </tr>
  <tr>
    <th scope="row">9:00</th>
    <td>Meeting</td>
    <td>Planning</td>
    <td>Development</td>
    <td>Testing</td>
    <td>Deployment</td>
  </tr>
  <tr>
    <th scope="row">11:00</th>
    <td>Research</td>
    <td colspan="3">Workshop</td>
    <td>Review</td>
  </tr>
</table>

En este ejemplo:

• "Weekly Schedule" tiene scope="colgroup" porque es un encabezado que agrupa varias columnas
• Los encabezados de tiempo tienen scope="row" porque son encabezados de fila

Ejemplo práctico: Tabla de calificaciones

Veamos un ejemplo completo que utiliza todos estos atributos para crear una tabla de calificaciones:

<table>
  <caption>Student Performance Report</caption>
  <tr>
    <th scope="col">Student</th>
    <th scope="colgroup" colspan="2">Mathematics</th>
    <th scope="colgroup" colspan="2">Science</th>
    <th scope="col" rowspan="2">Final Grade</th>
  </tr>
  <tr>
    <th scope="col"></th>
    <th scope="col">Midterm</th>
    <th scope="col">Final</th>
    <th scope="col">Theory</th>
    <th scope="col">Lab</th>
  </tr>
  <tr>
    <th scope="row">Alex Johnson</th>
    <td>85</td>
    <td>90</td>
    <td>82</td>
    <td>95</td>
    <td rowspan="2">A</td>
  </tr>
  <tr>
    <th scope="row">Sarah Miller</th>
    <td>92</td>
    <td>88</td>
    <td>90</td>
    <td>93</td>
  </tr>
  <tr>
    <th scope="row">David Wilson</th>
    <td>78</td>
    <td>75</td>
    <td>80</td>
    <td>85</td>
    <td>B</td>
  </tr>
  <tr>
    <th scope="row" colspan="5">Class Average</th>
    <td>B+</td>
  </tr>
</table>

Esta tabla demuestra:

• Uso de colspan para agrupar las columnas de Matemáticas y Ciencias
• Uso de rowspan para la calificación final que aplica a dos estudiantes
• Uso apropiado de scope para mejorar la accesibilidad
• Una fila de resumen al final que utiliza colspan para extenderse a través de múltiples columnas

Buenas prácticas para el uso de estos atributos

Para crear tablas efectivas y accesibles:

• Usa colspan y rowspan con moderación: Las tablas muy complejas pueden ser difíciles de entender.

• Siempre incluye el atributo scope en las celdas <th> para mejorar la accesibilidad.

• Mantén la coherencia estructural: Asegúrate de que cada fila tenga el mismo número efectivo de celdas.

• Prueba la tabla: Verifica que la estructura se muestre correctamente en diferentes navegadores.

• Considera alternativas: Para datos muy complejos, a veces es mejor dividir la información en múltiples tablas más simples.

• Añade un elemento <caption>: Proporciona un título descriptivo que explique el propósito de la tabla.

Compatibilidad y soporte

Estos atributos tienen excelente soporte en todos los navegadores modernos:

• colspan y rowspan son compatibles con todos los navegadores desde las primeras versiones de HTML.
• El atributo scope es bien soportado por los lectores de pantalla modernos y no afecta la visualización de la tabla para usuarios sin discapacidades.

Al dominar estos atributos, podrás crear tablas HTML que no solo presenten datos complejos de manera efectiva, sino que también sean accesibles para todos los usuarios, independientemente de cómo accedan a tu contenido web.