Jak semantycznie zakodować tabelę zagnieżdżoną HTML, która wyrównuje (i kojarzy) z nagłówkami tabeli nadrzędnej

Question

Edytuj: Wybrana odpowiedź zawiera łącze do działającego skrzypka, które udało mi się skomponować bez użycia tabeli zagnieżdżonej.

Chcę semantycznie kodować tabelę w HTML z układem podobnym do poniższego obrazka. Niestety nie udało mi się znaleźć czegoś podobnego tutaj w sieci.

byłem w stanie zmusić wygląd poprzez ręczne ustawienie szerokości komórki, ale chcę, aby upewnić się, że kod mam produkcji ma sens, i nie sądzę, że to przypadek, bo bez ręcznie ustawiając szerokość, standardowe renderowanie wygląda bardziej jak na poniższym obrazku.

Dotychczas problematyczny kod mam wymyślić wygląda następująco:

<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

Bez obrazy to trochę trudno powiedzieć, ale myślę, że lepszym rozwiązaniem niż tabel zagnieżdżonych byłoby po prostu użyć atrybutów colspan i rowspan.

Edytuj: Widząc obrazy, które powiedziałbym, że możesz zdecydowanie osiągnąć to używając rowspan (i colspan w sposób, w jaki już go używasz).

Nie trzeba również ustawiać atrybutu scope, jeśli jest to "col". Domyślnie jest to "col".

Edytuj: Jak zauważa Marat Tanalin, domyślną wartością atrybutu scope jest auto, co "powoduje, że komórka nagłówka ma zastosowanie do zestawu komórek wybranych na podstawie kontekstu". I które z mojego doświadczenia działa dokładnie tak samo, jak ustawienie "col" (dla screenreaderów).

Edycja: Oto dwa wielkie artykułów na oznaczaniu zaawansowanych tabel: 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/

EDIT: Here is the fiddle wykazujących pożądane zachowanie (wizualnie przynajmniej) oraz kod źródłowy tej skrzypce następująco:

<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

Tak, jak wszystkie powyższe sugestie, wszystko zależy od podziału na rzędy.

oto re-write Twojego kodu:

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