Таблица сложной формы против div

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

Вот несколько правил:

1. Установите максимальную ширину формы или элемента-оболочки формы. Если вы хотите разместить элементы в одной строке, убедитесь, что их общая ширина не превышает этой ширины.
2. Если вы добавляете горизонтальные отступы/поля к плавающим элементам, помните, что они добавляются к общей ширине элемента.
3. Избегайте смешивания ширины в процентах с отступами и полями в пикселях. Примените ширину в процентах к родительскому элементу и отступы/поля в пикселях к дочернему элементу.
4. Используйте очищающие элементы между рядами элементов, чтобы все было в порядке.

Что касается разметки, вы можете использовать элементы формы вместе с CSS для создания семантической структуры:

<fieldset>
    <legend>Fieldset Title</legend>

    <label for="input1">Input 1:</label>
    <span><input type="text" id="input1" name="input1"/></span>
    <label for="input2">Input 2:</label>
    <span><input type="text" id="input2" name="input2"/></span>

    <br/>

    <label for="input3">Input 3:</label>
    <span><input type="text" id="input3" name="input3"/></span>
    <label for="input4">Input 4:</label>
    <span><input type="text" id="input4" name="input4"/></span>
</fieldset>

И CSS:

fieldset {
    padding: 20px 0;
    width: 600px;
    margin: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    background: black;
    color: white;
}

label, span{
    float: left;
    width: 150px;
}

input {
    width: 120px;  
}

br {
    clear: both;  
}

Вы можете увидеть результат здесь.

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

Для таблицы с жидким макетом — а жидкий макет, как правило, очень желателен — гораздо сложнее организовать форму без отображения в стиле таблицы, потому что float и position не позволяют легко выполнять вычисления типа «эта ячейка составляет половину оставшейся ширины». родителя после выделения меток фиксированной ширины».

Таким образом, в подобных случаях, которые, безусловно, включают форму с двумя столбцами, которую вы разместили, значения table-* CSS display являются вашей единственной возможностью. Если вы нацелены только на IE8 и другие современные браузеры, вы можете использовать div и установить display: table-row и др. в таблице стилей. Однако для совместимости с IE6-7 и другими старыми/мобильными/нишевыми браузерами вам придется использовать настоящие элементы <table>/<tr>/<td>, поскольку только современные браузеры поддерживают таблицу-CSS независимо от элементов таблицы.

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

Примечание. Для форм с гибким макетом у вас также возникает проблема с размером полей ввода, чтобы они соответствовали родительскому элементу. input { width: 100%; } почти делает это, но не совсем, потому что width не включает границу или отступы, которые ввод получает по умолчанию. Вы можете использовать CSS3 box-sizing и его версии для конкретных браузеров, чтобы обойти это для современных браузеров, но если вы хотите, чтобы он точно соответствовал пикселю в IE6-7, вам придется использовать отступы для родительских элементов, равные граница/заполнение дочернего поля ввода.

• General information - это какой-то список, а точнее список ключей > значений - <dl />, вероятно, будет лучшей структурой для него.
• Issues values — это таблица,
• Ratings — это таблица,
• Оба Redemption и Indicators являются списками - ненумерованные списки <ul />