С этого шага мы начнем рассматривать тэги, которые изменяют внешний вид отдельных ячеек.
Область действия тэгов, заданных внутри отдельной ячейки, ограничивается пределами этой ячейки.
Внутри ячейки допустимо использование практически всех элементов НТМL, которые могут появляться внутри тэга <BODY>, в том числе тэги:
- управляющие расположением текста (<P>, <BR>, <HR>);
- заголовков (от <H1> до <H6>);
- логического и физического форматиро-вания (<B>, <I>, <BIG> и т.д.);
- вставки графических изображений (<IMG>);
- гипертекстовых ссылок (<A>).
Помимо указанных тэгов при описании ячейки можно задавать параметры, влияющие на местоположение информации в конкретной ячейке.
Задание 1. Вспомните, какие тэги используются для определения всей таблицы и описания
конкретных ячеек?Напомнить этот материал вам поможет 33 шаг.
Приступим к детальному изучению параметров.
1. Параметры выравнивания содержимого ячеек (ALIGN и VALIGN) позволяют определить местоположение информации в ячейке. Могут применяться в тэгах <TR>, <TD>, <TH> и принимают следующие значения:
- параметр горизонтального выравнивания ALIGN:
- LEFT - по левому краю;
- RIGHT - по правому краю;
- CENTER - по центру ячейки.
- параметр вертикального выравнивания VALIGN:
- TOP - по верхнему краю;
- BOTTOM - по нижнему краю;
- MIDDLE – посередине;
- BASELINE - по базовой линии. Выравнивание по базовой линии обеспечивает привязку текста во всех ячейках строки к единой линии.
Замечание. Задание параметра выравнивания в тэге <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-документ, содержащий приведенный текст, и посмотрите,
как он будет выглядеть в браузере.
Решение и комментарии вы можете посмотреть здесь.
Замечание. Внутри ячейки перенос слов осуществляется только по пробелам. Иногда бывает необходимо запретить разрыв текста в отдельных местах, например: между числовым значением и единицами измерения данной величины; между фамилией и инициалами и т.п. В этом случае можно использовать неразрывный пробел . Тогда текст 25 м или Петров А.А. можно записать следующим образом: 25 м или Петров А.А. Такие конструкции считаются браузером неделимыми!
2. Параметры WIDTH и HEIGHT могут применяться в тэгах <TD> и <TH> и определяют ширину и высоту ячейки.
Задание 3. Вспомните, как задаются значения этих параметров.Ответ на этот вопрос можно найти в шаге 36.
- Значения этих параметров могут указываться только в пикселях!
- Задание ширины для какой-либо ячейки влияет на ширину всей колонки, в которой
расположена ячейка, а задание высоты - на всю строку. Если в колонке значение ширины
указано:
- лишь в одной ячейке, то данное значение становится шириной всей колонки;
- в нескольких или всех ячейках, то выбирается максимальное значение.
Задание 4. Дополните последний пример параметрами задания ширины и высоты ячейки
и поэкспериментируйте с ними.
Решение и комментарии вы можете посмотреть здесь.
3. Параметры COLSPAN и ROWSPAN. При создании таблиц часто возникает необходимость объединения ячеек по горизонтали или по вертикали. Такая возможность поддерживается в HTML и реализуется с помощью параметров COLSPAN (СОLumn SPANning – объединение колонок) и ROWSPAN (ROW SPANning – объединение строк), которые помещаются в тэги <TD>, <TH>. Форма записи:
COLSPAN=число,
По умолчанию для этих параметров устанавливается значение, равное единице.
Допустимо одновременное задание значений обоих параметров для одной ячейки.
Правильная установка значений этих параметров может оказаться не очень простой задачей, а их ошибочное использование приводит обычно к непредсказуемым результатам.
Приведем пример использования параметров 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-документ, содержащий приведенный текст, и посмотрите,
как он будет выглядеть в браузере.
Решение и комментарии вы можете посмотреть здесь.
Создание такой таблицы можно начать с чертежа, на котором отметить объединяемые ячейки таблицы:
После этого достаточно просто правильно построить таблицу, в которой объединены несколько ячеек.
-
Для нашего случая первая строка будет содержать две ячейки:
- <TD ROWSPAN=2>Ячейка, захватывающая две строки</TD>
- <TD COLSPAN=2>Ячейка, захватывающая два столбца</TD>
. При построении второй строки нужно учесть, что первая ячейка уже создана, поэтому осуществляется построение только второй и третьей: - <TD>Ячейка 5</TD>
- <TD>Ячейка 6</TD>
Ячейки третьей строки создаются традиционно: - <TD>Ячейка 5</TD>
- <TD>Ячейка 6</TD>
- <TD>Ячейка 7</TD>
Замечание.
- Невнимательное задание значений параметров раздвижки ячеек может привести к непредсказуемым результатам.
- Чаще всего такие “длинные” ячейки используются для создания общего заголовка для нескольких смежных колонок или строк.
4. Параметр BGCOLOR. Он задает цвет фона всей таблицы (тэг <TABLE>), отдельных строк (тэг <TR>) или ячеек (тэги <TD>, <TH>). Форма записи такая же, как и для тэга <BODY>:
BGCOLOR=значение,
На следующем шаге мы познакомимся с дополнительными возможностями построения и оформления таблиц.
