Онлайн учебник по HTML и JAVASCRIPT

Элементы языков HTML и JAVASCRIPT

Объединенние ячеек HTML таблицы

Несколько ячеек могут быть объединены в одну как по горизонтали, так и по вертикали. Объединение по столбцам применяют тогда, когда надо, чтобы соседние столбцы имели общий заголовок. Объединение по строкам делается в том случае, когда содержимое нескольких ячеек подряд одинаково. Для объединения ячеек используются теги COLSPAN и ROWSPAN (по столбцам и по строкам соответственно). Аргументами этих атрибутов являются количества объединяемых столбцов или строк.

Вот пример объединения ячеек:

<HTML>
<НЕАD> <ТITLE>Таблицы</ТIТLЕ> </НЕАD> <BODY>
<Н2>Основные элементы таблиц</Н2>
<P>
Ниже приведен пример простой таблицы с объединенными ячейками
<P>
<TABLE BORDER>
<CAPTION ALIGN=ТОР>Список сотрудников</CAPTION>
<TR> <TH COLSPAN=2>Имя и должность</TH> <ТН>Оклад</ТН>
</TR>
<TR> <TD>Иван</TD><TD>Директор</TD> <TD>1000</TD>
</TR>
<ТР> <ТD>Петр</ТD> <ТD>Бухгалтер</ТD> <ТD>800</ТD>
</TR>
<ТК> <ТD>Федор</ТD> <ТD ROWSPAN=2>Pa6oчий</TD> <TD>50</TD>
</TR>
<TR><TD>Bacилий</TD><TD>70</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Рис. 660. Пример объединения ячеек

Как шириной всей таблицы, так и шириной каждой отдельной ячейки можно управлять. Ширину всей таблицы можно задать как в пикселах, так и в процентах от ширины окна. Ширину ячеек можно задать также двумя способами: в пикселах и в процентах от ширины таблицы. Следует иметь в виду, что ячейки в одном столбце имеют одинаковую ширину, а ячейки одной строки — разную ширину. Ширина таблицы задается атрибутом WIDTH в теге <TABLE>, ширина ячейки указывается тем же атрибутом в теге <ТН> или <TD>.

<HTML>
<НЕАD> <ТITLE>Таблицы</ТITLE> </НЕАD>
<BODY>
<Н2>Основные элементы таблиц</Н2>
<Р>
Ниже приведен пример таблицы с объединенными ячейками и заданными
размерами
<Р>
<TABLE BORDER WIDTH=400>
<CAPTION ALIGN=TOP>CnncoK сотрудников</САРТIОN>
<TR>
<TH COLSPAN=2 WIDTH=75%>Имя и должность</ТН> <ТН>Оклад</ТН>
</TR>
<TR>
<ТD>Иван</ТD><ТD>Директор</ТD><ТD>1000</ТD>
</TR>
<TR>
<ТD>Петр</ТD><ТD>Бухгалтер</ТD><ТD>800</ТD>
</TR>
<TR>
<ТD>Федор</ТD><ТD ROWSPAN=2>Pa6o4MM</TDXTD>50</TD>
</TR>
<TR>
<ТD>Василий</ТD><ТD>70</ТD>
</TR>
</TABLE>
</BODY>
</HTML>

Объединенние ячеек HTML таблицы

Рис. 661. Пример таблицы с заданной шириной ячеек

Текст и графику внутри ячеек таблиц можно выравнивать. Горизонтальное и вертикальное выравнивание содержимого рядов задается с помощью атрибута ALIGN в теге <TR>. Выравнивание в отдельных ячейках выполняет атрибут ALIGN в тегах <ТН> и <TD>. Атрибут ALIGN может принимать аргументы LEFT (по левому краю), RIGHT (по правому краю) и CENTER (по центру).

Примеры использования атрибута ALIGN:

<TR ALIGN=LEFT>
<TH WIDTH=25% ALIGN=CENTER>Имя и должность</TH>

Для определения дизайна рамок таблицы в браузере Internet Explorer можно использовать атрибут FRAME тэга <TABLE>. Ниже перечислены возможные аргументы атрибута FRAME, указывающие способы изображения рамки:

BOX — все четыре стороны рамки;
ABOVE — только верхняя часть рамки;
BELOW —только нижняя часть рамки;
HSIDES — горизонтальные части рамки сверху и снизу;
VSIDES — только левая и правая вертикальные части рамки;
LHS — только левая часть рамки;
RHS — только правая часть рамки;
VOID — не изображать внешнюю рамку.