Войти
Регистрация

Структура табличной верстки в HTML

Структура табличной верстки в HTML

В этой теме я хочу рассказать Вам коротко о табличной верстке.

Несмотря на то, что многие считают ее неудобной, в ней достаточно преимуществ.

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

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

Давайте на примере с Вами создадим макет табличного сайта.

Для начала пропишем тег таблицы и добавим ему нужные атрибуты:

<table border="1" width="50%" height="100%" bgcolor="silver" align="center"></table>

Атрибут border со значением "1" устанавливает видимость границы в таблице.

Далее мы указали ширину 50% и высоту 100% от размеров окна браузера и установили фоновый цвет таблицы silver. Помните из статьи "Цвета в HTML" текстовые цвета?

Атрибутом align со значением "center" выровняли таблицу по центру окна браузера.

Следующим этапом будет создание тела таблицы, в которой и будут остальные строки с ячейками. Создадим парный тег <tbody> и выровняем содержимое по центру:

<table border="1" width="50%" height="100%" bgcolor="silver" align="center">
 <tbody align="center">
 </tbody>
</table>

Далее создадим шапку сайта и для этого выделим под нее новую строку парным тегом <tr> в таблице и обязательно добавим ячейку парным тегом <td>:

<table border="1" width="50%" height="100%" bgcolor="silver" align="center">
 <tbody align="center">
   <tr>
     <td colspan="3" height="15%">Шапка сайта (Header)</td>
   </tr>
 </tbody>
</table>

Под шапку сайта ячейка готова с установленной высотой в 15%.

Далее создадим 3 ячейки которые послужат нам в роли левой, центральной и правой частей сайта:

<table border="1" width="50%" height="100%" bgcolor="silver" align="center">
 <tbody align="center">
   <tr>
     <td colspan="3" height="15%">Шапка сайта (Header)</td>
   </tr>
   <tr>
     <td width="20%">Левый блок</td>
     <td width="60%">Центральный блок</td>
     <td width="20%">Правый блок</td>
   </tr>
 </tbody>
</table>

Здесь мы снова добавили вторую строку парного тега <tr> и 3 ячейки парным тегом <td>. Каждой ячейке установили ширину. Важно, чтобы сумма ширины всех ячеек не превышала 100%.

Таким образом у нас готова шапка и 3 блока сайта. Осталось добавить подвал(Footer). Точно также, как и с шапкой, добавим строку и ячейку под подвал, но внизу:

<html>
<head>
</head>
<body>
<table border="1" width="50%" height="100%" bgcolor="silver" align="center">
 <tbody align="center">
   <tr>
     <td colspan="3" height="15%">Шапка сайта (Header)</td>
   </tr>
   <tr>
     <td width="20%">Левый блок</td>
     <td width="60%">Центральный блок</td>
     <td width="20%">Правый блок</td>
   </tr>
   <tr>
     <td colspan="3" height="15%">Подвал сайта (Footer)</td>
   </tr>
 </tbody>
</table>
</body>
</html>

Заметьте, в парном теге <td> для шапки и подвала мы добавили атрибут colspan со значением "3" для того, чтобы эти ячейки растянулись на 3 наших блока. Про атрибут colspan я писал в статье по созданию таблиц в HTML

Все просто. Каркас табличного сайта готов. Уверен, информация для Вас была полезной.

Теперь можете переписать этот код в Вашу HTML страницу и заполнить ячейки любыми элементами сайта.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?