Примечание

1. Таблица, если не указано особо, всегда выравнивается по левому краю;

2. Параметр background,отвечающий за рисунок фона, своеобразно понимается в разных браузерах. IE вставляет картинку во всю таблицу, если таблица по размеру больше фонового рисунка, он повторяется по горизонтали или вертикали. Netscapeдобавляет фоновое изображение в каждую ячейку таблицы;

3. По умолчанию, таблица выводится без рамки. Однако Netscapeдобавляет тонкую линию между ячеек. Чтобы ее не было, всегда указывайте параметр border=0;

4. Если ширина таблицы не указана, она подгоняется под содержание ячеек.

Пример 1:Создание таблицы

<HTML>

<HEAD>

<TITLE>ТАБЛИЦА</ТIТLE>

</HEAD>

<BODY>

<TR>

<B>Заголовок Таблицы.</В>

</TD>

</TR>

<TR>

Первая ячейка первой строки

</TD>

Вторая ячейка первой строки

</TD>

</TR>

<TR>

Первая ячейка второй строки

</TD>

Вторая ячейка второй

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Тег <TABLE>задает таблицу

1. Атрибуты border="2"и align=centerзадают, соответственно, размер границ таблицы и выравнивание ее по центру страницы Тег <TR>задает строку таблицы Тег <TD>задает ячейку таблицы

2. Атрибут colspan=nобъединяет n ячеек по горизонтали (по столбцам) В результате получится следующая таблица, состоящая из двух столбцов и двух строк:

Заголовок Таблицы.
Первая ячейка первой строки	Вторая ячейка первой строки
Первая ячейка второй строки	Вторая ячейка второй

Пример 2. Сложная таблица

<HTML>

<HEAD>

<TITLE>СЛОЖНАЯ ТАБЛИЦА</TITLE>

</HEAD>

<BODY>

<TR>

Две ячейки, объединенные по горизонтали

</TD >

</TR > <TR >

Две ячейки, объединенные по вертикали

</TD >

по левому краю

</TD>

</TR>

<TR>

по правому краю

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Атрибут colspan=nобъединяет n ячеек по горизонтали (по столбцам)

Атрибут rowspan=nобъединяет n ячеек по вертикали (по строкам)

Атрибут valign="middle"выравнивает текст в ячейке по центру ячейки по вертикали

В результате получается следующая таблица:

Две ячейки, объединенные по горизонтали
Две ячейки, объединенные по вертикали	по левому краю
	по правому краю

Пример 3: Более сложная таблица

<HTML>

<HEAD>

<TITLE>УЧЕБНАЯ ТАБЛИЦА</TITLE>

</HEAD>

<BODY>

<TR>

<TH COLSPAN="3">УЧЕБНАЯ ТАБЛИЦА</TH></TR>

</THEAD>

<TBODY>

<TR>

<TD WIDTH="33%">Это первая ячейка</TD>

<TD WIDTH="33%">Это вторая ячейка</ TD>

<TD ROWSPAN="3">А это три ячейки третьего столбца объединились в одну большую</TD>

</TR>

<TR>

<TD COLSPAN="2">Это единственная ячейка второй строки, объединяющая оба столбца</TD>

</TR>

<TR>

<TD> Это первая ячейка третьей строки</TD>

<TD WIDTH="33%">А это вторая ячейка третьей строки</TD >

</TR>

</TBODY>

<TR>

<SMALL>конец</SMALL></TD></TR>

</TFOOT>

</TABLE>

</BODY>

</HTML>

Атрибут CELLSPACING="6"задает свободное пространство между ячейками таблицы

Атрибут CELLPADDING="20"задает свободное пространство между данными в ячейке и ее границами

Атрибут BORDERCOLORLIGHT="Lime"задает цвет левого и верхнего углов таблицы

Атрибут BORDERCOLORDARK="Green"задает цвет правого и нижнего углов таблицы

Атрибут BGCOLOR="#DFFFDF"задает цвет фона таблицы

В результате получается следующая таблица:

Задание: