Таблицы на Web-страницах

Тема урока: «Создание и использование таблиц на Web-страницах»
Цели урока:
Обучающая: усвоить новые знания и сформировать умения по созданию и использованию таблиц на Web - страницах; научить учащихся красиво и рационально размещать информацию на странице, используя тэги HTML.
Развивающая: Формирование умения работать фронтально и индивидуально; расширение кругозора; развитие навыков применения компьютерных технологий при создании web-сайтов.
Воспитательная: воспитывать положительное отношение к знаниям, добросовестное отношение к труду, дисциплинированность.
©ГБОУ НПО ПУ№80 МО

Для проверки домашнего задания:
- Для того, чтобы создать Web – страницу нужно написать программу. А на каком языке мы пишем программу для создания Web – страницы?
- Какие две программы необходимо иметь для создания Web – страницы?
- Какова технология создания Web – страницы?
- Какова структура HTML документа?
©ГБОУ НПО ПУ№80 МО

Элементы для создания таблиц:
©ГБОУ НПО ПУ№80 МО

Таблицы в HTML формируются нетрадиционным способом - построчно. Сначала c помощью элемента TR необходимо создать ряд таблицы, в который затем элементом TD помещаются ячейки.
©ГБОУ НПО ПУ№80 МО

Пример:
A1
B1
C1
A2
B2
C2
Результат:
©ГБОУ НПО ПУ№80 МО

TABLE
Элемент для создания таблицы. Обязательно должен иметь начальный и конечный тэги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Ячейки внутри таблицы создаются с помощью элементов TR, TD, TH и CAPTION.
©ГБОУ НПО ПУ№80 МО

Параметры:
ALIGN - определяет способ горизонтального выравнивания таблицы. Возможные значения: left, center, right. Значение по умолчанию - left.
VALIGN - должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle.
©ГБОУ НПО ПУ№80 МО

Параметры:
BORDER - определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет.
BGCOLOR - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
©ГБОУ НПО ПУ№80 МО

Параметры:
WIDTH - определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
HEIGHT - определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
©ГБОУ НПО ПУ№80 МО

Параметры:
CELLPADDING - определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.
CELLSPACING - определяет расстояние (в пикселах) между границами соседних ячеек.
BACKGROUND - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.
©ГБОУ НПО ПУ№80 МО

CAPTION
Задает заголовок таблицы. Содержание заголовка должно состоять только из текста. Использование блочных элементов в этом случае недопустимо.
ALIGN - определяет способ вертикального выравнивания заголовка таблицы. Возможные значения:
top - помещает заголовок над таблицей (значение по умолчанию);
bottom - помещает заголовок под таблицей.
©ГБОУ НПО ПУ№80 МО

TR
Создает новый ряд (строку) ячеек таблицы. Ячейки в ряду создаются с помощью элементов TD и TH
©ГБОУ НПО ПУ№80 МО

TR
Параметры:
ALIGN - определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right.
VALIGN - определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top, bottom, middle.
BGCOLOR - определяет цвет фона для всех ячеек данного ряда. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
©ГБОУ НПО ПУ№80 МО

TD и TH
Элемент TD создает ячейку с данными в текущей строке. Элемент TH также создает ячейку, но определяет ее как ячейку-заголовок.
Такое разграничение позволяет браузерам оформлять содержимое ячейки-заголовка и ячеек с данными разными шрифтами. Кроме того, улучшается работа браузеров, использующих речевой интерфейс. В качестве содержимого ячейки можно использовать другие таблицы.
©ГБОУ НПО ПУ№80 МО

TD и TH
Параметры:
ALIGN - определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: left, center, right. По умолчанию способ выравнивания определяется значением параметра ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю, а для TH - центрирование.
VALIGN - определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру (VALIGN="middle"), если значение этого параметра не было задано ранее в элементе TR.
©ГБОУ НПО ПУ№80 МО

TD и TH
Параметры:
WIDTH - определяет ширину ячейки. Ширина задается в пикселах или в процентном отношении к ширине таблицы.
HEIGHT - определяет высоту ячейки. Высота задается в пикселах или в процентном отношении к ширине таблицы.
COLSPAN - определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
ROWSPAN - определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
©ГБОУ НПО ПУ№80 МО

TD и TH
Параметры:
NOWRAP - блокирует автоматический перенос слов в пределах текущей ячейки.
BGCOLOR - определяет цвет фона ячейки. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
BACKGROUND - заполняет ячейку фоновым рисунком. Необходимо указать URL рисунка. Данный параметр не работает в старых версиях браузера Netscape (до 3.X включительно).
©ГБОУ НПО ПУ№80 МО

Создайте Web-страницу с таблицей. Залейте цветом шапку с заголовками.
Задание:

Создайте в HTML сложную таблицу:
Задание:
©ГБОУ НПО ПУ№80 МО

Итог урока.
Итог урока.
Итог урока:
Можете ли вы прокомментировать все тэги и их параметры которые мы прошли?
Давайте рассмотрим результаты деятельности учащихся на уроке. Подвести итоги работы каждого.
На следующем занятии мы ещё немного поговорим о таблицах, научимся вставлять изображения, делать из изображений фон и ссылки.
©ГБОУ НПО ПУ№80 МО