Playground de tablas en HTML

<div class="table-wrapper">
  <table class="data-table">
    <caption>Estado del proyecto web</caption>

    <colgroup>
      <col>
      <col>
      <col>
      <col class="highlighted-column">
    </colgroup>

    <thead>
      <tr>
        <th scope="col">Fase</th>
        <th scope="col">Tarea</th>
        <th scope="col">Responsable</th>
        <th scope="col">Estado</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th scope="row" rowspan="2">Planificación</th>
        <td>Alcance</td>
        <td>Ana</td>
        <td>Completado</td>
      </tr>
      <tr>
        <td>Investigación</td>
        <td>Luis</td>
        <td>Completado</td>
      </tr>
      <tr>
        <th scope="row" rowspan="2">Desarrollo</th>
        <td>HTML semántico</td>
        <td>Mei</td>
        <td>En curso</td>
      </tr>
      <tr>
        <td>Accesibilidad</td>
        <td>Sam</td>
        <td>Pendiente</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <th colspan="3" scope="row">Tareas completadas</th>
        <td>2 de 4</td>
      </tr>
    </tfoot>
  </table>
</div>

.table-wrapper {
  overflow-x: auto;
}

.data-table {
  inline-size: 100%;
  border-collapse: collapse;
  color: CanvasText;
}

.data-table caption {
  margin-block-end: 0.75rem;
  font-weight: 700;
  text-align: start;
}

.data-table :is(th, td) {
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in oklch, CanvasText 24%, transparent);
  text-align: start;
}

.data-table thead,
.data-table tfoot {
  background: color-mix(in oklch, Highlight 16%, Canvas);
}

.data-table .highlighted-column {
  background: color-mix(in oklch, Highlight 10%, transparent);
}

.data-table tbody tr:nth-child(even) {
  background: color-mix(in oklch, CanvasText 6%, transparent);
}

.table-wrapper {
  overflow-x: auto;
}

.data-table {
  inline-size: 100%;
  border-collapse: collapse;
  color: CanvasText;

  caption {
    margin-block-end: 0.75rem;
    font-weight: 700;
    text-align: start;
  }

  :is(th, td) {
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in oklch, CanvasText 24%, transparent);
    text-align: start;
  }

  :is(thead, tfoot) {
    background: color-mix(in oklch, Highlight 16%, Canvas);
  }

  .highlighted-column {
    background: color-mix(in oklch, Highlight 10%, transparent);
  }

  tbody tr:nth-child(even) {
    background: color-mix(in oklch, CanvasText 6%, transparent);
  }
}