"Истина где-то рядом."

Уроки HTML

Скрипты PHP

Шаблоны HTML

Меню сайта
Уроки HTML
Уроки CSS
HTML5
Скрипты JAVA
Вёрстка
Графика
Обзор хостингов
Дополнительно


Реклама на сайте:




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


папка digest

Вёрстка сайта

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

Табличная верстка 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.