Табличная верстка сайта. Как сверстать сайт таблицами?

Вы сейчас здесь: Главная > Videos > Табличная верстка сайта. Как сверстать сайт таблицами?

В этом видеоуроке мы рассмотрим вопрос:

  • Как правильно сверстать сайт при помощи таблиц.

Скачать материалы
Скачать 13 видеоурок по HTML Размер: 12.18 MB, скачали: 603 раз.
Скачать исходники к 13 видеоуроку по HTML Размер: 73.08 kB, скачали: 541 раз. 
Как запустить видеоурок:

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

Добро пожаловать в видеоурок, посвященный табличной верстке сайта. Изучив 12 урок по HTML, Вы уже должны уметь работать с таблицами. Сейчас же, мы познакомимся с табличной версткой. Наш сайт будет основан на большой таблице. Сверху у нас будет шапка сайта (наверняка вы уже видели такие сайты). Там будет располагаться логотип и еще что-нибудь. Внизу будет футер. Там будут копирайты и годы жизни сайта. Слева – меню, справа – контент.

Как сверстать сайт? (Табличная верстка)

Давайте перейдем на рабочий стол и создадим еще одну папку. Папка будет называться site2. Поместим в нее два изображения, которые я подготовил для этого видеоурока: footer.png и logo.png. Также давайте скопируем файл index.html из папки site в папку site2. Чтобы скопировать, вы можете нажать правой клавишей мыши на файле и выбрать «копировать» либо использовать комбинацию горячих клавиш Ctrl+C. Чтобы вставить, можно нажать правой клавишей мыши и выбрать «Вставить» либо использовать Ctrl+V.

Теперь давайте откроем наш индексный файл через notepad, удалим все лишнее и ненужное нам, начиная с первой строки, размещенной в тегах <body></body>.

 <!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Главная страница</title>
 <meta http-equiv="Content-Language" content="ru">
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <meta name="keywords" content="Мой, личная, страница, info, line, net, рассказ, сайт">
 <meta name="description" content="Моя личная страница! Сказ о том, зачем я создал сайт info-line.net">
 </head>
 <body>
 </body>
 </html>

Теперь создадим нашу таблицу. Пропишем ей ширину в 800 пикселей. Можно прописать и в процентах: 100%, 90%, 80% — на ваше усмотрение. Я прописываю 800 пикселей, так как наш логотип будет шириной в 800 пикселей. Далее прописываем первую строку – это будет шапка сайта. Насколько мы помним, после шапки сайта идет меню и контент, то есть два столбца. Поэтому нам сейчас надо прописать один столбец для нашей шапки и, с помощью атрибута colspan разбить его на два. В первую строку помещаем наше изображение. Так как изображение находится в корневой папке, то путь прописываем просто “logo.png”. Зададим ширину изображения 800 пикселей и высоту – 100 пикселей. Кстати, нашей строке мы тоже можем задать ширину и высоту. Но ширину нет смысла задавать, так как она у нас задана уже в таблице. Зададим просто высоту.

 <table width="800" >
 <tr height="100">
 <td colspan="2"><img src="logo.png" width="800" height="100"></td>
 </tr>
 </table>

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

 <tr>
 <td>
 <div>Меню:</div>
 <p><a href="#">Ссылка №1</a><p>
 <p><a href="#">Ссылка №2</a><p>
 <p><a href="#">Ссылка №3</a><p>
 <p><a href="#">Ссылка №4</a><p>
 </td>
 </tr>

Кстати, нам нужно задать для левого блока «Меню» ширину. Пусть будет 200 пикселей. Для второго блока ширину можно не задавать.

 <tr>
 <td width="200">
 <div>Меню:</div>
 <p><a href="#">Ссылка №1</a><p>
 <p><a href="#">Ссылка №2</a><p>
 <p><a href="#">Ссылка №3</a><p>
 <p><a href="#">Ссылка №4</a><p>
 </td>
 </tr>

Теперь займемся контентом. Пишем в нем любой текст. Ширину поставим 600.

 <td width="600">
 <p>Добро пожаловать на наш сайт.
 Читайте наши новости каждый день и получите подарок от автора.</p>
 </td>

И создаем последнюю нашу строку – футер. Зададим ему высоту 20 пикселей, атрибут colspan =2 и пропишем путь до изображения footer.png. Не забудьте положить все изображения, которые я добавил к этому видеоуроку в корневую папку сайта, иначе они у вас не отобразятся. Либо вы можете положить их в любую другую папку и указать к ней путь. Только учтите, что придется указывать этот путь перед указанием имени самого изображения. Установим  изображению высоту 20 пикселей и ширину 800 пикселей.

 <tr height="20">
 <td colspan="2"><img src="footer.png" width="800" height="20"></td>
 </tr>

