Вторая строка, вторая колонка

Вторая строка, первая колонка

Первая строка, вторая колонка

</td> 

</tr> 

<tr> 

<td> 

</td> 

<td> 

</td> 

</tr> 

</table> 

</body>

</html>

Этот фрагмент на экране будет выглядеть так:

Простейшая таблица

У таблицы может быть заголовок

Первая строка, первая колонка	Первая строка, вторая колонка
Вторая строка, первая колонка	Вторая строка, вторая колонка

Таблица начинается с тэга <table> и заканчивается тэгом </table>. Тэг <table>может включать несколько атрибутов:

align- устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: align=left (выравнивание влево), align=center (выравнивание по центру), align=right (выравнивание вправо).

width- ширина таблицы. Ее можно задать в пикселях (например, WIDTH=400) или в процентах от ширины страницы (например, WIDTH=80%).

border- устанавливает ширину внешней рамки таблицы и ячеек в пикселях (например, BORDER=4). Если атрибут не установлен, таблица показывается без рамки.

cellspacing- устанавливает расстояние между рамками ячеек таблицы в пикселях (например, CELLSPACING=2).

cellpadding- устанавливает расстояние между рамкой ячейки и текстом в пикселях (например, CELLPADDING=10).

Таблица может иметь заголовок (<caption> ... </caption>), хотя заголовок не является обязательным. Тэг <caption> может включать атрибут align.

Допустимые значения:

<caption align=top> - заголовок помещается над таблицей

<caption align=bottom> - заголовок помещается под таблицей

Каждая строка таблицы начинается с тэга <tr> и заканчивается тэгом </tr>. Тэг<tr> может включать следующие атрибуты:

align– устанавливает выравнивание текста в ячейках строки. Допустимые значения: align=left (выравнивание влево), ALIGN=CENTER (выравнивание по центру), align=right (выравнивание вправо).

valing- устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: valing=top (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), valing=bottom (выравнивание по нижнему краю).

Каждая ячейка таблицы начинается с тэга <td> и заканчивается тэгом </td>. Тэг <td> может включать следующие атрибуты:

nowrap присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку.

colspan устанавливает "размах" ячейки по горизонтали. Например, COLSPAN=3 означает, что ячейка простирается на три колонки.

rowspan устанавливает "размах" ячейки по вертикали. Например, ROWSPAN=2 означает, что ячейка занимает две строки.

align устанавливает выравнивание текста в ячейке. Допустимые значения: align=left (выравнивание влево), ALIGN=CENTER (выравнивание по центру), align=right(выравнивание вправо).

valign устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), valign=middle (выравнивание по центру), valign=bottom (выравнивание по нижнему краю).

width устанавливает ширину ячейки в пикселях (например, width=200).

height устанавливает высоту ячейки в пикселях (например, height=40).

Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект   (non-breaking space - не разрывающий пробел). Ячейка по-прежнему будет пустой, а рамка вокруг нее будет.

Любопытно отметить, что любая ячейка таблицы может содержать в себе другую таблицу. Постройте таблицы согласно приведенным примерам:

<html>

<head>

<title>Пример 12</title>

</head>

<center>

<font color="red"><h3>Специальная таблица</h3>

</font>

</center>

<table border=4 cellspacing=3>

<caption>Заголовок таблицы</caption>

<tr><th bgcolor="green">

<th bgcolor="green">Заголовок 1

<th bgcolor="green">Заголовок 2

<tr><th bgcolor="green">Заголовок3

<td>Ячейка1

<td>Ячейка2

</table>

</body>

</html>

<html>

<head>

<title>Пример 13</title>

</head>

<center>

<font color="red"><h3>Объединение ячеек</h3>

</font>

</center>

<table border=4 cellspacing=0 widht=70%>

<tr><td bgcolor="yellow"><b>Заголовок1</b>

<td bgcolor="yellow"><b>Заголовок2</b>

<tr><td rowspan=3 bgcolor="lime">Ячейка1

<td>Ячейка2

<tr><td>Ячейка3

<tr><td>Ячейка4

</table>

</body>

</html>

Таблица примера 13 на экране будет выглядеть так:

Объединение ячеек

Заголовок1	Заголовок2
Ячейка1	Ячейка2
Ячейка3
Ячейка4