2.7 Выравнивание текста в ячейках таблицы
С помощью параметров ALIGN и VALIGN можно выполнять выравнивание текста, расположенного в ячейках таблицы. Ниже приведен исходный текст документа HTML, содержащего достаточно сложную таблицу с многослойными заголовками, расположенными как сверху, так и слева от таблицы. В операторах, определяющих ячейки таблицы, мы использовали различные комбинации параметров выравнивания.
<HTML>
<HEAD>
<TITLE>Выравнивание в таблицах</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<TABLE BORDER>
<TR>
<TD>
<TH ROWSPAN=2></TH>
<TH COLSPAN=3>Тип выравнивания</TH>
</TD>
</TR>
<TR>
<TD>
<TH>По левому краю</TH>
<TH>Центрирование</TH>
<TH>По правому краю</TH>
</TD>
</TR>
<TR>
<TH ROWSPAN=2>Направление</TH>
<TH>По вертикали</TH>
<TD>Этот текст выровнен по левому краю</TD>
<TD ALIGN=CENTER>Этот текст отцентрирован</TD>
<TD ALIGN=RIGHT>Этот текст выровнен по правому краю</TD>
</TR>
<TR>
<TH>По горизонтали</TH>
<TD VALIGN=TOP>Вверху</TD>
<TD ALIGN=CENTER>Посередине</TD>
<TD VALIGN=BOTTOM ALIGN=RIGHT>Внизу</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Внешний вид таблицы показан на рисунке:
Различные способы выравнивания текста в ячейках таблицы
2.8 Таблицы внутри таблиц
Таблицы могут содержать в своих ячейках многие объекты, допустимые в документах HTML. В частности, вы можете разместить внутри ячейки таблицы другую таблицу, создав таким образом вложенные таблицы.
Ниже приводится исходный текст документа HTML, в котором создается такая вложенная таблица.
<HTML>
<HEAD>
<TITLE>Вложенные таблицы</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<TABLE BORDER>
<TR>
<TD>
<TABLE BORDER>
<TR><TD>01</TD><TD>02</TD></TR>
<TR><TD>11</TD><TD>12</TD></TR>
</TABLE>
</TD>
<TD>001</TD>
<TD>002</TD>
</TR>
<TR><TD>100</TD><TD>101</TD><TD>102</TD></TR>
<TR><TD>200</TD><TD>201</TD><TD>202</TD></TR>
</TABLE>
</BODY>
</HTML>
Внешний вид таблицы, содержащей в левой верхней ячейке другую таблицу:
Вложенная таблица
3. Порядок выполнения работы
1. Изучить вопросы создания HTML документов с использованием таблиц.
2. Создать документ (документы), листинги которых приведены в методических указаниях.
3. Создать документ с простой таблицей, вид которой задан преподавателем.
4. Создать документ с таблицами с заголовками, вид которых задан преподавателем.
5. Создать документ с таблицами с объединенными ячейками (вид таблицы задается преподавателем).
6. Создать документ с таблицей, использующей различные способы выравнивания текста.
ПРИЛОЖЕНИЕ А – Параметры оператора <TABLE>
Для оператора <TABLE>, которым отмечается начало таблицы, вы можете указать многочисленные параметры, определяющие внешний вид таблицы в целом. Ниже мы привели наиболее важные из них:
Параметр |
Описание |
ALIGN |
Этот параметр определяет выравнивание таблицы. Допустимо указывать следующие значения: LEFT - таблица выравнивается по левому краю окна просмотра; CENTER - центрирование таблицы; RIGHT - выравнивание по правому краю; JUSTIFY - выравнивание по левому и правому краю |
BACKGROUND |
Растровое графическое изображение, которое используется в качестве фона для отображения содержимого таблицы. |
BGCOLOR |
Цвет фона для таблицы |
BORDER |
Установка толщины рамки в пикселах |
BORDERCOLOR |
Установка цвета рамки. Этот параметр используется вместе с параметром BORDER |
BORDERCOLORDARK |
Темный цвет, который используется для трехмерного выделения рамки |
BORDERCOLORLIGHT |
Светлый цвет, который используется для трехмерного выделения рамки |
CELLPADDING |
Расстояние между краями ячейки таблицы и содержимым этой ячейки |
CELLSPACING |
Расстояние между рамкой таблицы и ячейками этой таблицы |
CLEAR |
Форматирование текста, расположенного в документе HTML после таблицы NO - текст размещается сразу после таблицы; LEFT - текст размещается на первой строке после таблицы. Эта строка выравнивается по левой границе RIGHT - текст размещается на первой строке после таблицы. Эта строка выравнивается по правой границе |
COLS |
Количество столбцов в таблице |
FRAME |
Этот параметр определяет внешний вид рамки, расположенной вокруг таблицы. Возможны следующие значения: BORDER - рамка отображается со всех сторон таблицы (используется по умолчанию); VOID - рамка вокруг таблицы (внешняя) не отображается; ABOVE - отображается верхняя рамка BELOW - отображается нижняя рамка HSIDES - отображается верхняя и нижняя рамка LHS - отображается левая рамка RHS - отображается правая рамка VSIDES - рамка отображается с левой и правой стороны таблицы BOX - рамка отображается только с внешней стороны таблицы |
NOWRAP |
Если строки таблицы не помещаются по горизонтали в окне просмотра навигатора, они не переносятся на следующую строку, то есть не сворачиваются |
RULES |
Параметр определяет внешний вид линий, которыми разделяются между собой ячейки таблицы. Он может принимать следующие значения: NONE - разделительные линии между ячейками таблицы не отображаются; GROUPS - отображаются горизонтальные разделитель-ные линии между всеми группами таблиц, опреде-ленными операторами THEAD, TBODY, TFOOT и COLGROUP ; ROWS - отображаются горизонтальные разделительные линии между всеми строками таблицы; COLS - отображаются вертикальные разделительные линии между столбцами таблицы; ALL - отображаются разделительные линии между всеми столбцами и строками таблицы |
VALIGN |
Параметр определяет выравнивание таблицы по вертикали. Допустимы следующие значения; TOP - выравнивание по верхней границе; MIDDLE - выравнивание по середине окна; BOTTOM - выравнивание по нижней границе; BASELINE - выравнивание по базовой линии текста |
WIDTH |
Ширина таблицы в пикселах или в процентах от ширины окна просмотра навигатора |
ПРИЛОЖЕНИЕ Б - Параметры оператора <TR>
Оператор <TR> предназначен для создания строк таблицы. Для него вы можете указать ряд параметров, определяющих внешний вид строки:
Параметр |
Описание |
ALIGN |
Этот параметр определяет выравнивание текста в ячейках таблицы. Допустимо указывать следующие значения: LEFT - текст выравнивается по левому краю; CENTER - центрирование (используется по умолчанию); RIGHT - выравнивание по правому краю; JUSTIFY - выравнивание по левому и правому краю |
BORDERCOLOR |
Установка цвета рамки. Этот параметр используется вместе с параметром BORDER оператора <TABLE> |
BORDERCOLORDARK |
Темный цвет, который используется для трехмерного выделения рамки строки |
BORDERCOLORLIGHT |
Светлый цвет, который используется для трехмерного выделения рамки строки |
NOWRAP |
Если текст в строке не помещаются по горизонтали в окне просмотра навигатора, он не переносятся на следующую строку, то есть не сворачиваются |
VALIGN |
Параметр определяет выравнивание текста в строке по вертикали. Допустимы следующие значения; TOP - выравнивание по верхней границе ячейки; MIDDLE - выравнивание по центру ячейки; BOTTOM - выравнивание по нижней границе ячейки; BASELINE - выравнивание по базовой линии текста |
ПРИЛОЖЕНИЕ В - Параметры оператора <TD>
При помощи оператора <TD> определяются ячейки таблицы. Для него вы можете указать следующие значения:
Параметр |
Описание |
ALIGN |
Этот параметр определяет выравнивание текста в ячейках таблицы. Допустимо указывать следующие значения: LEFT - текст выравнивается по левому краю; CENTER - центрирование (используется по умолча-нию); RIGHT - выравнивание по правому краю; JUSTIFY - выравнивание по левому и правому краю |
BORDERCOLOR |
Установка цвета рамки. Этот параметр используется вместе с параметром BORDER оператора <TABLE> |
BACKGROUND |
Растровое графическое изображение, которое используется в качестве фона для отображения содержимого ячейки |
BGCOLOR |
Цвет фона для ячейки |
BORDERCOLORDARK |
Темный цвет, который используется для трехмерного выделения рамки вокруг ячейки |
BORDERCOLORLIGHT |
Светлый цвет, который используется для трехмерного выделения рамки вокруг ячейки |
COLSPAN |
С помощью этого параметра можно указать, что элемент занимает несколько соседних ячеек, расположенных справа или слева в той же колонке. Значение параметра определяет количество объединяемых ячеек |
HEIGHT |
Высота ячейки в пикселах |
NOWRAP |
Если текст в ячейке не помещаются по горизонтали в окне просмотра навигатора, он не переносятся на следующую строку, то есть не сворачиваются |
ROWSPAN |
Аналогично COLSPAN, но для строк таблицы |
VALIGN |
Параметр определяет выравнивание текста в ячейке по вертикали. Допустимы следующие значения; TOP - выравнивание по верхней границе ячейки; MIDDLE - выравнивание по центру ячейки; BOTTOM - выравнивание по нижней границе ячейки; BASELINE - выравнивание по базовой линии текста |
WIDTH |
Ширина ячейки в пикселях |
Между операторами <TD> и </TD> вы можете разместить текстовую строку или любой другой объект, например, ссылку на графическое изображение.
Для того чтобы создать пустую ячейку с рамкой, запишите в нее хотя бы символ неразрывного пробела:
<TD> </TD>