Табличная верстка web-страниц сайта

Вёрстка сайта. Статья №2

Вёрстка – процесс формирования страниц (макета) путём компоновки текстовых, графических и прочих элементов.

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

Табличная вёрстка проста и во всех браузерах выглядит одинаково

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

Плюсы табличной верстки

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

Минусы табличной верстки

Огромный код. Для вывода таблицы требуется множество тегов.
Ухудшение скорости зарузки. Таблица имеет один недостаток – она не будет отображена до тех пор, пока все ее ячейки, включая самые нижние, не будут загружены.
Плохая индексация. Из-за большой разметки и обилия вложенных тегов текст на странице хуже воспринимается поисковыми системами и даже отлично оптимизированная и интересная статья может не попасть в топ.
Неудобное управление через стили. Опять же, из-за обилия вложенных тегов таблицу сложно стилизовать через стили. Вам придется дописать множество атрибутов в html, что еще больше увеличит код.

Табличная верстка web-страниц сайта

При табличной верстке используются таблицы (HTML-тег <table>)

Пример:№1

Шаблон сайта-№1
Меню	Контент	Сайдбар
Подвал сайта

Код в документе HTML

<table border="1" bgcolor=#FFFAC8 width=100%>
<tr align=center>
 <td style="color:#950000; font-size:14pt">
Шаблон сайта-№1 </td></tr>
<tr align=center><td bgcolor=#ccc0b3>
Меню </td></tr>
 <tr align=center>
 <td bgcolor=#ebebeb>Контент</td></tr>
 <td style="width:20%">Сайдбар</td></tr>
 <tr align=center><td bgcolor=#ccc0b3>
Подвал сайта</td></tr>
 </table>

Пример:№2

Шаблон сайта-№2

Меню

Контент

Подвал сайта

Код в документе HTML

<table border="1" bgcolor=#FFFAC8 width=100%>
<tr align=center>
<td style="color:#950000; font-size:14pt">
Шаблон сайта-№2</td></tr>
<tr align=center><td bgcolor=#ccc0b3>
Меню</td></tr>
<tr align=center>
<td bgcolor=#ebebeb>Контент</td></tr>
<tr align=center><td bgcolor=#ccc0b3>
Подвал сайта</td></tr>
</table>

Пример:№3

Шаблон сайта-№3
Меню	Контент
Подвал сайта

Код в документе HTML

<table border="1" bgcolor=#FFFAC8 width=100%>
<tr align=center>
<td colspan=2 style="color:#950000; font-size:14pt">
Шаблон сайта-№3</td></tr>
<tr align=center>
<td style="width:20%">Меню>/td>
<td bgcolor=#ebebeb>Контент</td></tr>
<tr align=center><td colspan=2>Подвал сайта</td></tr>
</table  >

Пример:№4

Шаблон сайта-4
Контент	Меню
Подвал сайта

Код в документе HTML

<table border="1" bgcolor=#FFFAC8 width=100%>
<tr align=center>
<td colspan=2 style="color:#950000; font-size:14pt">
Шаблон сайта-№4</td></tr>
<tr align=center>
<td bgcolor=#ebebeb>Контент</td>
<td style="width:20%">Меню</td></tr>
<tr align=center><td colspan=2>Подвал сайта</td></tr>
</table >

Самое важное правило – информация в таблицах выводится только в ее ячейках. Они, в свою очередь, располагаются в строках. Таким образом, в теге table сначала пишут парный тег tr (table row), а потом td (то есть ячейка).

Макет должен заполнять по высоте все окно.
Если информации на странице мало, то футер должен быть прижат к нижнему краю окна браузера.

Bсе колонки на сайте должны быть одинаковой высоты. Конечно, это только в том случае, если к ним применяется какой-то фон.

Читайте также:

Создано: 20.09.2020.|Обновлено: 22.12.2022.