Тема: Создание таблиц
Цель: научиться создавать таблицы в HTML
Контрольные вопросы:
1. Перечислите теги описания таблицы, заголовка таблицы, строки таблицы.
2. Назовите атрибуты элементов, используемых при создании таблицы: высота, ширина, цвет фона, выравнивание таблицы, размещение заголовка под или над таблицей и т.д.
Теоретический материал
Таблицы очень часто применяются при создании web-страниц, поскольку позволяют довольно просто производить разметку документа. В более продвинутом способе разметки используется тег div, однако мы не будем рассматривать этот способ из-за его трудности для восприятия.
В этой лабораторной работе вы познакомитесь с дескрипторами документа, используемыми для создания таблиц:
- <TABLE> … </TABLE> - основной дескриптор таблицы, объявляющий ее начало и конец.
- <TR> … </TR> - открывающий и закрывающие строку таблицы дескриптор.
- <TD> … </TD> - дескрипторы, создающие единичную ячейку таблицы.
Атрибуты таблицы:
- align="x" – выравнивание;
|
|
- border="x" – рамка ячеек;
- colspan="x" – объединение столбцов в один;
- rowspan="x" – объединение строк в одну.
Порядок выполнения работы:
1. Создайте простую таблицу, состоящую из двух строк и двух столбцов.
<HTML>
<HEAD>
<TITLE>Примеры создания таблиц</TITLE>
</HEAD>
<BODY>
<H1> Простая таблица</H1>
<TABLE>
<TR>
<TD>
Первая ячейка
</TD>
<TD>
Вторая ячейка
</TD>
</TR>
<TR>
<TD>
Третья ячейка
</TD>
<TD>
Четвертая ячейка
</TD>
</TR>
</TABLE>
2. Создайте сложную таблицу, включающую элементы объединения строк и столбцов. Таблица содержит три строки и четыре ячейки. Часть строк и ячеек таблицы объединены.
<H1>Сложная таблица</H1>
<TABLE>
<TR>
<TD>
Первая ячейка, первая строка
</TD>
<TD>
Вторая ячейка, первая строка
</TD>
<TD>
Третья ячейка, первая строка
</TD>
<TD>
Четвертая ячейка, первая строка
</TD>
</TR>
<TR>
<TD ROWSPAN="2">
Ячейка, объединяющая две строки таблицы.
</TD>
<TD>
Вторая ячейка, вторая строка
</TD>
<TD>
Третья ячейка, вторая строка
</TD>
<TD>
Четвертая ячейка, вторая строка
</TD>
</TR>
<TR>
<TD>
Первая ячейка третья строка
</TD>
<TD COLSPAN="2">
Ячейка объединяет две ячейки
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
3. Добавьте рамку таблиц с помощью атрибута border тега Table.
4. Сохраните файл под названием Lesson_4.html.
5. Просмотрите страницу в браузере.
Содержание отчета
В качестве отчета необходимо предоставить полученный вами файл Lesson_4.html.