Лабораторная работа № 3
Создание таблицы
Таблицы в HTML представляются множеством ячеек, которые заключены в строки. Совокупность всех строк образует целую таблицу.
Для создания таблиц используется четыре пары тегов:
<TABLE>…</TABLE > - устанавливают начало и конец таблицы;
<CAPTION >…</CAPTION > - заголовок таблицы;
<TR>…</TR> - добавляют новую строку в таблицу;
<TH>…</TH> - добавляют в строку ячейку заголовка;
<TD>…</TD> - добавляют в строку обычную ячейку.
В документ можно добавить простейшую таблицу, пользуясь приведёнными выше сведениями.
ПРИМЕР 1. Создание простой таблицы.
<HTML>
<TITLE> Простейшая таблица</TITLE>
<TABLE>
<TR> <TD>1<TD>11<TD>111<TD>1111
<TR> <TD>2<TD>22<TD>222<TD>2222
<TR> <TD>3<TD>33<TD>333<TD>3333
<TR> <TD>4<TD>44<TD>444<TD>4444
</TABLE>
</HTML>
Заголовок таблицы
Для каждой таблицы имеется возможность создать заголовок, используя HTML-элемент CAPTION, помещённый после <TABLE>.
Если используется заголовок таблицы, то элемент CAPTION должен быть задан непосредственно после тега <TABLE> нужной таблицы. Также для любой таблицы может быть создано не более одного заголовка.
ПРИМЕР 2. Создание простой таблицы с заголовком.
<HTML>
<TITLE> Заголовок таблицы</TITLE>
<TABLE>
<CAPTION><B>Простая таблица, но уже с заголовком</B > </CAPTION>
<TR> <TD>1<TD>11<TD>111<TD>1111
<TR> <TD>2<TD>22<TD>222<TD>2222
<TR> <TD>3<TD>33<TD>333<TD>3333
<TR> <TD>4<TD>44<TD>444<TD>4444
</TABLE>
</HTML>
Для элемента CAPTION можно задать атрибут, определяющий положение заголовка относительно таблицы – align. Этот атрибут может принимать значения:
top – заголовок показывается сверху таблицы (используется по умолчанию);
bottom – под таблицей;
left – слева от таблицы;
right – справа от таблицы.
Параметры отображения таблицы
Многие параметры отображения таблицы задаются установкой соответствующих значений атрибутов HTML-элемента TABLE. Далее приведён список наиболее используемых атрибутов.
аlign – задаёт положение таблицы в окне браузера (left, right, center);
bgcolor – задаёт цвет фона таблицы;
border – задаёт толщину внешней границы таблицы (по умолчанию имеет значение 1);
bordercolor – цвет границ таблицы (цвет внешней границы и цвет границ ячеек);
cellspacing – размер пустого пространства между ячейками таблицы;
сellpadding – размер пустого пространства между границами и содержимым ячеек таблицы;
frame – задаёт отображаемые части внешней рамку таблицы, может принимать одно из перечисленных ниже значений:
void – рамка не отображается (используется по умолчанию);
above – отображается только верхняя граница;
below – показывается только нижняя граница;
hsides – отображаются только верхняя и нижняя границы;
vsides– показывается правая и левая границы;
lhs– отображается левая граница;
rhs– отображается только правая граница;
box– рамка отображается полностью;
border – то же самое, что и box.
rules – задаёт, какие именно границы между ячейками должны отображаться, может принимать одно из следующих значений:
none – границы между ячейками не отображаются (используются по умолчанию);
group – показываются границы только между группами строк и столбцов;
rows – отображаются только границы между строками таблицы;
cols – показываются границы только между столбцами таблицы;
all– отображаются все границы между ячейками.
height – задаёт рекомендуемую высоту таблицы.
width – определяет рекомендуемую ширину таблицы.
В качестве значение атрибутов, задающих размер таблицы, можно использовать как абсолютные значения в пикселях, так и процентные, отображающие долю от ширины окна браузера, занимаемую таблицей.