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

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

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

Обладают высокой кроссбраузерностью

Таблицы не перекрываются друг с другом даже при маленьких разрешениях

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

Гораздо проще блочной верстки в плане написания

Очень много лишнего кода из-за бесконечного создания строк и столбцов

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

Огромные проблемы с кроссбраузерностью

В отличии от таблиц, блоки - универсальное средство для создания любого дизайна

Значительно меньше 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>".

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

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

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

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