Закрыть ... [X]

Как с помощью div сделать

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

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

TABLE

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

Шапка сайта

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

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

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

Подвал сайта

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

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

<table> <tr> <d colspan="3">Шапка сайта</td> </tr> <tr> <td>Левая колонка</td> <td>Центральная колонка</td> <td>Правая колонка</td> </tr> <tr> <td colspan="3">Подвал сайта</td> </tr> </table>

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

DIV

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

<div id="head"> Шапка сайта </div> <div id="left-column"> Левая колонка </div> <div id="right-column"> Правая колонка </div> <div id="center-column"> Центральная колонка </div> <div id="footer"> Подвал сайта </div>

Выглядит это гораздо проще, чем вариант с таблицей. Отсюда огромный плюс - это простота разбора 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
Источник: http://marvic.ru/zapiski/verstka/chto-luchshe-div-ili-table-moi-otvet


Поделись с друзьями



Рекомендуем посмотреть ещё:



Div верстка. Как ее использовать, различные варианты Как сделать клавиатурную мышь



Как с помощью div сделать Что лучше DIV или таблица (TABLE )? Мой ответ. : Сайт
Как с помощью div сделать Как с помощью javascript создать div? - Javascript-форум
Как с помощью div сделать Таблица с помощью Div ов - HTML, CSS
Как с помощью div сделать Табличная верстка блоками - t
Как с помощью div сделать Урок 1. Делаем сайт на div-ах
Как с помощью div сделать Тег div
Как с помощью div сделать Блины диетические - рецепты с фото на Повар. ру (52)
Как с помощью div сделать Делаем блокнот своими руками Руки не для скуки
Дом из газобетона своими руками: фото, видео инструкция Как перешить дубленку: модные и стильные решения своими Как привлечь удачу и деньги - 5 простых правил Как сделать авиамодель своими руками. Видеоинструкция Как сшить сарафан своими руками: лучшие мастер-классы с фото Ловушка Клетка для мобов » MineZone - Не всё зелёное Омский визовый центр Рено Каптур 2016, 1.6л., комплектация STYLE, бензиновый Светильники и люстры лофт из труб - как сделать своими руками

ШОКИРУЮЩИЕ НОВОСТИ