Создаем шаблон сайта с помощью таблиц


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

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

При создании шаблона я буду придерживаться требований стандарта XHTML 1.0, а именно его версии xhtml1-transitional.

Наш сайт будет состоять из:
  • - шапки сайта – блок header, там разместится название сайта и блок горизонтальной навигации;
  • - основного блока content, с содержимым сайта;
  • - правого сайдбара - блок sideRight, в котором будет размещаться блок вертикальной навигации;
  • - и футера или подвала сайта - блок footer, в котором я размещу авторскую информацию.

Для этого создадим таблицу состоящую из 3-х рядов и 2-х столбцов:

<table>
  <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
</table>

Затем объединим 2 верхних ячейки в одну. Там будет размещена шапка сайта - header. Для этого используем атрибут colspan=2. Подробнее ознакомится с действием атрибутов colspan и rowspan вы можете в уроке "Флажки checkbox и свойства таблицы colspan и rowspan". То же самое проделаем и с самыми нижними ячейками нашей таблицы. Это будет у нас футер сайта. Ну и добавим для наглядности цвета и установим размер нашим ячейкам.

Хочу обратить ваше внимание, что границы вокруг ячеек таблицы обычно выводятся независимо друг от друга. Каждая ячейка окружена своей собственной границей, создавая вид удвоенной границы у смежных ячеек. Эти удвоенные границы можно сжать в одиночные границы, задавая для таблицы свойство стиля border-collapse, которое я и применил во внешней таблице стилей.

Вот что у нас пока получилось:

<div style="width:600px; margin:0 auto;">
<table style="width:600px;">
  <tr>
   <td colspan="2" style="background-color:#cc5050">
    &nbsp;   <!--header -->
   </td>
  </tr>
 
  <tr>
   <td style="background-color:#50cc50; width:400px;">
    &nbsp;   <!--content--->
   </td>
   <td style="background-color:#5050cc;">
    &nbsp;   <!--sideRight-->
   </td>
  </tr>
 
  <tr>
   <td colspan="2" style="background-color:#FFFF00">
    &nbsp;   <!--footer-->
   </td>
  </tr>
  </table>
</div>
Создаем шаблон сайта с помощью таблиц

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

Замечу так же, что таблицу можно выравнивать влево, или вправо, или по центру отдельной строки. Однако в этом случае выравнивание не связывается с самой таблицей. Таблица должна вкладываться внутрь блочных тегов которым присваивается свойство text-align. Так наша таблица вложена внутрь тега div, который содержит свойство CSS text-align:center, для выравнивания его содержимого по центру.
Выравнивание же по вертикали осуществляется с помощью свойства CSS vertical-align. Содержимое можно выравнивать по верхнему краю, по середине или по нижнему краю ячейки.

Итак конечный код шаблона сайта:

Свернуть код:
<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Хочу веб-сайт</title>     
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="copyright" content="Сергей Зарубин" />
    <meta name="author" content="Сергей Зарубин Email: admin@hochuwebsite.ru" />
    <meta http-equiv="Content-language" content="ru" />     
    <link rel="stylesheet" href="stylesitetab.css" type="text/css" media="screen, projection" />
</head>
<body>
<div style="width:600px; margin:0 auto;">
<table  style="width:600px; text-align:center;">
  <tr >
  <td colspan="2" style="background-color:#cc5050">
 
<!--header -->
<table style="width:100%;">
  <tr id="header">
  <td  >
   <h1>Хочу веб-сайт</h1>
    <ul >
    <li><a href="">Главная</a></li>
    <li ><a href="">Обучение</a></li>
    <li ><a href="" >О нас</a></li>
    </ul>
  </td>
  </tr>
  </table>
<!--/header-->
 
  </td>
  </tr>
  <tr>
  <td style="background-color:#50cc50; width:400px; vertical-align:top">
 
<!--content--->
<table>  
  <tr>
  <td  style="padding:10px"> <div  style="text-align:center;">&nbsp;&nbsp;&nbsp;&nbsp; Каждому пользователю интернета 
    рано или поздно наверняка приходила в голову мысль: 
    <strong >«Хочу веб-сайт!»</strong>. 
    Что ж,хочу вам сообщить что ничего невозможного в этом нет!<br />  
    &nbsp;&nbsp;&nbsp;&nbsp;Этот сайт создан специально для тех, кто хочет 
    претворить это желание в жизнь.<br />
    &nbsp;&nbsp;&nbsp;&nbsp;Я постараюсь собрать здесь советы и рекомендации по созданию сайта с нуля, 
    строительству сайта из кирпичиков - как дома.<br />    </div>  </td>
  </tr>
  </table>
<!--/content--->
 
  </td>
  <td style="background-color:#5050cc; vertical-align:top">
 
<!--sideRight-->
  <table style="width:100%;">
  <tr>
  <td >
  <p style="text-align:center;font-weight:bold; color:white;">Навигация</p>
    <div class="coolmenu">
    <a href="">Главная</a>
    <a href="">Обучение</a>
    <a href="">О нас</a>
