Как семантически кодировать HTML-вложенную таблицу, которая выравнивает (и ассоциирует) с родительскими заголовками таблицы

Изменить: выбранный ответ содержит ссылку на рабочую скрипту, которую я смог создать без использования вложенной таблицы.

Я хочу семантически закодировать таблицу в HTML с макетом, как на картинке ниже. К сожалению, я не смог найти ничего подобного в сети.

enter image description here

Мне удалось заставить внешний вид вручную установить ширину ячеек, но я хочу убедиться, что код, который я создаю, имеет смысл, и я не думаю, что это дело, потому что без ручной установки ширины, стандартный рендеринг больше похож на следующий снимок.

enter image description here

Пока что возникший проблемный код выглядит следующим образом:

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

Ответы

Ответ 1

Без изображений, которые трудно сказать, но я думаю, что лучшим решением, чем вложенные таблицы, было бы просто использовать атрибуты colspan и rowspan.

Изменить: видя изображения, которые я бы сказал, вы можете наиболее точно достичь этого, используя rowspan (и colspan способ, которым вы его уже используете).

Кроме того, вам не нужно устанавливать атрибут scope, если он "col" . По умолчанию используется значение "col" .

Изменить: поскольку Марат Таналин указывает, что значение атрибута scope по умолчанию - это auto, которое "делает ячейку заголовка применено к набору ячеек, выбранных на основе контекста". И что по моему опыту действует точно так же, как установка его на "col" (для прокрутчиков).

Изменить: Вот две замечательные статьи по разметке расширенных таблиц: 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/

Изменить: Вот скрипка, демонстрирующая желаемое поведение (по крайней мере визуально) и исходный код этой скрипки:

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

Ответ 2

yep, как и все вышеприведенные взгляды, все это касается строк.

здесь перепишите код:

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