Методические указания
1. Таблицы
Создание таблиц в HTML – тег <ТАВLЕ>…</ТАВLЕ>.
Создание строки таблицы — тег <ТR>…</TR> Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами <ТR></ТR>.
Определение ячеек таблицы - тег <ТD>…</TD> Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD></ТD>. Число тегов <ТD></ТD> в строке определяет число ячеек
<TABLE>
<TR>
<TD COLSPAN=3>Если в таблице два тега TR, то в ней две строки.</TD>
</TR>
<TR>
<TD>Если в строке три тега TD,</TD>
<TD>то в ней</TD>
<TD>три столбца.</TD>
</TR>
</TABLE>
Заголовки столбцов таблицы — тег <ТН>
Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН></ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD></ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН></ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD></ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.
Использование заголовков таблицы — тег <САРТIОN>
Тег <CAPTION> позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=top>), либо под таблицей (<САРТION ALIGN=bottom>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда тег <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.
Таблица 1. Описание тегов организации таблицы
Функция |
Тег |
Атрибут |
Значение |
Организация таблицы |
<table>… </table> |
Align |
Выравнивание таблицы по горизонтали. Обычно таблица отображается на левом краю страницы. ALIGN = LEFT‑ выравнивание таблицы по левому краю. ALIGN = RIGHT‑ выравнивание таблицы по правому краю. ALIGN = CENTER‑ выравнивание таблицы по центру. |
Bgcolor |
Задает цвет фона таблицы. Фон таблицы соответствует фону всего HTML-документа. |
||
Border |
Задает толщину границ ячеек таблицы. Значение n определяет ширину рамки таблицы в пикселях <TABLEBORDER=1>. При отсутствии атрибута BORDER или равному нулю, рамка у таблицы не отображается, но пустое место для нее будет отведено. |
||
Bordercolor |
Задает цвет границ таблицы и ее ячеек <TABLEBORDERCOLOR=ЦВЕТ>. |
||
Width |
Задает ширину таблицы в процентах от ширины окна браузера или в пикселях (100% - полная ширина окна) <TABLE WIDTH=50%>или<TABLE WIDTH=200>. |
||
Height |
Задает высоту таблицы в пикселях или в процентах от высоты окна браузера. |
||
Организация строки таблицы |
<tr>...</tr> |
Align |
Задает выравнивание всех элементов строки. Каждая ячейка имеет собственное выравнивание. Оно подавляет выравнивание, заданное Align‑ атрибутом строки. ALIGN=LEFT- выравнивание по левому краю. ALIGN=CENTER- выравнивание по центру. ALIGN=RIGHT– выравнивание по правому краю. |
Bgcolor |
Задает для каждой строки собственный фоновый цвет |
||
Bordercolor |
Задает цвет рамки для строки |
||
Valign |
Задает выравнивание по вертикали для содержимого элементов строки таблицы. По умолчанию элементы центрируются по вертикали. VALIGN=TOP‑выравнивание верхнему краю. VALIGN=CENTER‑ центрирует по вертикали. VALIGN=BOTTOM‑ выравнивание по нижнему краю. VALIGN=BASELINE‑ выравнивание по самой верхней текстовой строке. |
||
Организация ячейки таблицы |
<th></th> |
|
Ячейка заголовка (содержимое горизонтально центрируется и выделяется полужирным шрифтом) |
<td>..</td> |
|
Ячейка данных |
|
|
Align |
Выравнивание данных в ячейке по горизонтали. ALIGN=LEFT–выравнивание по левому краю. ALIGN=CENTER‑ выравнивание по центру. ALIGN=RIGHT‑ выравнивание по правому краю. |
|
Bgcolor |
Цвет фона ячейки |
||
Bordercolor |
Цвет рамки ячейки |
||
Colspan |
Ширина ячейки, выраженную в столбцах. COLSPAN=N, где N определяет, сколько табличных столбцов займет данная ячейка в пределах строки. |
||
Rowspan |
Высота ячейки, выраженную в строках. ROWSPAN=N определяет, сколько табличных строк займет данная ячейка. |
||
Nowrap |
Выключает разрыв строки. Содержимое ячейки таблицы форматируется как текст в окне, то есть в нужных местах вставляются разрывы строк <br> и <p>. Задание атрибута NOWRAP отменяет верстку строк и отображает все содержимое ячейки в одну строку. |
||
Valign |
Выравнивание данных в ячейке по вертикали VALIGN=TOP – выравнивание по верхнему краю VALIGN=BOTTOM – выравнивание по нижнему краю VALIGN=CENTER – выравнивание по центру VALIGN=BASELINE – по самой верхней текстовой строке всех находящихся в данной строке данных. |
||
Width |
Ширина ячейки таблицы в пикселях или в процентах от ширины таблицы. Если же ячейка в действительности шире (то есть ее содержимое требует для размещения больше места, чем задано этим атрибутом), WIDTH игнорируется. |
||
|
|
Height |
Задание высоты ячейки в пикселях. |
Организация заголовка таблицы |
<caption>… </caption> |
Align |
Выравнивание названия по горизонтали относительно ширины таблицы. ALIGN=LEFT– по левому краю таблицы. ALIGN=CENTER‑ по центру таблицы. ALIGN=RIGHT‑ по правому краю таблицы. |
Valign |
VALIGN=TOP – название размещается над таблицей. VALIGN= BOTTOM – название размещается под таблицей. |