Программа по формированию навыков безопасного поведения на дорогах и улицах «Добрая дорога детства» 2

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

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

1. 
   Таблицы определяются контейнером <table>, имеющим параметры:
   
   1. 
      align – задает выравнивание таблицы.
      
   2. 
      Width, height – ширина и высота таблицы, в пикселях или в процентах от свободного пространства.
      
   3. 
      border – толщина рамки таблицы в пикселях.
      
   4. 
      cellspacing – расстояние между ячейками (создает объем рамки таблицы).
      
   5. 
      cellpadding – расстояние между рамкой ячейки таблицы и ее содержанием внутри.
      
   6. 
      bgcolor – задает цвет фона, а background – рисунок фона таблицы.
      
2. 
   Сразу после идет заголовок таблицы в контейнере <caption>...caption> с параметром align=top –сверху (по умолчанию) или bottom – заголовок внизу таблицы.
   
   
   Далее начинается таблица. Новая строка ячеек в таблице – тег <tr> со следующими параметрами:
   

   1. 
      align – задает горизонтальное выравнивание внутри всех ячеек строки (left, center, right).
      
   2. 
      valign – задает вертикальное выравнивание (top, middle, bottom).
      
   3. 
      height – задает высоту строки
      
   4. 
      bgcolor и background – задают цвет или изображение фона одной строки таблицы.
      
   
   Для создания новой ячейки предназначен тег <td> (обычная ячейка) или <th> (выделенная ячейка для заголовков). Количество ячеек должно быть одинаково в каждом ряду таблицы.
   

   1. 
      В теги ячеек таблицы входят все вышеперечисленные параметры и несколько новых:
      
   2. 
      rowspan – объединяет указанное количество ячеек в одну по вертикали.
      
   3. 
      colspan – объединяет ячейки по горизонтали, например: <td colspan =”3”> объединяет 3 ячейки td>
      
   
   Таблицы можно использовать для создания навигационной панели, вставив в ячейки соответствующие кнопки-рисунки. Для этого border=0, cellspacing=0, cellpadding=0.
   
   
   Таблицы можно вкладывать друг в друга, помещая одну таблицу внутрь другой. Просто поместите таблицу внутрь тега td, и у вас получится вложенная таблица, например:
   
   
   
   
   
   
   
   
   
   
   

   ячейка

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

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

   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
   Рисунок
   
   Большая статья с рисунками
   
   
   Контактные телефоны
   
   Ссылки на друзей
   Ссылки на конкурентов
   
   Создайте таблицы согласно приведенным скриншотам (см. примеры)