Семантически Исправьте списки Флажка HTML

Таблицы были бы самым простым способом, но таблицы должны использоваться для данных, как мы знаем.

Поэтому я бы использовал конструкцию div:

+---style="width:XXXpx"--------------------------------------------------+
|+---style="width:100%"-------------------------------------------------+|
||                                                +class=opt++class=opt+||
||                                                | title a || title b |||
||                                                +---------++---------+||
|+----------------------------------------------------------------------+|
|+---style="width:100%"-------------------------------------------------+|
||+----------------------------------------------++class=opt++class=opt+||
||| Option 1                                     ||   [x]   ||   [x]   |||
||+----------------------------------------------++---------++---------+||
|+----------------------------------------------------------------------+|
| //repeat for every option                                              |
+------------------------------------------------------------------------+

Все должно быть помещено в CSS. (Также "встроенные" определения ширины выше)

.opt { 
  float:right; width: 10%; /*probably*/ z-index: 99; 
  /*edit2:*/ position: relative;
}

Я не уверен, работает ли это, я бы попробовал вот так.

РЕДАКТИРОВАТЬ: Ах, эти блоки являются "div", кстати.

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

Подумайте, как бы вы отобразили этот набор единиц и нулей: вы бы сделали это в таблице. Все, что вы делаете, - делаете ячейки доступными для редактирования.

Я убежден даже больше, чем когда начал писать этот пост. Таблица - подходящая структура для этого.

Семантически этот макет выглядит как таблица, поэтому, если вам действительно нужно использовать этот макет, вы должны пометить его как таблицу. (Используйте th для заголовков и параметров, td для ячеек, содержащих флажки.)

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

Я предлагаю использовать две группы параметров, например:

<fieldset><legend>Title 1</legend>
  <input type="checkbox" id="t1o1"><label for="t1o1">Option 1</label>
  <input type="checkbox" id="t1o2"><label for="t1o2">Option 2</label>
  ...
</fieldset>
<fieldset><legend>Title 2</legend>
  ...
  <input type="checkbox" id="t3o2"><label for="t2o3">Option 2</label>
  <input type="checkbox" id="t2o3"><label for="t2o3">Option 3</label>
</fieldset>

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