Презентация к уроку "Работа с таблицами в HTML-документе"

Работа с таблицами в HTML

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

Создание таблицы Создание таблицы – парный тег <table> … </table>. Создает объект таблицы (пустая таблица, не содержащая ячеек) в том месте текста, где он добавлен в код HTML. Добавление в таблицу строк и ячеек: <tr> … </tr> – добавление новой строки; <th> … </th> – добавление ячейки заголовка; <td> … </td> – добавление обычной ячейки.

Таблицы в HTML Описание таблицы Описание строки Описание ячейки

<TABLE BORDER=“1”> <TR> <TD>A1</TD> <TABLE BORDER=“1”> <TR> <TD>A1</TD> <TD>B1</TD> <TD>C1</TD> </TR> <TR> <TD>A2</TD> <TD>B2</TD> <TD>C2</TD> </TR> </TABLE>

АТРИБУТЫ TABLE BGCOLOR –определяет цвет фона таблицы. BORDER –размер границы таблицы. BACKGROUND - позволяет заполнить фон таблицы рисунком. WIDTH – ширина таблицы. BORDERCOLOR – цвет границы таблицы.

АТРИБУТЫ TABLE  CELLPADDING - определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом. CELLSPACING - определяет расстояние (в пикселах) между границами соседних ячеек.

Тег CAPTION  Задает заголовок таблицы. Содержание заголовка должно состоять только из текста. ALIGN - определяет способ вертикального выравнивания заголовка таблицы. Возможные значения: top - помещает заголовок над таблицей (значение по умолчанию); bottom - помещает заголовок под таблицей.

Объединение ячеек COLSPAN - СТОЛБЦЫ ROWSPAN - СТРОКИ Атрибут тега TD

Таблицы в HTML Объединение ячеек. <table border="1"> <tr> <td rowspan="3">строка1 ячейка1</td> <td>строка1 ячейка2</td> <td>строка1 ячейка3</td> </tr> <tr> <td>строка2 ячейка2</td> <td>строка2 ячейка3</td> </tr> <tr> <td colspan="2">строка3 ячейка2</td> </tr> </table> Данная ячейка займет 3 строки Данная ячейка займет 2 колонки

АТРИБУТЫ ТЕГА <TD> и <TH>