Лабораторная работа № 8

Тема: Создание таблиц

Цель: научиться создавать таблицы в 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>