Таблицы

 

Используя таблицы, можно создавать такие эффекты, как верстка в несколько колонок, применение эффектов состыковки картинки и фона, тонкие линии на всю ширину или высоту странички и т.д.



Найти: на


 

Таблицы.

Чтобы разобраться в устройстве таблицы, расмотрим простой пример:

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Примечание: В данном примере создана таблица с фиксированой шириной (width="200" пикселей), но лучше использовать проценты, т.к. в этом случае размер таблицы будет изменятся в зависимости от размера окна.

     Такая таблица реализуется следующим кодом:

<table border="2" width="200"
bgColor="#00FF00">
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>

Таблица начинается открывающимся тегом <table> и завершается закрывающимся </table>.
Тег <table> может включать следующие аттрибуты:

width="n" Определяет ширину таблицы в пикселях или процентах, по умолчанию ширина таблицы определяется содержимым ячеек.
border="n" Устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки.
borderColor="#FFFFFF" Устанавливает цвет окантовки, где #FFFFFF (белый) - шестнадцатиричное значение цвета.
bgColor="#FFFFFF" Устанавливает цвет фона для всей таблицы, где #FFFFFF - шестнадцатиричное число.
background="image.gif"Заполняет фон таблицы изображением.
cellSpacing="n"Определяет расстояние между рамками ячеек таблицы в пикселях.
cellPadding="n" Определяет расстояние в пикселях между рамкой ячейки и текстом.
align=left Определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: left (слева), center (по центру страницы) и right (справа).
frame="значение" Управляет внешней окантовкой таблицы, может принимать следующие значения:
void - окантовки нет (значение по умолчанию).
above - только граница сверху.
below - только граница снизу.
hsides - границы сверху и снизу.
vsides - только границы слева и справа.
lhs - только левая граница.
rhs - только правая граница.
box - рисуются все четыре стороны.
border - также все четыре стороны.
rules="n" Управляет линиями, разделяющими ячейки таблицы. Возможные значения (n):
none - нет линий (значение по умолчанию).
groups - линии будут только между группами рядов.
rows - только между рядами.
cols - только между колонками.
all - между всеми рядами и колонками.

Таблица может включать заголовок, который распологается между тегами <caption></caption>. Он должен быть непосредственно после тега <title>. К заголовку возможно применение аттрибута align, определяющего его положение относительно таблицы:

top - значение по умолчанию, заголовок над таблицей по центру.
left - заголовок над таблицей слева.
right - заголовок над таблицей справа.
bottom - заголовок под таблицей по центру.

Теперь о строках и ячейках таблицы. Строки таблицы начинаются открывающимся тэгом <tr> и завершаются закрывающимся </tr>, а каждая ячейка таблицы начинается тегом <td> и завершается </td>. Данные теги могут иметь такие аттрибуты:

Следующие атрибуты могут применятся для строк и ячейек.
align=left Устанавливает горизонтальное выравнивание текста в ячейках строки. Может принимать значение left (выравнивание влево), center (выравнивание по центру) и right (вправо).
Valign=center Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: top (выравнивание по верхнему краю), center (выравнивание по центру - это значение принимается по умолчанию), bottom (по нижнему краю).
bgColor="#FFFFFF" Устанавливает цвет фона строки или ячейки.
background="image.gif" Заполняет фон строки или ячейки изображением.
Следующие атрибуты могут применятся только для ячейек.
width="n" Определяет ширину ячейки в n пикселях.
height="n" Определяет высоту ячейки в n пикселях.
colspan="n"Растягивание ячейки по горизонтали. Например, <td colspan="2"> означает, что ячейка будет растянута на 2 колонки.
rowspan="n"Растягивание ячейки по строке. Например, <td rowspan="2" означает, что ячейка будет растянута на 2 строки таблицы.
nowrap Присутствие этого аттрибута показывает, что текст должен размещаться в одну строку
background="image.gif" Заполняет фон ячейки изображением.

Кроме этого, любая ячейка таблицы может быть определена не тегами <td></td>, а тегами <th></th> - Table Header (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри этих тегов будет выделен полужирным шрифтом и отцентрирован.

Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект &nbsp; (non-breaking space - неразрывающий пробел). Ячейка по-прежнему будет пуста, а рамка вокруг нее будет (&nbsp; - обязательно должен набираться строчными буквами и закрыватся точкой с запятой).

И еще - имейте ввиду, что теги, устанавливающие шрифт (<b>, <i>, <font size="n", font color="#FFFFFF"), необходимо повторять для каждой ячейки.


_




 

 



Hosted by uCoz