</div>
  </td>
  </tr>
    </table>
<!--/sideRight-->
 
  </td>
  </tr>
  <tr>
  <td colspan="2" style="background-color:#FFFF00">
 
<!--footer-->
  <table style="width:100%;">
  <tr style="text-align:center;">
  <td style="padding:5px;">
  <div>©Сергей Зарубин 2011г.</div>
  </td>
  </tr> 
  </table>
<!--/footer-->
 
  </td>
  </tr>
  </table>
</div>
</body>
</html>

Для корректного отображения навигации я подключил внешнюю таблицу стилей:

Свернуть код:
* {
    margin: 0;
    padding: 0;
}
table {
    border-collapse:collapse
}
#header  li {
    list-style: none;
    display: inline;
    padding: 10px 20px 0px 10px;
}
#header li a {
    padding:3px;    /*Поля вокруг надписей основного меню*/
    text-decoration: none;
    color: #000;    /* цвет текста*/
}
#header li a:hover {
    text-decoration: none;
    padding:3px;    /*Поля вокруг надписей основного меню*/
    text-decoration: none;
    color:red;    /* цвет текста*/
}
#header H1 {
    font-family:  Times, Tahoma, Arial,Verdana, sans-serif; 
}
.coolmenu {   
    text-align: center;    
}
.coolmenu a {
    font: bold 13px Verdana;    /*Шрифт текста*/
    padding: 2px;
    padding-left: 4px;
    display: block;
    color: #000000;
    text-decoration: none;
    border-bottom: 1px dotted #d0d0d0;
}
.coolmenu a:hover {
    background-color: #cccccc;
    color: #000000;   
    color: red; /*Цвет текста при наведении курсора*/
    text-decoration: none;
}

В итоге у меня получилось следующее:

Создаем шаблон сайта с помощью таблиц

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

Автор: Сергей Зарубин

Дата: 2011-06-05

Колличество просмотров: 15634

Нравится

Комментарии к заметке:

Комментарий добавил(а): Эльвина
Дата: 2012-11-25

Спасибо Вам!!!

Комментарий добавил(а): rElenaSn
Дата: 2017-06-05

Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > http://oplata-vklike.tk/ <

Вывод заработанных средств ежедневно в течении нескольких минут.

Комментарий добавил(а): segorSn
Дата: 2017-06-06

Предлагаем Вам работу без вложений, на системе автоматического приёма и обработки заказов.

Мы предоставляем:

- Наш лицезионный софт.
- документы со всей необходимой доп. информацией.
- постоянная техническая поддержка.

Оплата от 5500 в день. Выплаты ежедневно.

Более подробная информация на нашем сайте >> http://obrabotka.zarplatt.ru/ <<

Комментарий добавил(а): rElenaSn
Дата: 2017-06-07

Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и получить за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

Вам достаточно просто зарегистрироваться на нашем сервисе. > http://oplata-vklike.tk/ <

Вывод заработанных средств ежедневно в течении нескольких минут.

Комментарий добавил(а): qegorSn
Дата: 2017-06-07

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

Займ от частного инвестора.

Наша компания помогает встретиться инвестору и заёмщику.

Прямой контакт с инвестором
Любая кредитная история
Нужен только паспорт
Работаем с частными лицами и фирмами
Любой регион
Сумма от 5,000 до 50,000,000 руб
Процент одобрения 97%

Преимущества:

- Без залога и поручительства!
- Ставка - всего от 1% в месяц!
- Без скрытых платежей и комиссий!

Оформите заявку на нашем сайте. > www.ch-investor.tk <

Комментарий добавил(а): wegorSn
Дата: 2017-06-09

Ведущая компания в России и странах СНГ по продаже авиабилетов «Airline»

Крупнейшая международная компания по продаже А/В билетов
срочно набирает сотрудников на постоянную основу для несложной
работы через интернет, с ежедневными выплатами до 11 000 руб.

Работая в нашей компании Вы получаете:

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

Пройдите регистрацию на нашем сайте. > www.Airline-Rabota.tk <

Без вложений, опыт и профессиональные навыки не требуются!

Комментарий добавил(а): lElenaSn
Дата: 2017-06-13

Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > www.oplata-vklike.tk <

Вывод заработанных средств ежедневно в течении нескольких минут.

Комментарий добавил(а): wElenaSn
Дата: 2017-09-21

Платим за лайки! - Ежедневные выплаты!

Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.
Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.
Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,
Вам достаточно просто зарегистрироваться на нашем сервисе. > http://oplata-vklike.tk/ <
Вывод заработанных средств ежедневно в течении нескольких минут.

Комментарий добавил(а): qnikaSn
Дата: 2017-12-19

Пройдите 1 регистрацию, сделайте 2 действия
и получайте от 8950 рублей каждые сутки в автоматическом режиме.

Мы гарантируем:
- Первый заработок в течении 60 минут.
- Стабильный доход 24 часа в сутки.
- Поступление денег без задержек.
- Для России, стран СНГ и Европы.
- Без вложений и установки ПО.
- Специально для новичков и людей без опыта.

