reforef.ru 1

Урок 4. Таблицы, их применение. Создание макета сайта

Таблицы – самая сложная, но самая важная тема при изучении языка HTML. Попробуем а этом разобраться по пунктам.


  1. Таблицы определяются контейнером <table>, имеющим параметры:

    1. align – задает выравнивание таблицы.

    2. Width, height – ширина и высота таблицы, в пикселях или в процентах от свободного пространства.

    3. border – толщина рамки таблицы в пикселях.

    4. cellspacing – расстояние между ячейками (создает объем рамки таблицы).

    5. cellpadding – расстояние между рамкой ячейки таблицы и ее содержанием внутри.

    6. bgcolor
      задает цвет фона, а background – рисунок фона таблицы.

  2. Сразу после идет заголовок таблицы в контейнере <caption>...caption> с параметром align=top –сверху (по умолчанию) или bottom – заголовок внизу таблицы.

  3. Далее начинается таблица. Новая строка ячеек в таблице – тег <tr> со следующими параметрами:

    1. align – задает горизонтальное выравнивание внутри всех ячеек строки (left, center, right).

    2. valign – задает вертикальное выравнивание (top, middle, bottom).

    3. height – задает высоту строки

    4. bgcolor
      и background – задают цвет или изображение фона одной строки таблицы.

  4. Для создания новой ячейки предназначен тег <td
    > (обычная ячейка) или <th> (выделенная ячейка для заголовков). Количество ячеек должно быть одинаково в каждом ряду таблицы.

    1. В теги ячеек таблицы входят все вышеперечисленные параметры и несколько новых:

    2. rowspan – объединяет указанное количество ячеек в одну по вертикали.
    3. colspan – объединяет ячейки по горизонтали, например: <
      td colspan =”3”> объединяет 3 ячейки td>


  5. Таблицы можно использовать для создания навигационной панели, вставив в ячейки соответствующие кнопки-рисунки. Для этого border=0, cellspacing=0, cellpadding=0.

  6. Таблицы можно вкладывать друг в друга, помещая одну таблицу внутрь другой. Просто поместите таблицу внутрь тега td, и у вас получится вложенная таблица, например:










  7. ячейка



    1. Эта возможность применяется при форматировании веб-страницы (для размещения контента по всей площади страницы). Однако, при использовании более сложных таблиц с глубокой степенью вложенности, может потребоваться много памяти, что сильно замедлит появление таблицы.

    Задание к уроку


    1. Создайте такие таблицы (раскрасьте ячейки разными цветами, задайте толщину цвет рамки)

      1

      2

      3




      5




      1

      2

      3

      4







      1

      2


      3

      4




      5




      1

      2

      3

      4




      № п/п

      Фамилия и имя

      Фотография

      Оценки

      Март

      Апрель

      Май

      1

      Иванов Ваня



      7

      9

      8

    2. Составьте список вашей группы из 7 человек (используйте различное форматирование и цвета)



    Задание на дом:


    Создайте макеты страниц агентства недвижимости по предложенным вариантам. Показаны макеты двух страниц. Продумайте и сделайте еще одну. Таким образом, проект должен состоять из трех страниц, при щелчке по ссылкам должны открываться новые странички, имеющие одинаковую навигацию, но разное наполнение. Не забывайте про рисунки и фон, а главное, не забудьте границы таблиц сделать невидимыми .
    Логотип и название

    Навигация

    Главная

    Ссылка2

    Ссылка3
    Рисунок

    Несколько фото дома

    Дом снаружи Дом изнутри

    Описание дома


    Логотип и название

    Навигация

    Главная

    Ссылка2

    Ссылка3
    Рисунок

    Большая статья с рисунками


    Контактные телефоны

    Ссылки на друзей
    Ссылки на конкурентов

    Создайте таблицы согласно приведенным скриншотам (см. примеры)