keywords - Cómo codificar semánticamente una tabla anidada HTML que se alinea(y asocia) con los encabezados de la tabla principal

meta tags generator

Question

Editar: La respuesta seleccionada contiene un enlace al violín de trabajo que pude redactar sin el uso de una tabla anidada.

Quiero codificar semánticamente una tabla en HTML con un diseño como el que se muestra a continuación. Desafortunadamente, no he podido encontrar nada parecido aquí en la red.

He podido forzar la apariencia al configurar manualmente los anchos de celda, pero quiero asegurarme de que el código que estoy produciendo tenga sentido, y no creo que ese sea el caso, porque sin configurar manualmente los anchos, el renderizado estándar parece más como la siguiente imagen

Hasta ahora, el código problemático que he creado se ve así:

<table>
  <thead>
    <tr>
      <th scope="col">Type of Loss Dollar</th>
      <th scope="col">Reserve Amount</th>
      <th scope="col">Paid Amount</th>
      <th scope="col">Total This Loss</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td colspan="3">
        <table>
          <tbody>
            <tr>
              <th scope="row">Medical</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr><tr>
              <th scope="row">Indemnity</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr><tr>
              <th scope="row">Expense</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr>
          </tbody>
        </table>
      </td><td>
        TOTAL
      </td>
    </tr>
  </tbody>
</table>

Answer 1

Sí, como sugirieron todos los anteriores, todo se trata de la fila de filas.

Aquí hay una re-escritura de su código:

<table>
  <thead>
    <tr>
      <th>Type of Loss Dollar</th>
      <th>Reserve Amount</th>
      <th>Paid Amount</th>
      <th>Total This Loss</th>
      <th>Last Heading</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td rowspan="3"></td>
      <td>Medical</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td rowspan="3">TOTAL</td>
    </tr><tr>
      <td>Indemnity</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr><tr>
      <td>Expense</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr>
  </tbody>
</table>

Answer 2

Sin las imágenes es un poco difícil de decir, pero creo que una solución mejor que las tablas anidadas sería simplemente usar los atributos colspan y rowspan .

Edición: viendo las imágenes, diría que definitivamente puedes lograr eso usando rowspan (y colspan la forma en que lo estás usando ya).

Además, no es necesario establecer el atributo de scope si es "col". El valor predeterminado es "col".

Edición: como Marat Tanalin señala que el valor predeterminado del atributo de scope es en realidad auto que "hace que la celda del encabezado se aplique a un conjunto de celdas seleccionadas según el contexto". Y que, según mi experiencia, actúa exactamente igual que configurarlo en "col" (para lectores de pantalla).

Edición: Aquí hay dos grandes artículos sobre cómo marcar tablas avanzadas: http://www.456bereastreet.com/archive/200910/use_the_th_element_to_specify_row_and_column_headers_in_data_tables/ & http://www.456bereastreet.com/archive/200410/bring_on_the_tables/

Edición: Aquí está el violín que muestra el comportamiento deseado (visualmente al menos) y el código fuente de ese violín sigue:

<table border="1">
  <thead>
    <tr>
      <th>Status</th>
      <th>Type of Loss Dollar</th>
      <th>Reserve Amount</th>
      <th>Paid Amount</th>
      <th>Total This Loss</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td rowspan="3">Open</td>
      <td>Medical</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td rowspan="3">TOTAL</td>
    </tr><tr>
      <td>Indemnity</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr><tr>
      <td>Expense</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr>
  </tbody>
</table>