Простая вёрстка в HTML. Урок №6.

Таблица контента и информационного поля.

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

Для создания блока, так называемого информационного поля и контента, в область закомментированных строк «Контент сайта», вставляем следующий код:

                <!-- Контент сайта -->
    <tr>
      <td>
                  <table style="width: 1000px; height: 100%; margin-left: auto; margin-right: auto;"
                 bordercolor="#0000FF" border="1" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="text-align: center; vertical-align: top; height: 500px; width: 300px;" bgcolor="#FFF8E1">
                  Левая колонка
                  </td>
                 
      <td style="text-align: center; vertical-align: top; " bgcolor="#FFF8E1">
                  Блок контента
                  </td>
    </tr>
  </tbody>
</table>
 
                  </td>
    </tr>
                <!-- Конец контента сайта -->

Должно получиться вот так:

Рисунок №1.

Здесь мы видим блок «Левая колонка», так называемое информационное поле и сам «Блок контента». А теперь немного разберём, то как у нас получилось две колонки. Всё очень просто, в созданной таблице (table) и её теле (tbody), мы создали строку таблицы (tr).  Затем дважды вставив туда парный тег,  <td></td> (table data - данные таблицы) и таким образом получили две колонки. В каждую из колонок мы прописали, стилевое оформление, где в левом блоке указали высоту и ширину height: 500px; width: 300px;.  Но не стали этого делать в блоке контента, так как там ширина будет создана от остатка общей таблицы, минус правая колонка, а высота, от заданной. Ещё один очень важный момент, что касаемо ширины таблиц.  После того, как мы задали ширину для колонки, или хотим чтобы содержимое наших таблиц увеличивалось, от наполняемого контента, необходимо просто удалить значение ширины. Для примера давайте сделаем следующее, обратите внимание на рисунок №1, мы видим, что таблица сверху и снизу прилипла к строке, общей таблицы. Это происходит, потому что для левого и правого отступа мы задали значения тегом margin, но не задали отступы с наружи, для низа и верха.  Давайте сделаем это вот так margin-top: 5px; и  margin-bottom: 5px;  больше нечего, то есть с лева и с права браузер видит автоматически отступ, а для низа и верха всегда будет удерживать заданное значение. А теперь посмотри что получилось:

Рисунок №2.

 

 Как видим, отступ сверху удался, но вот снизу почему-то, нет. Более того если посмотреть на все это при увеличении, то таблица контента, даже выезжает а бордюр строки общей таблицы.  Причина в конфликте ширины. Ширина у нас задана, для всего блока в основной таблице, также задана, в блоке контента и плюс ко всему она задана в столбце блока контента. Если сейчас мы удалим значение ширины height: 100%; из общей таблицы, или таблицы контента (а лучше там и там) то всё станет на свои места. В процессе создания таблиц необходимо помнить, что мы создавали некоторые правила и параметры, только для визуализации, не забывайте удалять или корректировать их, при дальнейшей вёрстке!

Также помимо параметра, text-align: center; который как мы уже знаем, выравнивает текст по центру содержимого, был добавлен параметр, vertical-align: top; что означает «Расположить содержимое по верху». Всё остальное нам известно. Если же у вас появилось желание сделать, два информационных поля, по краям и один блок контента, то тут необходимо просто создать ещё одну колонку при помощи тегов <td></td> и прописать стилевые правила, при этом обозначив ширину для каждой из колонок. Для примера я просто скопировал, код левой колонки, и вставил его, ниже блока контента. Далее заменил только ширину в обеих колонках на 250 пикселей и назвал поле «Правая колонка», получилось вот что:

Рисунок № 3.

 

 Ну, вот пожалуй и все, что хотелось сказать о создании таблиц для области контента и блоков информации. Я думаю,  на данном этапе вы достаточно получили, знаний, что бы самостоятельно создать таблицу.  Поскольку последней таблицей нашей странички будет  footer (нижний колонтитул), или как его ещё называют «подвал», то предлагаю в качестве домашнего задания создать его самостоятельно. Шириной в 1000 пикселей и высотой в 150, прописав туда следующее:  Все права защищены © www.Имя_вашего_сайта.ru

А на следующем занятие мы поговорим о том как, сделать эту надпись активной ссылкой, и разместить в одном из углов счётчик посещений. И напоследок, если кто не знает, как пишется знак копирайтинг ©, то для этого у себя на клавиатуре воспользовавшись правым блоком с цифрами, сделайте следующее: Нажмите и удерживайте кнопку Alt код 0169, отпустите клавишу Alt.

И так до встречи в следующем уроке: «Простая вёрстка в HTML. Урок №7».

Смотреть пример №1