Ejemplo práctico: Atributos avanzados

code Código completo
<table border="1">
  <caption>Informe de Ventas 2023</caption>
  <thead>
    <tr>
      <th rowspan="2" scope="row">Categoría</th>
      <th colspan="2" scope="colgroup">Ventas</th>
    </tr>
    <tr>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2" headers="categoria">Electrónica</td>
      <td headers="categoria q1">$15,000</td>
      <td headers="categoria q2">$18,500</td>
    </tr>
    <tr>
      <td headers="categoria q1">$12,300</td>
      <td headers="categoria q2">$14,200</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total: $60,000</td>
    </tr>
  </tfoot>
</table>
visibility Resultado visual
Informe de Ventas 2023
Categoría Ventas
Q1 Q2
Electrónica $15,000 $18,500
$12,300 $14,200
Total: $60,000
lightbulb Atributos utilizados
check_circle
rowspan - Fusiona celdas verticalmente
check_circle
colspan - Fusiona celdas horizontalmente
check_circle
scope - Define relación entre celdas
check_circle
headers - Asocia celdas con sus encabezados
check_circle
caption - Proporciona contexto sobre la tabla