Что лучший способ состоит в том, чтобы разработать список флажков

Я бы использовал эту разметку:

<div id="checkboxes">
  <label>some label</label>
  <ul>
    <li><input type="checkbox"> checkbox 1</li>
    <li><input type="checkbox"> checkbox 2</li>
    <li><input type="checkbox"> checkbox 3</li>
    <li><input type="checkbox"> checkbox 4</li>
  </ul>
</div>

и эти стили:

#checkboxes label {
  float: left;
}
#checkboxes ul {
  margin: 0;
  list-style: none;
  float: left;
}

Таблицы не являются злом, но чаще всего они используются по неправильным причинам. Они предназначены для больших html-файлов (плохо для производительности и пропускной способности), обычно с более загроможденной html-структурой (плохо для удобства обслуживания). Что касается табличных данных, то они отличные.

На мой взгляд, это скорее список, чем таблица (но Вы не перечислили всю картину). Для меня это выглядит как список определений, поэтому я бы использовал его (в противном случае я бы придерживался примера неупорядоченного списка, например решения Magnar , добавляя метки.

Версия списка определений:

 <dl id="checkboxes">
        <dt>same label or term</dt>
        <dd><input type="checkbox" id="chk1" /><label for="chk1">checkbox 1</label></dd>
        <dd><input type="checkbox" id="chk2" /><label for="chk2">checkbox 2</label></dd>
        <dd><input type="checkbox" id="chk3" /><label for="chk3">checkbox 3</label></dd>
        <dd><input type="checkbox" id="chk4" /><label for="chk4">checkbox 4</label></dd>
  </dl>

Этот семантический HTML:

<fieldset class="checkboxgroup">
    <p>some label</p>
    <label><input type="checkbox"> checkbox 1</label>
    <label><input type="checkbox"> checkbox 2</label>
    <label><input type="checkbox"> checkbox 3</label>
    <label><input type="checkbox"> checkbox 4</label>
</fieldset>

И этот довольно простой CSS:

.checkboxgroup{
    width: 20em;
    overflow: auto;
}
.checkboxgroup p{
    width: 7em;
    text-align: right;
}
.checkboxgroup label{
    width: 12em;
    float: right;
}

Отрегулируйте ширину по мере необходимости.

Правильный способ сделать это - заменить p в моем HTML с элементом legend , но он не будет оформлять так, как вы хотите, без довольно уродливого CSS.

<div style="float: left;">
    some label
</div>

<div style="float: left;">
    <input type="checkbox" />&#160;checkbox 1<br />
    <input type="checkbox" />&#160;checkbox 2<br />
    <input type="checkbox" />&#160;checkbox 3<br />
    <input type="checkbox" />&#160;checkbox 4
</div>