|
|
|
Онлайн учебники на TEPKA.ru Учебник по HTML 4
Форматирование данных внутри HTML таблицыКаждую отдельную ячейку внутри HTML таблицы можно рассматривать как область для независимого форматирования. Все правила, которые действуют для управления отображением текста, могут быть использованы для форматирования текста внутри ячейки. Внутри ячейки допустимо использование практически всех элементов HTML, которые могут появляться внутри тела документа <BODY>, в том числе теги, управляющие расположением текста — <P>, <BR>, <HR>, коды заголовков — от <H1> до <H6>, теги форматирования символов — <В>, <I>, <STRONG>, <BIG>, <EM>, <FONT SIZE>, <FONT COLOR>, теги вставки графических изображений <IMG>, гипертекстовых ссылок <А> и т. д. Сразу же подчеркнем, что область действия HTML тегов, заданных внутри отдельной ячейки, ограничивается пределами этой ячейки независимо от наличия завершающего тега. Например, если внутри ячейки определен цвет текста — <FONT COLOR=RED>, то даже при отсутствии завершающего кода </FONT> или расположения его через несколько ячеек или строк таблицы, текст следующей ячейки будет отражен цветом по умолчанию. Для форматирования данных внутри ячеек HTML таблицы предусмотрены следующие параметры. Параметры выравнивания содержимого ячеек — ALIGN и VALIGN. Могут применяться в тегах <TR>, <TD> и <TH>. Параметр горизонтального выравнивания ALIGN может принимать значения LEFT, RIGHT и CENTER (по умолчанию LEFT для <TD> и CENTER для <TH>). Параметр вертикального выравнивания VALIGN может принимать значения ТОР (по верхнему краю), BOTTOM (по нижнему краю), MIDDLE (посередине), BASELINE (по базовой линии). По умолчанию — MIDDLE. Выравнивание по базовой линии обеспечивает привязку текста отдельной строки во всех ячейках к единой линии. Задание параметров выравнивания на уровне кода <TR> определяет выравнивание для всех ячеек данной строки, при этом в каждой отдельной ячейки строки может быть определены свои параметры, переопределяющие действие параметров, заданных в <TR>. Приведем пример HTML таблицы, в которой данные в ячейках первого столбца выровнены вправо, второго столбца — по центру, а третьего — влево (значение по умолчанию): <HTML> <HEAD> <TITLE>Выравнивание элементов таблицы</TITLE> </HEAD> <BODY> <TABLE BORDER WIDTH=100%> <TR> <TD ALIGN=RIGHT>Ячейка 1</TD> <TD ALIGN=CENTER>Ячeйкa 2</TD> <TD>Ячейка 3</TD> </TR> <TR> <TD ALIGN=RIGHT>Ячeйкa 4</TD> <TD ALIGN=CENTER>Ячейка 5</TD> <TD>Ячейка 6</TD> </TR> </TABLE> </BODY> </HTML> Отображение этого примера браузером показано на рис. 4.11.
Рис. 4.11. Выравнивание данных в ячейках HTML таблицы Параметр NOWRAP отключает возможность автоматического разбиения текста ячейки на строки. Может применяться в тегах <TR>, <TD> и <TH>. Следует избегать неоправданного применения этого параметра, так как это может значительно сократить возможности динамического изменения размеров таблиц и ухудшить их восприятие. В большинстве случаев достаточно применить NOWRAP для отдельных ячеек, действительно требующих запрещения переноса слов на новую строчку. Перенос слов осуществляется только по разделителям между словами (пробелам), и в ряде случаев для запрещения разрыва текста в отдельных местах следует вместо символа пробела задавать код неразрывного пробела (NonBreaking Space). В качестве примеров можно привести случаи, где разрыв не рекомендуется — между числовым значением и единицами измерения данной величины; между фамилией и инициалами. Так, текст 650 км или Ельцин Б.Н. рекомендуется записывать в виде 650 км и Ельцин Б.Н. Параметры WIDTH и HEIGHT могут применяться в тегах <TD> и <TH>. Их синтаксис аналогичен синтаксису этих параметров для тега <TABLE>. Их значение определяет ширину или высоту ячейки, для которой записаны данные параметры. Значения могут задаваться в пикселах или в процентах от размеров всей таблицы. Microsoft Internet Explorer разрешает задавать значение WIDTH только в пикселах. Поскольку таблица представляет собой связную структуру, состоящую из строк и колонок, то задание ширины для какой-либо ячейки влияет на ширину всей колонки, в которой расположена ячейка, а задание высоты влияет на всю строчку. Если в колонке значение ширины указано лишь в одной ячейке, то данное значение становится шириной всей колонки. Если таких указаний несколько, то выбирается максимальное значение. Те же свойства характерны и для строк. Для сложных HTML таблиц характерна потребность в объединении нескольких смежных ячеек по горизонтали или по вертикали в одну. Данная возможность реализуется с помощью параметров COLSPAN (COLiimn SPANning) и ROWSPAN (ROW SPANning), задаваемых в тегах <TD> или <TH>. Форма записи: COLSPAN=num, где num — числовое значение, определяющее, на сколько столбцов следует расширить текущую ячейку по горизонтали. Применение параметра ROWSPAN аналогично, только здесь указывается количество строк, которые должна захватить текущая ячейка по вертикали. По умолчанию для этих параметров устанавливается значение, равное единице. Допустимо одновременное задание значений обоих параметров для одной ячейки. Правильная установка значений этих параметров может оказаться не очень простой задачей, тем более, что большинство HTML-редакторов позволяют визуально конструировать с последующей генерацией HTML-тегов лишь простейшие таблицы. На рис. 4.12 показан пример отображения HTML таблицы, полученный по следующему HTML-коду: <HTML> <HEAD> <TITLE>Использование параметров COLSPAN и ROWSPAN</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TD ROWSPAN=2>Ячейка, захватывающая две строки</TD> <TD COLSPAN=2>Ячейка, захватывающая два столбца</TD> </TR> <TR> <TD>Ячейка 3</TD> <TD>Ячейка 4</TD> </TR> <TR> <TD>Ячейка 5</TD> <TD>Ячейка 6</TD> <TD>Ячейка 7</TD> </TR> </TABLE> </BODY> </HTML>
Рис. 4.12. Таблица с ячейками, распространяющимися на несколько строк или столбцов Невнимательное задание значений параметров раздвижки ячеек может привести к их взаимному перекрытию и конфликтам, при которых результат непредсказуем. Характерное применение протяженных ячеек — общий заголовок для нескольких смежных колонок или строк. Приведем пример кода HTML (отображение которого показано на рис. 4.13), в котором протяженные ячейки сформированы некорректно. <HTML> <HEAD> <TITLE>Неверное использование протяженных ячеек</TITLE> </HEAD> <BODY> <TABLE BORDER WIDTH=100%> <TR ALIGN=CENTER> <TD>Ячейка 1</TD> <TD>Ячейка 2</TD> <TD ROWSPAN=3> Ячейка 3<BR>(распространенная<BR>Ha три<BR>строчки) </TD> </TR> <TR ALIGN=CENTER><TD>Ячeйкa 4</TD><TD>Ячейка 5</TD></TR> <TR ALIGN=CENTER> <TD>Ячейка 6</TD> <TD COLSPAN=2>Ячейка 7 (распространенная на два столбца)</TD> </TR> </TABLE> </BODY> </HTML>
Рис. 4.13. Результат некорректного определения протяженных ячеек (наложение текста) Параметр BGCOLOR задает цвет подложки всей HTML таблицы, отдельных строк или ячеек. Может встречаться в тегах <TABLE>, <TR>, <TD> и <TH>. Эта возможность не предусматривается спецификацией HTML, однако поддерживается как Netscape, так и Microsoft Internet Explorer. Форма записи такая же, как и для тега <BODY>, а именно: BGCOLOR=значение, где в качестве значения задается содержание цвета в RGB-формате или его название. Пример: <TD BGCOLOR=#FF0000> или <TD BGCOLOR=red>.
|
|
|