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

Question

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

Quiero codificar semánticamente una tabla en HTML con un diseño como el de la imagen siguiente. Lamentablemente, no he podido encontrar nada parecido aquí en la red.

he podido forzar el aspecto manualmente ajustando los anchos de células, pero yo quiero para asegurarse de que el código que estoy produciendo tiene sentido, y no creo que ese es el caso, ya que sin ajuste manual de los anchos, la representación estándar se parece más a la siguiente imagen.

Hasta ahora, el código problemático que he llegado con el siguiente aspecto:

<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

Sin las imágenes que 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.

Editar: Ver las imágenes Yo diría que definitivamente puede lograr eso usando rowspan (y colspan la forma en que lo está usando ya).

Además, no necesita establecer el atributo scope si es "col". Por defecto es "col".

Editar: Como Marat Tanalin señala que el valor predeterminado del atributo 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 en mi experiencia actúa exactamente igual a configurarlo en "col" (para lectores de pantalla).

Editar: Aquí hay dos grandes artículos sobre el marcado de las 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/

Editar: Here is the fiddle que exhiben comportamiento deseado (visualmente al menos) y el código fuente de ese violín siguiente manera:

<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> 

Answer 2

sí, como todos los píos anteriores sugirieron, todo se trata de las filas.

aquí es 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>