Таблицы
Таблица в HTML представляет собой прямоугольную сетку, состоящую из столбцов и строк, которые являются составными ячейки.
Ячейки могут содержать текст, графику, ссылки. Сама таблица состоит из трех основных частей: названия, заголовков и ячеек. Независимо от того, пуста ячейка или нет, она должна быть заполнена. Для создания пустых ячеек используют пробелы.
Несколько ячеек также могут быть объеденены в одну. Для этого используют следующие атрибуты:
- COLSPAN= - объединение по вертикали
- ROWSPAN= - объединение по горизонтали
Для управления шириной и высотой таблицы или ячейки используют атрибуты:
- WIDTH= - высота таблицы (ячейки)
- HEIGHT= - ширина таблицы (ячейки)
Длина и ширина указываются либо в пикселах либо в процентах. Если отображение производится в процентах, то цифра берется в кавычки.
Язык HTML позволяет выравнивать содержимое таблицы по вертикали атрибутом VALIGN= , по горизонтали атрибутом ALIGN= . Для этого при выравнивании по вертикали задаются следующие атрибуты:
- TOP - выравнивание по верху ячейки
- BOTTOM - выравнивание по низу ячейки
- MIDDLE - выравнивание по центру ячейки
По горизонтали:
- LEFT - выравнивание по левому краю ячейки
- RIGHT - выравнивание по правому краю ячейки
- CENTER - выравнивание по центру ячейки
Средствами HTML можно запретить автоматический переход текста на новую строку. Для этого используют атрибут <NOWRAP> внутри тега <TD>.
Внешний вид таблицы можно "приукрасить" с помощью атрибутов:
- BORDER= - задается толщина таблицы
- CELLSPACING= - задается толщина линий сетки между ячейками таблицы
- CELLPADDING= - задается величина пустых полей между содержимым ячейки и ее границами
Существует много атрибутов, предназначенных для оформления рамки таблицы. В теге <TABLE> указывается атрибут FRAME= , к которому присваиваются следующие значения:
- BOX - отображение всех четырех сторон рамки
- ABOVE - отображение верхней части рамки
- BELLOW - отображение нижней части рамки
- HSIDES - отображение горизонтальной части рамки
- VSIDES - отображение вертикальной части рамки
- LHS - отображение левой части рамки
- RHS - отображение правой части рамки
- VOID - не отображать внешнюю рамку
Разделительная линия описывается атрибутом RULES= в теге <TABLE>. Ниже приводятся следующие аргументы:
- ALL - отображение всех линий
- ROWS - отображение горизонтальных линий между рядами
- COLS - отображение вертикальных линий между столбцами
- NONE - не отображать разделительные линии
Если необходимо выделить таблицу другим цветом, то применяется атрибут BGCOLOR="# " внутри тега <TABLE>. Цвет подбирается по шкале RGB.
Приведем примеры двух таблиц.
1. <HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1" WIDTH=300 HEIGHT=100>
<TR>
<TD><CENTER>ЯЧЕЙКА №1</CENTER>
</TD>
<TD><CENTER>ЯЧЕЙКА №2</CENTER>
</TD>
</TR>
<TR>
<TD><CENTER>ЯЧЕЙКА №3</CENTER>
</TD>
<TD><CENTER>ЯЧЕЙКА №4</CENTER>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
| Пример | ||||
|
2.<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE BORDER ="1" BORDERCOLOR="#39644D" CELLSPACING="5" CELLPADDING="10">
<TR>
<TD ROWSPAN=2 BGCOLOR="#FFE3D7"><CENTER>Атрибут ROWSPAN объединяет 2 строки</CENTER>
</TD>
<TD COLSPAN=2 BGCOLOR="#E5E5E5"><CENTER>Атрибут COLSPAN объединяет 2 столбца</CENTER>
</TD>
<TD BGCOLOR="#9999CC">
</TD>
</TR>
<TR>
<TD BGCOLOR="#99CC99"><CENTER>ЯЧЕЙКА №1</CENTER>
</TD>
<TD BGCOLOR="#FFFF00"><CENTER>ЯЧЕЙКА №2</CENTER>
</TD>
<TD BGCOLOR="#FF3366"><CENTER>ЯЧЕЙКА №3</CENTER>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
| Пример | |||||||
|
|||||||
Рекомендуем почитать
