Нравится

Табличная или блочная верстка

Один из самых старых и бессмысленных споров среди создателей сайтов - какая верстка лучше: табличная или блочная. Вопрос этот очень спорный и каждый по-своему прав.

Начну с преимуществ и недостатков табличной верстки:

  • Обладают высокой кроссбраузерностью
  • Таблицы не перекрываются друг с другом даже при маленьких разрешениях
  • Таблицы не перекрываются в принципе, что не позволяет создать многослойный дизайн
  • Гораздо проще блочной верстки в плане написания
  • Очень много лишнего кода из-за бесконечного создания строк и столбцов
  • Теперь о преимуществах и недостаках блочной верстки:

  • Огромные проблемы с кроссбраузерностью
  • В отличии от таблиц, блоки - универсальное средство для создания любого дизайна
  • Значительно меньше HTML-кода и, как следствие, уменьшение веса страницы
  • Гораздо сложнее табличной верстки
  • Блоки начинают наезжать (либо спадать) друг на друга при маленьких разрешениях экрана или даже незначительных изменениях макета
  • Теперь по порядку.

    Кроссбраузерность

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

    В принципе, на этом можно было бы и закончить. Но не все так однозначно.

    Перекрытие блоков

    Таблицы обладают жестко фиксированной структурой: строка и столбец, быть может, с объединением ячеек. 99% сайтов соответствуют такой компоновке. Но таблицами нельзя сделать, чтобы одна таблица "нависала" над другой, хотя блоками это делается очень просто.

    Объем кода и простота верстки

    Объем текста при табличной верстке часто намного больше. Согласитесь, одно дело написать "<div></div>", чем "<table><tr><td></td></tr></table>". Поэтому табличная верстка, зачастую, просто не читается из-за бесконечного чередования ячеек, строк и самих таблиц.

    За счет объема текста блочная страница загружается быстрее. Но не на много, учитывая современные скорости интернет.

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

    Посмотрите на любой учебник, где разбирается блочная верстка: сверху шапка, слева (справа) навигация, контент, внизу подвал. В чистом виде таблица, описать которую можно в 5 строках. Что же происходит при блочной верстке? В произвольном месте указываются блоки контейнеры, а в стилях описываются из расположения. Дальше больше, чтобы блоки не наезжали друг на друга, их помещают в еще один блок-контейнер, указывая для него минимальные ширину и высоту. И так далее, и так далее, пытаясь создать таки ТАБЛИЦУ!

    <table style="width:400px;">
    <tr style="height:100px;"><td colspan="2">шапка</td></tr>
    <tr style="height:120px;"><td>навигация</td><td>контент</td></tr>
    <tr style="height:100px;"><td colspan="2">подвал</td></tr>
    </table>

     

    <div style="min-width:400px; min-height:220px;">
    <div style="width:400px; height:100px;">шапка</div>
    <div style="width:200px; height:120px; float:left;"> навигация </div>
    <div style="width: 200px; height:120px; float:left;"> контент</div>
    <div style="width:400px; height:100px;">подвал</div>
    </div>

    Честно говоря, в приведенном примере я не вижу выигрыша в размере текста с блочной версткой. С точки зрения читаемости, табличная, мне кажется, даже выигрывает.

    А вот дальше начинается самое интересное. Расположить рядом три блока одинаковой высоты, на самом деле, задача достаточно нетривиальная.

    Во-первых, блоки должны иметь аттирибуты "float". И это первая неприятность. такие блоки обрабатываются вне основного потока и вставляются в основной поток страницы уже после ее обработки. Как следствие, такие блоки просто "выскочат", например, из общего обрамления страницы ("box-shadow"). Решение есть. Достаточно после плавающих блоков поставить пустой блок со стилем "clear: both". Но это лишний элемент разметки.

    Во-вторых, размеры блока определяются его содержимым. Можно задать высоту для блока явно, но есть опасность, что содержимое будет отсечено или останется много пустого места. Как вариант, попытаться указать "height:100%". Но, увы, это не сработает. Плавающие блоки, обрабатываясь, вне основного потока, раздвинут блок-родитель уже в конце, у которого изначально высота не определена. В качестве решений можно найти советы разной степени глупости, вплоть до того, чтобы для каждого блока создавать еще один блок с фоновым заполнителем или определять высоту блока родителя оооочень большой, а затем отсекать "невидимую" часть.

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

    Выводы

    Верстайте так, как привыкли. Чтобы ни говорили сторонники блочной верстки, что таблицы - это прошлый век, таблицы всегда были, есть и всегда будут.

    Главное, не переусердствовать. Поясню.

    Сторонники табличной верстки, зачастую, создают неимоверно излишнюю, как следствие, нечитаемую структуру вложенных таблиц. А "блочники", в свое время, лепят блоки куда ни поподя, пытаясь создать нечто, похожее на таблицу. Доходит и до абсурда: часто приходится видеть использование блоков- пустышек "<div class="empty"><span>&nbsp; </span></div>". Кажется, они совершенно забывают, что есть такой простой тег "<br>".

    Идеально использовать сочетание обоих методов. Все зависит от конкретной задачи.

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

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

    И всегда сперва отвечайте на вопрос: "Готовы ли вы к потере огромного количества времени ради совсем небольшой выгоды?".