Таблицы

В устройстве таблицы легче всего разобраться на простом примере.

<HTML> <HEAD> <TITLE>Пример 10</TITLE> </HEAD> <H1>Простейшая таблица </H1> <TABLE BORDER=1>  <CAPTION>  У таблицы может быть заголовок </CAPTION> <TR>  <TD>  Первая строка, первая колонка </TD>  <TD>  Первая строка, вторая колонка </TD>  </TR>  <TR>  <TD>  Вторая строка, первая колонка </TD>  <TD>  Вторая строка, вторая колонка </TD>  </TR>  </TABLE>  </BODY> </HTML>

<TABLE></table>

Таблица начинается с метки <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> ... </CAPTION>), хотя заголовок не является обязательным. Метка <CAPTION> может включать атрибут ALIGN. Допустимые значения: <CAPTION ALIGN=TOP> (заголовок помещается над таблицей) и <CAPTION ALIGN=BOTTOM> (заголовок помещается под таблицей).

<TR>

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

Атрибут	Описание	Пример задания значения
`ALIGN`	Устанавливает выравнивание текста в ячейках строки: выравнивание влево, выравнивание по центру, выравнивание вправо	`ALIGN=LEFT` `ALIGN=CENTER` `ALIGN=RIGHT`
`VALIGN`	Устанавливает вертикальное выравнивание текста в ячейках строки: `TOP` (выравнивание по верхнему краю), `MIDDLE` (выравнивание по центру), `BOTTOM` (выравнивание по нижнему краю).	`VALIGN=TOP` `VALIGN=MIDDLE` `VALIGN=BOTTOM`

<TD>

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

Атрибут	Описание	Пример задания значения
`NOWRAP`	Присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку.
`COLSPAN`	Устанавливает "размах" ячейки по горизонтали. Например, `COLSPAN=3` означает, что ячейка простирается на три колонки.	`COLSPAN=3`
`ROWSPAN`	Устанавливает "размах" ячейки по вертикали. Например, `ROWSPAN=2` означает, что ячейка занимает две строки.	`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>

<body>

<tr>

<td colspan="2">Строка 1 Объединение по

столбцам</td>

<td>Строка 1 Столбец 2</td>

</tr>

<tr>

<td>Строка 2 Столбец 1</td>

<td>Строка 2 Столбец 2</td>

<p align="center">Объединение по строчное Столбец 2</td>

</tr>

<tr>

<td>Строка 3 Столбец 1</td>

<td>Строка 3 Столбец 2</td>

</tr>

</table>

</body>

</html>

Пример построение таблицы с объединением ячеек

Строка 1 Объединение по столбцам	Строка 1 Столбец 2
Строка 2 Столбец 1	Строка 2 Столбец 2	Объединение по строчное Столбец 2
Строка 3 Столбец 1	Строка 3 Столбец 2

<TH>

Элемент ячейки, которая является заголовком столбца или строки таблицы. Броузер выводит текст содержащийся в данной ячейке-заголовке полужирным шрифтом. Этот элемент должен располагаться внутри элемента <TR>. Атрибуты таки же, что и для тега <TD>

<TTHEAD>, <TFOOT> и <TBODY>

Для группировки строк таблицы. Данные теги можно использовать как с закрывающими тегами так и без них (</thead>, </tfoot>, </tbody>).

При использовании данных тегов нужно выполнять следующие правила:

в таблице можно использовать по одному элементу <THEAD>, <TFOOT> и множество раз элемент <TBODY>;
соблюдайте последовательность использования элементов <THEAD>, <TFOOT>, <TBODY>. Информация размещенная в блоке <TFOOT> разместится в нижней части таблицы;
все блоки (<THEAD>, <TFOOT>, <TBODY>) должны содержать одинаковое количество столбцов.

Пример:

<TABLE>

<THEAD>

<TR> <TD>Ячейка заголовка №1<TD>Ячейка заголовка №2

<TFOOT>

<TR> <TD>Нижняя ячейка №1<TD> Нижняя ячейка №2

<TBODY>

<TR> <TD>Строка 1 ячейка 1.1<TD> ячейка 1.2

<TR> <TD>Строка 2 ячейка 2.1<TD> ячейка 2.2

<TR> <TD>Строка 3 ячейка 3.1<TD> ячейка 3.2

</table>

Результат построения таблицы

Ячейка заголовка №1	Ячейка заголовка №2
Строка 1 ячейка 1.1	ячейка 1.2
Строка 2 ячейка 2.1	ячейка 2.2
Строка 3 ячейка 3.1	ячейка 3.2
Нижняя ячейка №1	Нижняя ячейка №2

<COLGROUP> и <COL>

Данные элементы позволяют создавать группы столбцов с одинаковыми свойствами.

Элемент <COL> всегда располагается внутри тега <COLGROUP>. В таблице может одновременно присутствовать несколько элементов <COLGROUP> и не одного элемента <COL>. Если в реальной таблице количество столбцов меньше чем элементов оформления (<COLGROUP>, <COL>), то лишние элементы оформления игнорируются. Для задания свойств колонок могут использоваться атрибуты используемые для тега <TD>.

Пример:

<BODY>

<TR><TD>&nbsp<TD>1<TD>2

</table>

</body>

Результат группировки столбцов в таблице

Списки

<UL><LI></ul>

Маркированный список. Пример:

Текст HTML кода	Вид
<UL> <LI> Пункт первый <LI> Пункт второй <LI> Пункт третий </ul>	Пункт первый Пункт второй Пункт третий

Элемент UL обозначает начало маркированного списка. Элемент LI отделяет один пункт от другого.

<OL><LI></ol>

Структура нумерованного списка похожа на структуру не нумерованного списка.

Текст HTML кода	Вид
<OL> <LI> Пункт первый <LI> Пункт второй <LI> Пункт третий </ol>	Пункт первый Пункт второй Пункт третий

Атрибуты для тега <OL>

Атрибут	Описание	Пример задания значения	Вид
Type	Задает способ нумерации	<OL Type=”A”> <LI> Пункт первый <LI> Пункт второй <LI> Пункт третий </OL>	A Пункт первый B Пункт второй C Пункт третий
значение	вид
Type=”1” Type=”i” Type=”I” Type=”a” Type=”A”	1, 2, 3, 4, … i, ii, iii, iv, … I, II, III, IV, … a, b, c, d,… A, B, C, D, …
Start	Начальное значение для нумерации.	<OL Type=”A” Start=4> <LI> Пункт первый <LI> Пункт второй <LI> Пункт третий </OL>	D Пункт первый E Пункт второй F Пункт третий

Для тега LI можно использовать атрибут value=номер, который задает номер для текущего пункта списка. Соответственно следующий за ним пункт списка будет иметь очередной номер и т.д.

Пример

<OL start=4> <LI> Пункт один <LI> Пункт два </OL>	<OL> <LI value > Пункт один <LI> Пункт два </OL>
Результат будет одинаков в обоих случаях