Верстка в таблицах или в дивах

Рейтинг: 2Ответов: 2Опубликовано: 26.05.2011

Сделан вопросом из ответа в теме: Разметка таблицы html (@ХэшКод)

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

<table>
    <tr>
        <td align=left>
        </td>
        <td align=right>
        </td>
    </tr>
</table>

Спасибо за ответ!

html вёрстка
Источник: Stack Overflow на русском

Ответы

▲ 6

Все это легко гуглится по запросу "блочная верстка".

Из плюсов блочной верстки можно отметить меньший размер кода, меньшее количество тегов и гибкость кода: зачастую блоки можно менять местами без изменения отображения страницы, что позволяет поместить важную информацию ближе к началу страницы. Также, блочной версткой можно заверстать всевозможные сложные элементы, например, игровые карты (ссылка) или, что встречается чаще, всевозможные иконки в углу нужного элемента. Плюс, преставьте ситуацию, что у вас есть каталог на 100 наименований (картинка + текст + форма) и надо удалить из середины несколько товаров. В таблице вы все это замучаетесь двигать, а при блочной верстке вы просто удалите ненужные блоки, а все остальное рассчитает браузер.

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

Даю пару ссылок на уже готовую блочную верстку: http://studioad.ru/index/0-10 и http://csstemplater.com/.

И пример верстки сообщений в гостевой книге:

  1. Вариант 1:

    <table>
    <tr>
        <td align="left">title</td>
        <td align="right">date</td>
    </tr>
    <tr>
        <td colspan="2" align="left">text</td>
    </tr>
</table>

  2. Вариант 2:

    <div class="mess">
    <div class="head">
        <div class="date">date</div>
        title
    </div>
    <div class="text">
        text
    </div>
</div>

CSS:

.mess{}
.mess .head{}
.mess .head .date{float:right}
.mess .text{}

Как видно, вариант 2 длиннее примерно на треть. Однако, когда сообщений становится много, второй вариант выходит вперед за счет меньшего размера разметки. А если надо будет добавить пару дополнительных полей? Если отодвинуть дату от края или вообще, выводить ее слева? Во втором варианте это можно сделать правкой пары строк в CSS файле. А вот в первом придется ковыряться со структурой. Плюс, если дать код стороннему верстальщику, по названиям классов во втором варианте он догадается о значении div'ов. А вот в первом ему придется поломать голову.

И, напоследок: javascript:alert(document.getElementsByTagName('*').length);void(0); — проверьте себя).

▲ 3

Вот ваш код:

<table>
    <tr>
        <td align=left>
        </td>
        <td align=right>
        </td>
    </tr>
</table>

А вот мой:

<div class="left"></div>
<div class="right"></div>

B css:

.left, .right {
width: 70px;
font-weight: bold;
float: left;
}
.right {
font-weight: normal;
width: 100px;
}

Еще вопросы есть?