Шаг 39.
Форматирование данных внутри таблицы

    С этого шага мы начнем рассматривать тэги, которые изменяют внешний вид отдельных ячеек.

    Область действия тэгов, заданных внутри отдельной ячейки, ограничивается пределами этой ячейки.

    Внутри ячейки допустимо использование практически всех элементов НТМL, которые могут появляться внутри тэга <BODY>, в том числе тэги:

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


Задание 1. Вспомните, какие тэги используются для определения всей таблицы и описания конкретных ячеек?
Напомнить этот материал вам поможет 33 шаг.

    Приступим к детальному изучению параметров.

    1. Параметры выравнивания содержимого ячеек (ALIGN и VALIGN) позволяют определить местоположение информации в ячейке. Могут применяться в тэгах <TR>, <TD>, <TH> и принимают следующие значения:


    Замечание. Задание параметра выравнивания в тэге <TR> позволяет задать выравнивание для всех ячеек данной строки, но в каждой отдельной ячейке могут быть определены свои параметры. В этом случае они отменяют действия параметров, заданных в тэге <TR>.

    Приведем пример, при просмотре которого в браузере, будет выведена таблица, в которой данные в ячейках первого столбца выровнены вправо, второго столбца — по центру, а третьего — влево (значение по умолчанию):


<HTML>
<HEAD>
<TITLE>Выравнивание элементов таблицы.</TITLE>
</HEAD>
<BODY> 
<TABLE BORDER WIDTH=100%>
<TR>
<TD ALIGN=RIGHT>Ячейка 1 </TD>
<TD ALIGN=CENTER>Ячейка 2</TD>
<TD>Ячейка 3</TD>
</TR>
<TR>
<TD ALIGN= RIGHT>Ячейка 4</TD>
<TD ALIGN= CENTER>Ячейка 5</TD>
<TD>Ячейка 6</TD>
</TR>
</TABLE>
</BODY>
</HTML>


Задание 2. Создайте HTML-документ, содержащий приведенный текст, и посмотрите, как он будет выглядеть в браузере.

    Решение и комментарии вы можете посмотреть здесь.


    Замечание. Внутри ячейки перенос слов осуществляется только по пробелам. Иногда бывает необходимо запретить разрыв текста в отдельных местах, например: между числовым значением и единицами измерения данной величины; между фамилией и инициалами и т.п. В этом случае можно использовать неразрывный пробел &nbsp;. Тогда текст 25 м или Петров А.А. можно записать следующим образом: 25&nbsp;м или Петров&nbsp;А.А. Такие конструкции считаются браузером неделимыми!

    2. Параметры WIDTH и HEIGHT могут применяться в тэгах <TD> и <TH> и определяют ширину и высоту ячейки.


Задание 3. Вспомните, как задаются значения этих параметров.
Ответ на этот вопрос можно найти в шаге 36.

Задание 4. Дополните последний пример параметрами задания ширины и высоты ячейки и поэкспериментируйте с ними.

    Решение и комментарии вы можете посмотреть здесь.

    3. Параметры COLSPAN и ROWSPAN. При создании таблиц часто возникает необходимость объединения ячеек по горизонтали или по вертикали. Такая возможность поддерживается в HTML и реализуется с помощью параметров COLSPAN (СОLumn SPANning – объединение колонок) и ROWSPAN (ROW SPANning – объединение строк), которые помещаются в тэги <TD>, <TH>. Форма записи:


COLSPAN=число, 

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

    По умолчанию для этих параметров устанавливается значение, равное единице.

    Допустимо одновременное задание значений обоих параметров для одной ячейки.

    Правильная установка значений этих параметров может оказаться не очень простой задачей, а их ошибочное использование приводит обычно к непредсказуемым результатам.

    Приведем пример использования параметров COLSPAN и ROWSPAN.


<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>


Задание 5. Создайте HTML-документ, содержащий приведенный текст, и посмотрите, как он будет выглядеть в браузере.

    Решение и комментарии вы можете посмотреть здесь.

    Создание такой таблицы можно начать с чертежа, на котором отметить объединяемые ячейки таблицы:

    После этого достаточно просто правильно построить таблицу, в которой объединены несколько ячеек.


    Замечание.

    4. Параметр BGCOLOR. Он задает цвет фона всей таблицы (тэг <TABLE>), отдельных строк (тэг <TR>) или ячеек (тэги <TD>, <TH>). Форма записи такая же, как и для тэга <BODY>:


BGCOLOR=значение,

где в качестве значения задается цвет в RGB-формате или указанием его названия.

    На следующем шаге мы познакомимся с дополнительными возможностями построения и оформления таблиц.




Предыдущий шаг Содержание Следующий шаг