HTML Demos

Demo en vivo

Tabla completa con thead · tbody · tfoot

colspan y rowspan — fusionar celdas

scope="col" — el th es cabecera de columna.
scope="row" — el th es cabecera de fila. Ambos ayudan a lectores de pantalla a asociar cabeceras con datos.

caption — es el título de la tabla, accesible y visible. Siempre ponlo.

Código importante

copiar<table>
  <!-- caption: título accesible -->
  <caption>Nombre descriptivo</caption>

  <thead>
    <tr>
      <!-- scope="col": cabecera de columna -->
      <th scope="col">Nombre</th>
      <th scope="col">Valor</th>
      <th scope="col">Estado</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <!-- th con scope="row": cabecera de fila -->
      <th scope="row">Fila A</th>
      <td>100€</td>
      <td>Activo</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <!-- colspan fusiona N columnas -->
      <td colspan="2">Total</td>
      <td>100€</td>
    </tr>
  </tfoot>
</table>

<!-- rowspan: fusiona N filas hacia abajo -->
<td rowspan="3">Ocupa 3 filas</td>

<!-- colgroup: estilo a columnas enteras -->
<colgroup>
  <col style="width: 40%">
  <col span="2" style="width: 30%">
</colgroup>