Презентация на тему Таблицы HTML. 8 урок Таблицы. Тема Таблицы Узнаем о работе с таблицами в html о тегах вывода таблиц

• Название: Тема Таблицы Узнаем о работе с таблицами в html о тегах вывода таблиц
• Анкор: Презентация на тему Таблицы HTML
• Дата: 16.02.2023
• Размер: 382.71 Kb.
• Имя файла: 8 урок Таблицы.pptx
• Тип: Документы; #941013

Тема: Таблицы

Узнаем:

- о работе с таблицами в HTML;

- о тегах вывода таблиц.

Вспомним:

- Какие теги для форматирования текста, вывода списка, вывода бегущих строк вы знаете?

, , ,

…

,
…
,
,

…, …

Заголовок таблицы
Заголовки столбцов
Ячейки.


Таблицы в HTML формируются нетрадиционным способом - построчно. Сначала c помощью элемента TR необходимо создать ряд таблицы, в который затем элементом TD помещаются ячейки.

Тег TABLE

 Элемент для создания таблицы. Обязательно должен иметь начальный и конечный тэги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Ячейки внутри таблицы создаются с помощью элементов TR, TD и CAPTION.

Атрибуты:

 ALIGN = left/ center/ right - определяет способ горизонтального выравнивания таблицы. Значение по умолчанию - left.
VALIGN = top/ bottom/ middle - определяет способ вертикального выравнивания для содержимого таблицы.

Атрибуты:

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

Атрибуты:

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

Атрибуты:

 CELLPADDING - определяет расстояние между границей ячейки и ее содержимым (в пикселах).
CELLSPACING - определяет расстояние (в пикселах) между границами соседних ячеек.
BACKGROUND - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.

Тег CAPTION

 Задает заголовок таблицы. Содержание заголовка должно состоять только из текста. Может размещаться только внутри контейнера .
ALIGN = top/ bottom - определяет способ вертикального выравнивания заголовка таблицы. Возможные значения:

top - помещает заголовок над таблицей (значение по умолчанию);
bottom - помещает заголовок под таблицей.

Тег TR

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


Атрибуты:

ALIGN = left/ center/right - определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда.
VALIGN = top/ bottom/ middle - определяет способ вертикального выравнивания содержимого всех ячеек данного ряда.
BGCOLOR - определяет цвет фона для всех ячеек данного ряда.

Тег TD

Элемент TD создает ячейку с данными в текущей строке.

Атрибуты:

ALIGN = left/ center/right - определяет способ горизонтального выравнивания содержимого ячейки. По умолчанию способ выравнивания определяется значением параметра ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю.
VALIGN = top/ bottom/ middle - определяет способ вертикального выравнивания содержимого ячейки.

TD

Атрибуты:

WIDTH - определяет ширину ячейки. Ширина задается в пикселах или в процентном отношении к ширине таблицы.
HEIGHT - определяет высоту ячейки. Высота задается в пикселах или в процентном отношении к ширине таблицы.
COLSPAN - определяет количество столбцов, которые будет занимать ячейка. По умолчанию имеет значение 1.
ROWSPAN - определяет количество строк, которые будет занимать ячейка. По умолчанию имеет значение 1.

Пример 1:

Пример 1:

   

   

       

   

B1	C1
A2	B2	C2

Пример 2:





           



   

           

   

Заголовок

A1	B1	C1
A2	B2

А1	B1	C1
A2	B2

Пример 3:





           



   

           

   

Заголовок

A1	B1	C1
A2		C2

А1	B1	C1
A2		C2

Создать таблицу следующей структуры:

Математика	Русский	Музыка
Химия	Физкультура
Физика	Обществознание	Информатика
История		Биология

Задание

Итог урока. Итог урока. Итог урока:

Можете ли вы прокомментировать все тэги и их параметры которые мы прошли? 
Рассмотреть результаты деятельности учащихся на уроке. Подвести итоги работы каждого.
На следующем занятии будет проведен промежуточный контроль по темам: «Алгоритмизация и программирование» и «Коммуникационные технологии».