Верстка — это создание html страницы таким образом, чтобы все элементы отображались так, как задумано дизайном. При правильной и качественной верстке сайт будет одинаково выглядеть в разных браузерах, содержимое будет доступно для всех экранов. Верстка бывает трёх типов: табличная, блочная и смешанная. Прочитав до конца эту статью вы сможете сами выбрать, используя какую, можно добиться наилучшего результата в вашем случае. Давайте выделим все преимущества и недостатки каждого вида.
Табличная сформировалась ещё до появления CSS. Страница при этом — большая таблица, сформированная с помощью тегов <table>, <td>, <tr> и <th>. Создание сайта при этом способе чаще всего обычно сопровождается разделением верхней части (header), в ней расположены заголовок и логотип, нижней (footer), она предназначена для отображения копирайта и справочной информации, центр страницы (center, middle, content и другое) размещают основное содержимое, контент.
Преимущества:
— Содержимое ячеек таблицы легко выравнивать по горизонтали и вертикали;
— Таблицы выглядят одинаково почти во всех браузерах и на любых экранах.
Основные недостатки табличной верстки:
— Большой объём кода;
— Несоответствие стандартам;
— Плохая индексация сайта.
Блочная верстка основывается на боксовой модели CSS. При этом страница состоит из блоков, обернутых в html коде тегами <div>.
Общая схема блока такая: контент, ширину и высоту которого можно задать свойствами «width» и «height», внутренний отступ (между содержимым и рамкой) — свойство «padding», рамка — свойство «border» и внешний отступ — «margin». Из таких блоков создать сайт очень просто. Блоки могут быть вложены друг в друга, каждому из них можно присвоить class и id.
Было придумано уже много «фишек», которые компенсируют недостатки блоков, например, выровнять блок по вертикали можно так:
height:200px;
display:inline-block;
vertical-align:center.
В крайнем случае можно указать блоку, чтобы вел себя как таблица (тег table) с помощью свойства display:table, ряд (тег tr) — display:table-row или ячейка (тег td) — display:table-cell.
Преимущества блочной верстки:
— Соответствие стандартам;
— Сайт хорошо индексируется;
— Короткий и простой код, страницы загружаются быстрее;
— Страницы отображаются одинаково почти на всех устройствах.
Недостатки:
— Сайт может неправильно отображаться на очень маленьких экранах.
Что выбрать?
Увы, но создание сайта на табличной верстке устарело. Тег <table> в html не был задуман как метод оформления и должен использоваться только для создания таблиц, Из-за отсутствия способов позиционирования контента определять положение содержимого стали с помощью таблиц. После появления CSS мы получили много новых возможностей определения положения элементов страницы, так зародилась блочная верстка. Многие не смогли отказаться от таблиц и используют и их, и блоки. Такая верстка называется смешанной.
Что выбрать решать вам, но я бы посоветовал блочный тип верстки, используя блоки, можно сделать красивый и удобный сайт, который будет одинаково отображаться на любых устройствах и экранах. Также следует отметить что код табличной верстки менее читабельный, многие могут его просто не понять. Это очень важно, если вы работаете не один.
Но всё же выбор за вами, ведь при разном дизайне и содержимом страниц, может быть удобнее и правильнее использовать тот или иной вид верстки.
Желаю сделать правильный выбор!