Всё. Сохраняем и проверяем в браузере. Как мы видим, у нас табличная верстка получилась. Давайте создадим рамку, чтобы разделить блоки.

Переходим в код, прописываем таблице рамку.

 <table width="800" border="1" cellspacing="0" cellpadding="0">

Сохраняем, проверяем в браузере. Ну вот, более-менее.

Давайте сделаем выравнивание нашего текста по центру с помощью атрибута align. Также отцентрируем нашу табличку.

 <tr>
 <td align="center" width="200">
 <div>Меню:</div>

 

 <td align="center" width="600">
 <p>Добро пожаловать на наш сайт.

 

 <table align="center" width="800" border="1" cellspacing="0" cellpadding="0">

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

Перейдем в код.

 <td align="center" valign="top" width="600">
 <p>Добро пожаловать на наш сайт.

Сохраним, проверим. Теперь все хорошо.

Хотя задачей данного видеоурока было рассмотрение табличной верстки сайта, мы к тому же отработали теги, которые изучили в прошлом видеоуроке.

Давайте создадим процентную таблицу. Пусть она будет на всю ширину экрана. Скопируем текст контента из прошлой индексной странички. Наша задача – создать таблицу в процентах. Как это сделать? Для начала нужно удалить ширину или просто сделать ее стопроцентной. Но так как мы вверху укажем, что у нас будет 100%-я ширина, то в футере ее прописывать не нужно. Так же с хедером и контентом. Ширину таблицы заменяем на 100%.

 <table align="center" width="100%" border="1" cellspacing="0" cellpadding="0">

А отображение шапки сайта и футера сделаем с выравнивание по левому краю, чтобы смотрелось симпатичнее.

 <td colspan="2"><img align="left" src="logo.png" height="100"></td>

 

 <td colspan="2"><img align="left" src="footer.png" height="20"></td>

Сохраняем, проверяем в браузере. Всё получилось, разве что изображение не отображается, так как у нас нет папки site, но это не страшно, потому что мы уже изучили тему «изображения» и можем это исправить.

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

 <td align="center" valign="top" width="200">
 <div>Меню:</div>

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

Похожее видео

Подпишись на info-line:

Получать новые уроки на e-mail:

18 комментариев на “Табличная верстка сайта. Как сверстать сайт таблицами?”

  1. БЕЛЕК 26 ноября 2011 в 23:46 #

    здравствуйте спасибо за ваши видео уроки по html очень помогли

    а где можно скачать footer и logo?

    Ответить
    • Олег Зубцов 27 ноября 2011 в 16:03 #

      Я очень рад, что они вам помогли.

      а где можно скачать footer и logo?

      Так как это был мой первый видеокурс, я этого не предусмотрел 🙂

      Однако, дополнительные материалы вы найдете в exe-файле видеокурса, который можно скачать здесь — info-line.net/html

      Ответить
  2. Ольга 29 января 2012 в 20:21 #

    Олег, когда я начинала учиться по твоим урокам, то у кого-то в комментариях видела вопрос, как вставить бегущую строку на сайт. Подскажи, пожалуйста. Хочу, чтобы вы сделали урок, как сделать анимированный баннер. Я понимаю, что со временем такой урок будет, но хотелось бы скорее. Вы хорошо объясняете материал, а в сети на данный момент очень мало действительно хороших уроков по изготовлению баннера.

    Ответить
    • Олег Зубцов 29 января 2012 в 21:57 #

      Для создания бегущей строки предназначен тег <marquee></marquee>. Атрибуты width и height задают ширину и высоту области прокрутки. Атрибут bgcolor задает фон полосы прокрутки. Атрибут loop задает кол-во прокруток. Если вы поставите -1, то содержимое будет прокручиваться бесконечно. Атрибут direction задает направление бегущей строке. Могут быть значения: up | right | down | left. Остальные атрибуты вы можете посмотреть по этой ссылке.

      Анимированный баннер можно создать при помощи программы GIF Animator. Видеоурок по созданию анимации скорее всего будет в курсе по Adobe Photoshop.

      Ответить
  3. Inco 30 апреля 2012 в 22:22 #

    на данный момент урок актуален? ИМХО я сделал все по уроку и такой таблице как у вас не видать что-то, может где и ошибся кину код посмотрите пожалуйста 

    <html>
