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


Сегодня я расскажу вам как создать шаблон сайта с помощью таблиц. И хотя создание сайта с помощь таблиц в настоящее время не приветствуется, считается что табличная верстка сейчас уже морально устарела, но для начинающих простой шаблон сайта основанный на таблицах интуитивно понятней, чем шаблон основанный на блочной 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

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

Нравится

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

Комментарий добавил(а): Эльвина
Дата: 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/ <
Вывод заработанных средств ежедневно в течении нескольких минут.



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


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

captcha