Более подробная информация у нас на сайте. ( prosto.exrabota.ru )

Комментарий добавил(а): Арина
Дата: 2017-12-24

Платим за лайки! - Оплата по требованию!

Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

Вам достаточно просто зарегистрироваться на нашем сервисе. > http://click-likes.tk/ <

Вывод заработанных средств ежедневно в течении нескольких минут.

Комментарий добавил(а): Дмитрий
Дата: 2018-01-13

Платим за лайки! - Оплата ежедневно!

Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

Вам достаточно просто зарегистрироваться на нашем сервисе. > www.click-likes.tk <

Вывод заработанных средств ежедневно в течении нескольких минут.

Комментарий добавил(а): Ярослава
Дата: 2018-01-14

Мы платим за лайки! - Оплата сдельная!

Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > http://click-likes.tk/ <

Вывод заработанных средств ежедневно в течении нескольких минут.

Комментарий добавил(а): Affzznm
Дата: 2018-01-14

Полный курс биткойн Миллионер - Научись успешно зарабатывать

Скоро состоится запуск новой криптовалюты с потенциалом роста в 4000%.

А это означает что вложив в нее всего 500 рублей можно увеличить капитал до 2 000 000 р.

за короткий срок. Такое уже было не один раз! Тема огонь!

Посмотрите Видео-презентацию на сайте >> http://bitcoin.exrabota.ru/ <<

Вы узнаете все о заработке на биткоин и получите купон на обучение для первых 50 человек.

Комментарий добавил(а): Vdpmzkp
Дата: 2018-01-14

Реальный заработок на реальном сайте!
Никаких “супер секретных” сервисов и волшебных таблеток.
Все прозрачно и открыто работа абсолютно легальна.
Более подробнна информация на сайте >> http://kwork-garand.tk/<<

Комментарий добавил(а): vnikaSn
Дата: 2018-01-14

Пройдите 1 регистрацию, сделайте 2 действия
и получайте от 8950 рублей каждые сутки в автоматическом режиме.

Мы гарантируем:
- Первый заработок в течении 60 минут.
- Стабильный доход 24 часа в сутки.
- Поступление денег без задержек.
- Для России, стран СНГ и Европы.
- Без вложений и установки ПО.
- Специально для новичков и людей без опыта.

Более подробная информация у нас на сайте. ( http://prosto.exrabota.ru/ )

Комментарий добавил(а): Олеся
Дата: 2018-01-25

Платим за лайки! - Оплата сдельная!

Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и получить за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > www.vk-like.tk <

Вывод заработанных средств ежедневно в течении нескольких минут.

Комментарий добавил(а): Вячеслав
Дата: 2018-01-26

Предлагаем Вам работу без вложений, на системе автоматического приёма и обработки заказов.

Мы предоставляем:

- Наш лицезионный софт.
- документы со всей необходимой доп. информацией.
- постоянная техническая поддержка.

Оплата от 5500 в день. Выплаты ежедневно.

Более подробная информация на нашем сайте >> www.zakaz.exrabota.ru <<

Комментарий добавил(а): Yybsyhn
Дата: 2018-03-30

Платим за лайки! - Выплаты ежедневно!

Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и получить за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

Вам достаточно просто зарегистрироваться на нашем сервисе. > http://vk-like.tk/ <

Вывод заработанных средств ежедневно в течении нескольких минут.

Комментарий добавил(а): Pnmzaqy
Дата: 2018-04-01

Предлагаем Вам работу без вложений, на системе автоматического приёма и обработки заказов.

Мы предоставляем:

- Наш лицезионный софт.
- документы со всей необходимой доп. информацией.
- постоянная техническая поддержка.

Оплата от 5500 в день. Выплаты ежедневно.

Более подробная информация на нашем сайте >> www.zakaz.exrabota.ru <<

Комментарий добавил(а): Zweoixl
Дата: 2018-04-02

Мы платим за лайки! - Оплата по требованию!

Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

Вам достаточно просто зарегистрироваться на нашем сервисе. > www.vk-like.tk <

Вывод заработанных средств ежедневно в течении нескольких минут.

Комментарий добавил(а): Ksmjowl
Дата: 2018-04-03

Интересная работа с обучением, высокая зарплата!

Вы работаете дома! Полностью честно и прозрачно;
Доступно для всех - неважно кто вы и какой у вас опыт работы в интернете!
Вы будете зарабатывать: свыше четырёх тысяч рублей в день!
Сложность: Несложно!
Оплата: - уже на следующий деньги у вас на счету!

Ознакомтесь с условиями на нашем сайте. > http://pisma.exrabota.ru/ < Скопируйте и вставьте в адресную строку Вашего браузера.

Комментарий добавил(а): Fyrlwot
Дата: 2018-04-11

Мы платим за лайки! - Выплаты ежедневно!

Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и получить за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > www.vklikers.tk <

Вывод заработанных средств ежедневно в течении нескольких минут.



Добавить новый комментарий


Введите число с картинки:

captcha