<head>
<title> Первая страница </title>
</head>
<body background="img/background.png" text="white" leftmargin="0" topmargin="0" rightmargin="0">
<table border="1" width="100%">
<tr height="20%">
<td colspan="2"><img src="img/logo.png" height="200" width="600"></td>
</tr>
</table>
<tr><td width="20%">
<p><a href="#">url 1</a></p>
<p><a href="#">url 2</a></p>
<p><a href="#">url 3</a></p>
<p><a href="#">url 4</a></p>
<p><a href="#">url 5</a></p>
</td></tr>
<td width="60%">
<p>kontent</p>
</td>
<tr height="20">
<td colspan="2">copyright</td>
</tr>
</table>
</body>
</html>

    Ответить
    • Inco 30 апреля 2012 в 22:51 #

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

      Ответить
    • Олег Зубцов 2 мая 2012 в 10:58 #

      Урок актуален! И будет еще актуален очень долгое время 🙂

      Ответить
  4. Inco 1 мая 2012 в 12:01 #

    Ну не совсем сказано, а написано... 

    <html>
<head>
<title> Первая страница </title>
</head>
<body background="img/background.png" text="white" leftmargin="0" topmargin="0" rightmargin="0">
<table border="1" width="100%">
<tr height="20%">
<td align="center" colspan="3"><img src="img/logo.png" height="200" width="600"></td>
</tr>
<tr><td width="20%">
<div>Содержание</div>
<p><a href="#">url 1</a></p>
<p><a href="#">url 2</a></p>
<p><a href="#">url 3</a></p>
<p><a href="#">url 4</a></p>
<p><a href="#">url 5</a></p>
</td>
<td width="60%">
<div>Контент</div>
<p>kontent</p>
</td>
<td>banner
</td>
<tr height="20">
<td colspan="3">Copyright Демидов Вячеслав</td>
</tr>
</table>
</body>
</html>

    то что жирным отмечено, то исправило ошибку...

    у вас рано table закрывается и tr (тот что после шапки идет, т.е. следущая строка)

    я смотрел на

    Урок в текстовом формате:

    ИМХО не мог видео глянуть, позже все таки посмотрел и на нем все ровно 🙂

    Ответить
    • Олег Зубцов 1 мая 2012 в 15:02 #

      Понятно. В тексте могут быть допущены ошибки, так как текст пишет другой человек 🙂

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

      Ответить
  5. Дмитрий 2 мая 2012 в 7:55 #

    скажите почему вот так: 

    <a href="#" rel="nofollow">Ссылка №1</a>

    Ответить
  6. Дмитрий 2 мая 2012 в 7:57 #

    почему тег p не закрывается?

    Ответить
  7. Андрей 27 июня 2012 в 20:00 #

    Олег у меня такой вопрос...

    Можно ли использовать фотмат изображения .jpg

    если можно то как?

    Я попробовал у меня на сайте написанно изображения, а его самого нет?

    и подскажите есть ли прога которая меня из jpg в png??

    Ответить
    • Олег Зубцов 29 октября 2012 в 8:27 #

      Да, можно. Соответственно при вставке изображений пишите уже не .png, а .jpg

      Есть, и не одна. Я использую для этого Photoshop.

      Ответить
  8. Роман 4 января 2013 в 20:38 #

    Что посоветуете, верстать на дивах или таблицах? Я смотрю у Вас на дивах все таки. Если блочная верстка лучше, подскажите чем? А то я уже почти сайт подготовил к выходу и тут задумался.

    Ответить
    • Олег Зубцов 10 января 2013 в 5:32 #

      Табличная верстка (верстка на таблицах):

      — Табличная верстка содержит много кода.

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

      + На таблицах сверстать куда проще, чем блоками. Особенно, это касается кроссбраузерности.

      Блочная верстка (верстка на дивах):

      + Блочная содержит меньше кода, чем табличная 🙂

      + Блоки, в принципе, загружаются быстрее таблиц.

      — Блоками сверстать сайт сложнее, чем таблицами. Особенно, это касается кроссбраузерности.

      Блочная верстка не только современнее, но и лучше по названным выше причинам. Однако, верстать блоками занимает больше времени, чем таблицами, так как проблем с кроссбраузерностью будет достаточно.

      Вот 2 больших, но очень полезных урока по блочной резиновой кроссбраузерной верстке:

      Верстка одноколоночного макета

      Верстка многоколоночного сайта

      А вот и видеоурок по табличной верстке.

      Ответить

Оставить ответ