Изменить: выбранный ответ содержит ссылку на рабочую скрипту, которую я смог создать без использования вложенной таблицы.
Я хочу семантически закодировать таблицу в HTML с макетом, как на картинке ниже. К сожалению, я не смог найти ничего подобного в сети.
Мне удалось заставить внешний вид вручную установить ширину ячеек, но я хочу убедиться, что код, который я создаю, имеет смысл, и я не думаю, что это дело, потому что без ручной установки ширины, стандартный рендеринг больше похож на следующий снимок.
Пока что возникший проблемный код выглядит следующим образом:
<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>