Таблицы

Таблицы на Web-страницах используются не только для представления табличного материала, но и для того, чтобы выровнять текст и рисунки.

Например, с помощью таблиц (без рамки) можно расположить текст и рисунки в несколько колонок.

Обыкновенный ёж, или европейский ёж — млекопитающее рода евразийских ежей семейства ежовых. Широко распространён в Европе, Малой Азии, Западной Сибири, северо-западе Казахстана, Амурской области, северном и северо-восточном Китае.

Ниже приведена структура простейшей таблицы, состоящей из двух строк и двух столбцов.

Структура простейшей таблицы.

<TABLE>

<TR>

<TD>Месяц</TD>

<TD>Год</TD>

</TR>

<TR>

<TD>Январь</TD>

<TD>2015</TD>

</TR>

</TABLE>

Примечание. Для удобства восприятия теги таблицы выделены цветом.

Пояснения к тегам.

Тег <TABLE> - это контейнер для элементов, определяющих содержимое таблицы.

Тег <TR> (от английского table row - строка таблицы) - строки таблицы, в которых находится указанное количество ячеек, определяемых тегами <TD>.
Размещаются всегда внутри тега <TABLE>.

Тег <TD> (от английского table data - данные таблицы) - ячейки строк таблицы.
Ячейки в строке описываются слева направо.
В ячейки можно помещать все, что угодно, в том числе текст, рисунки и даже другие таблицы (вложенные таблицы).
Размещаются всегда внутри тега <TR>.

Для управления отображением таблиц используются атрибуты тегов <TABLE>, <TR>, <TD>

Рамка таблицы

Тег <TABLE> позволяет управлять отображением рамки таблицы с помощью атрибута BORDER

BORDER - Устанавливает толщину границы в пикселах вокруг таблицы. При наличии этого атрибута также отображаются границы между ячеек.

Примеры

<table width="200" border="0" >

Месяц	Год
Январь	2015

<table width="200" border="1" >

Месяц	Год
Январь	2015

<table width="200" border="6">

Месяц	Год
Январь	2015

Отступы

Тег <TABLE> позволяет задать два вида отступов:

CELLPADDING - расстояние между границей ячейки и ее содержимым.
CELLSPACING - расстояние между границами соседних ячеек.

Примеры

<table width="300" border="1" cellpadding="5">

Месяц	Год
Январь	2015

<table width="300" border="1" cellspacing="5">

Месяц	Год
Январь	2015

Размеры

Каждый из тэгов <TABLE>, <TR> и <TD> имеет атрибуты, задающие размеры в пикселях или в процентах от общей высоты или ширины.

По умолчанию каждой ячейке отводится минимальное место, необходимое для размещения всей информации.

Примеры

Атрибут WIDTH тега <TABLE> - задает ширину таблицы.

<table width="80%" border="1">

Месяц	Год
Январь	2015

В приведенном примере таблица занимает 80 процентов ширины рабочей области браузера. Однако, если вся нужная информация не поместится в эту область, таблица будет расширена (чаще всего увеличивается ее высота).

Атрибут HEIGHT тега <TR> - задает высоту строки таблицы.

В приведенном примере для первой строки таблицы установлена высота 50 пикселов. Однако если вся нужная информация не поместится в эту область, ее высота будет увеличена.

Атрибуты WIDTH и HEIGHT тега <TD>

WIDTH - устанавливает ширину ячейки.
HEIGHT - устанавливает высоту ячейки.

В приведенном примере для первой ячейки первой строки таблицы установлена ширина 50 и высота 30 пикселов. Однако если вся нужная информация не поместится в эту область, ее высота будет увеличена.

Выравнивание

Каждый из тэгов <TR> и <TD> имеет атрибуты ALIGN и VALIGN, позволяющие выравнивать информацию внутри ячеек таблицы.

Атрибут ALIGN - выравнивание содержимого ячейки по горизонтали. Этот атрибут имеет следующие значения:

LEFT - выравнивание по левой границе.
RIGHT - выравнивание по правой границе.
CENTER - выравнивание по центру.

Атрибут VALIGN - выравнивание содержимого ячейки по вертикали. Этот атрибут имеет следующие значения:

TOP - выравнивание по верхней границе.
BOTTOM - выравнивание по нижней границе.
MIDDLE - выравнивание по середине.

Пример

В приведенном примере:

текст в ячейках первой ячейки первой строки выровнен по центру и верхней границе;
текст в первой ячейке второй строки выровнен по правой и верхней границам;
текст во второй ячейке второй строки выровнен по левой и нижней границам.

Фон

С помощью атрибутов тегов <TABLE>, <TR> и <TD> можно изменять фон таблицы, строки и даже отдельной ячейки.

Атрибуты тега <TABLE>:

BGCOLOR - устанавливает цвет фона таблицы.
BACKGROUND - задает фоновый рисунок в таблице.

Атрибуты тега <TR>:

BGCOLOR - устанавливает цвет фона ячеек строки.

Атрибуты тега <TD>:

BGCOLOR - устанавливает цвет фона ячейки.
BACKGROUND - задает фоновый рисунок в ячейке.

Примеры

<table width="300" bgcolor="#C0C0C0" border="1">

Месяц	Год
Январь	2015

В приведенном примере фон установлен для всей таблицы.

<table width="300" border="1">

<tr bgcolor="#00FFFF">

Месяц	Год
Январь	2015

В приведенном примере фон установлен только для первой строки таблицы.

В приведенном примере:

фон всей таблицы задан зеленым цветом;
фон первой строки задан синим цветом;
цвет текста в первой ячейке первой строки задан белым цветом;
фон во второй ячейке первой строки задан красным цветом;
фон в первой ячейке второй строки задан рисунком.

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

С помощью атрибутов тега <TD> можно объединять соседние ячейки внутри одной строки или столбца.

COLSPAN - устанавливает число ячеек, которые должны быть объединены по горизонтали
ROWSPAN - устанавливает число ячеек, которые должны быть объединены по вертикали.

Примеры

Исходная таблица имеет следующий вид:

Объединение по горизонтали первой и второй ячеек исходной таблицы выглядит так:

Объединение по вертикали третьей и шестой ячеек исходной таблицы выглядит так: