Этот сайт является учебным примером сайта,
сделанного на таблице

Сайт на таблице с правой колонкой меню

Здесь показан пример табличного шаблона для двух-колоночного дизайна с маленькой шириной правой колонки. Эта правая колонка используется для меню и навигации по сайту.

Здесь части Header и Footer те же самые, что и в трехколоночном дизайне. И они также не меняются при переходе на другие страницы сайта с таким двухколоночным дизайном. В разделе Header традиционно размещается заголовок сайта, написанный крупными буквами и/или рисунок с логотипом. В раздел Header можно разместить и вытянутые горизонтальные баннеры. Аналогично трехколоночному шаблону раздел Footer используется для размещения там копирайта, координат обратной связи, информации об авторе или разработчиках сайта и для другой служебной информации сайта.

Часть Center используется для размещения основного текста страницы. Это переменная часть веб-страницы, на каждой веб-странице сайта эта часть разная.

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

Часть Righter, как правило, одна и та же для всех веб-страниц сайта, Но Вы можете сделать её разной для разных страниц сайта. Правда лучше этого не делать, ведь это нарушает стильность сайта. Посетитель Вашего сайта при путешествии по страницам Вашего сайта должен хорошо понимать, что он всё ещё находится на Вашем сайте. Он, при смене стиля веб-страниц, не должен гадать, ушел ли он с Вашего сайта или всё ещё находится на нем.

Но вот на том учебном сайте, где Вы сейчас находитесь, этот принцип не соблюдается.

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

Ниже приводится шаблон html-кода таблицы, которая использована на этой страницы. Данный шаблон использует ширину таблицы равную 1000 пиксел, а ширину правой колонки 310 пиксел.

-------------------------------------------------------------------------
<table width="1000">

   <tr>
      <td colspan="2">
          (Это Header. Здесь размещается заголовок или картинка.)
      </td>
   </tr>

   <tr>
      <td>
          (Здесь размещается основной контент страницы.)
      </td>
      <td width="310">
          (Это Righter. Здесь размещается меню в правой колонке.)
      </td>
   </tr>

   <tr>
      <td colspan="2">
          (Это Footer. Здесь размещается информация в Footer страницы.)
      </td>
   </tr>

</table>

--------------------------------------------------------------------------------

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

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

Главная

Преимущества таблиц

Недостатки таблиц

Раскраска ячеек таблицы

Синтаксис таблиц

Скачать шаблон сайта на таблице


Примеры других шаблонов на таблице:

Две колонки с левым меню

Две колонки с правым меню


Спец.эффекты:

Удаление ячеек и строк


Посмотреть другие простые шаблоны

Скачать бесплатный html-редактор со встроенными учебниками и справочниками по написанию сайтов

Скачать бесплатно FTP-клиент FileZilla Client для копирования файлов на свой сайт и в файлообменники

Скачать бесплатно Полезные скрипты для сайта

При копировании материалов данного сайта, прямая ссылка на сайт обязательна
© Евгений Миронов, 2009