Что лучше DIV или таблица (TABLE)? Мой ответ.

ВНИМАНИЕ! Статья давным-давно и безвозвратно устарела! Оставлена здесь из жалости к проделанной в своё время работе.

Для начала скажу, что эта статья - просто некоторое размышление на тему. Бывает, что при заказе верстки люди говорят, что нужна именно верстка на div-ах, хотя когда задаешь вопрос «почему?», немногие могут ответить. Эта статья пригодится тем, кто готов согласиться с выражением «слышал звон, да не знает где он». Неуверен в том, что эта статья будет интересна тем, кто не знаком вообще с HTML, потому что наверняка у них уже возник вопрос «а что такое div и table».

На определенном этапе своего развития, как html-верстальщика, передо мной встал вопрос «как лучше верстать сайты»: использовать ли «div-ную» верстку или верстку, основанную на теге table? Прочитав некоторое количество информации по этой теме, а так же основываясь на собственном опыте html-верстки, могу сказать лишь одно: всё зависит от задачи, которая ставится перед верстальщиком. Рассмотрим, что такое TABLE и что такое DIV, и попытаемся разобраться, когда и что использовать.

TABLE

Неоспоримым преимуществом вёрстки, основанной на таблицах, является её простота для верстальщика. Ведь сайты, с которыми обычно сталкиваются начинающие, легко представить в виде подобной таблицы:

Шапка сайта
Левая колонка	Центральная колонка	Правая колонка
Подвал сайта

Таким образом, плюсом для table является простота представления.

Однако если взглянуть на html-код страницы, то такие радужные краски уже слегка меркнут:

                
                               Шапка сайта
                
                
                               
                               
                               
                
                
                               
                

 

  
 
 

 
Левая колонка
 
Центральная колонка
 
Правая колонка
 
 

 
Подвал сайта
 
 

Объявление таблицы, объявление строки, объявление ячейки и только потом идет сам текст. И это самый простой пример. Мне встречались сайты, где в каждой такой ячейке еще таблица и ещё. В общем можно сказать, что на неоспоримый плюс налагается довольно большой минус - это громоздкость итогового html-кода и связанная с этим плохая читаемость кода. Стоит отметить и то, что при достаточно частом использовании тега table размер html-страницы в итоге становится достаточно большим. Хотя с развитием технологий, эта проблема уже не стоит так остро, как было ранее.

DIV

Многие гуру говорят, что верстать нужно div-ами и только ими. Можно согласиться, но лишь частично. Рассмотрим тот же пример. Чтобы сверстать подобную страницу необходимо написать следующий HTML-код:

 Шапка сайта 

 Левая колонка 

 Правая колонка 

 Центральная колонка 

 Подвал сайта 

Выглядит это гораздо проще, чем вариант с таблицей. Отсюда огромный плюс - это простота разбора html-кода. Однако если вставить такой «голый» html в страницу, то мы увидим нечто похожее на:

Шапка сайта

Левая колонка

Правая колонка

Центральная колонка

Подвал сайта

Согласитесь, немного не то, что мы ожидали увидеть. Козырь div-ной верстки - это правильное использование CSS. Дописав следующий код в css-файл, мы сможем получить представление, сходное тем, что было для таблицы:

#left-column {

float: left;

width: 150px;

}

#right-column {

float: right;

width: 150px;

}

#center-column {

margin: 0 150px;

}

#footer {

clear: both;

}

Опять же, повторю, что это самый простейший вариант. То есть, написано только самое необходимое. На самом деле для корректного отображение во всех браузерах css-кода выходит гораздо больше. Таким образом, минус div-ной верстки - необходимость достаточно глубоких познаний в CSS.

TABLE vs CSS

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

TABLE лучше, чем DIV потому, что:

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

Шапка сайта
Левая колонка	Центральная колонка Текст в центральной колонке Текст в центральной колонке Текст в центральной колонке Текст в центральной колонке Текст в центральной колонке Текст в центральной колонке Текст в центральной колонке	Правая колонка
подвал сайта

При этом ширина левой колонки 20%, центральной - 60%, правой - 20%. Сверстать такое на div-ах без использования JavaScript невозможно. Поверьте на слово, я пробовал. Другое дело, что таких жестких рамок почти никогда не бывает. Чаще, если нужна подобная «тянучесть» по высоте, то по ширине колонки берут каких-то фиксированных значений, а здесь уже можно извернуться и сделать div.

• Для верстки на таблицах не надо знать CSS. Вообще, в принципе, можно обойтись одним HTML. Хотя после этого можно подвергнуться жесткой критике и осмеянию у профессионалов верстального дела.

DIV лучше, чем TABLE потому, что:

• Проще понять итоговый CSS-файл, что ведет к ускорению «процесса прикрутки» страницы к какой-либо системе сопровождения (а для тех, кто не использует CMS, ускорение создания новых страниц). Кроме того, при внесении каких-либо изменений, проще разобраться «что куда вставлять».
• Легче вес html-страницы. Все-таки про это стоит упомянуть. Несмотря на то, что в итоге растет CSS-файл, но здесь надо обратить внимание на следующий факт: CSS-файл загружается один раз за всё время посещения сайта для многих страниц. Следовательно, в целом скорость загрузки страниц будет более высокой.
• Страница показывается пользователю по мере загрузки. Суть в том, что некоторые браузеры не показывают таблицу, пока не загружен тег её закрытия . Если вся страница заключена в тег table, то пока не загрузится весь текст страницы, вы будете видеть только фоновый цвет. Думаю, каждый был в такой ситуации, когда сайт показывается кусками, как бы собираясь по мере загрузки. Это сайт, сделанный на div-ах. Вообще, лично я думаю, что это сомнительный плюс, но многие считают, что это плюс div-ов, так что пусть будет так.

А теперь личное мнение: мне гораздо приятнее смотреть на стройные ряды div-ов, чем на огромное скопище тегов tr и td, поэтому чаще я верстаю именно на div-ах. Однако периодически задачи требуют верстки на таблицах, а иногда верстка с использование div-ов требует просто кучи усилий, в то время, как на таблицах сделать всё гораздо проще.

Поэтому мой вывод: есть время - копайся в div-ах, надо побыстрее - можно обойтись и таблицами.

comments powered by Disqus