E-mail Добавить в "Избранное" Сделать "ТвойWeb" стартовой
Здесь находится флеш баннер. Чтобы увидеть его Вы должны установить Flashplayer
 
Новости сайта
02 [F]апреля, 2006
08 [F]декабря, 2005
17 [F]октября, 2005
16 [F]июля, 2005
25 [F]декабря, 2004
======================
Предыдущие новости
<< < 01 02 03 04 05 > >>
 
 
 

Таблицы (часть I)

Вот мы и подошли к моим любимым таблицам. Так , что же такое таблицы и для чего они нужны. Вообще таблицы предназначены для внедрения в документ таблиц. То есть например Вы хотите разместить на странице прайс-лист какой либо продукции, услуг, вообщем всего того , что можно представить в виде традиционного понятия таблицы. Но таблицы нашли себе и другое применение. При помощи таблиц вебмастера успешно решают проблемы позиционирования объектов на странице, хотя рекомендациями консорциума W3C, позиционировать эелементы следует используя слои (<Layer>).

Итак, внизу представлена простейшая таблица шириной 300 пикселей. Данная таблица состоит из двух строк. Каждая строка состоит из трех ячеек.

1 ячейка 1 строки 2 ячейка 1 строки 3 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки 3 ячейка 3 строки

Теперь давайте разберем эту таблицу.

<table width="300" border="1"> Объявлем браузеру о начале таблицы с шириной (width) 300 пикселей и рамкой (border) в 1 пиксель

  <tr> Объявляем о начале первой строки таблицы (<tr>)
  <td>1 ячейка 1строки</td> Объявлем начало 1 ячейки 1 строки (<td>), вписываем содержимое ячейки ("1 ячейка 1 строки") и закрываем ячейку (</td>)
<td>2 ячейка 1 строки</td> Объявлем начало 2 ячейки 1 строки (<td>), вписываем содержимое ячейки ("2 ячейка 1 строки") и закрываем ячейку (</td>)
<td>3 ячейка 1 строки</td> Объявлем начало 3 ячейки 1 строки (<td>}, вписываем содержимое ячейки ("3 ячейка 1 строки") и закрываем ячейку (</td>)
</tr> Закрываем первую строку (</tr>)
<tr> Объявляем о начале второй строки таблицы (<tr>)
  <td>1 ячейка 2 строки</td> Объявлем начало 1 ячейки 2 строки (<td>}, вписываем содержимое ячейки ("3 ячейка 2 строки") и закрываем ячейку (</td>)
<td>2 ячейка 2 строки</td> Объявлем начало 2 ячейки 2 строки (<td>}, вписываем содержимое ячейки ("3 ячейка 2 строки") и закрываем ячейку (</td>)
<td>3 ячейка 2 строки</td> Объявлем начало 3 ячейки 2 строки (<td>}, вписываем содержимое ячейки ("3 ячейка 2 строки") и закрываем ячейку (</td>)
</tr> Закрываем вторую строку (</tr>)
</table> Объявляем, что на этом таблица закончена (</table>)

Из этого можно сделать вывод;
Таблица состоит из открывающего (<Table>) и закрывающего тега (</Table>). которые объявляют о начале и завершении таблицы. Вложенных, между тегами <Table> и </Table>, тегов <Tr> и </Tr>, которые извещают браузер о начале и конце строки, и тегов начала (<Td>) и конца (</Td>) ячейки, которые должны находиться внутри тегов строки. Между тегами ячейки помещается содержимое ячейки. Содержимым ячейки может быть все что угодно; графическое изображение, текст, мультимедийные объекты и т.д.. Ячейка также может содержать вложенную таблицу со своими параметрами.
Все эти три элемента являются обязательными элементами таблицы. В противном случае таблица будет отображаться некорректно.

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

Элемент Table
Элемент извещающий о начале таблицы. Обязательно должен иметь закрывающий тег </Table>, который закрывает таблицу.
Имеет следующие атрибуты.
атрибут Width
Этот атрибут задает ширину таблицы в пикселях или в процентах от ширины объекта, в который помещена таблица. Если не указать этот атрибут, то браузер автоматически определит этот параметр в зависимости от объема содержащегося в таблице материала.
Записывается так;
<table width="70%">
атрибут Height
Определяет высоту таблицы в пикселях или процентах от высоты объекта, в который помещена таблица. Если не указать этот атрибут, как и в случае с атрибутом "width", браузер автоматически определит этот параметр в зависимости от объема содержащегося в таблице материала.
Записывается так;
<table height="150">
атрибут Bgcolor
Определяет цвет фона таблицы. Идентичен одноименному атрибуту элемента <Body>.
Записывается так;
<table bgcolor="blue">
Или
<table bgcolor="#FFCC00">.
атрибут Background
Этот атрибут позволяет залить тело таблицы графическим изображением, также как и одноименный атрибут элемента <Body>. В качестве значения указывается путь до файла изображения.
Записывается так;
<table background="http://site.ru/images/fon.gif">
атрибут Border
Указывает ширину внешней рамки таблицы в пикселях. Если этот атрибут не указывать или указать значение "0", рамка отобраэаться не будет
Записывается так;
<table border="2">
Пример таблицы с рамкой равной 5 пикселям;
1 ячейка 1 строки 2 ячейка 1 строки 3 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки 3 ячейка 3 строки
атрибут Align
Атрибут горизонтального выравнивания таблицы. Имеет значения "center" (по центру), "left" (по левому краю) и "right" (по правому краю).
Записывается так;
<table align="center">
атрибут Cellspacing
Определяет расстояние в пикселях между ячейками таблицы.
Записывается так;
<table cellspacing="2">
Пример таблицы со значением атрибута "cellspacing" равным "5";
1 ячейка 1 строки 2 ячейка 1 строки 3 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки 3 ячейка 3 строки
атрибут Cellpadding
Этот атрибут определяет расстояние в пикселях между рамкой, каждой ячейки таблицы и ее содержимым.
Записывается так;
<table cellpadding="10">
Пример таблицы со значением атрибута "cellpadding" равным "10";
1 ячейка 1 строки 2 ячейка 1 строки 3 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки 3 ячейка 3 строки

Заметьте, что ширина таблицы в первом и во втором примере не менялась и составляет 300 пикселей. Но во второй таблице мы имеем атрибут cellpadding равный "10", то есть в каждой ячейке существуют как бы "мертвые зоны" слева, справа, сверху и снизу, величиной 10 пикселей. Этим мы как бы отобрали у каждой ячейки часть рабочего простанства в 20 пикселей по горизонтали (10 слева и 10 справа) и 20 пикселей по вертикали (10 сверху и 10 снизу). В итоге содержимое ячеек уже не поместилось в оставшееся пространство и чтобы показать все содержимое, браузер растянул таблицу по вертикали.

Помимо этих атрибутов есть и другие. Но некоторые из них по разному отображаются в разных браузерах, некоторые на данном этапе обучения Вам просто не нужны. Зачем забивать голову лишним. Я не ставил перед собой цели описывать все элементы, атрибуты и их значения. Для этого есть спецификация HTML. Если Вам нужен полный список элементов таблицы, их атрибутов и значений, загляните в спецификацию.

Элемент Tr
Элемент создает новую строку ячеек в таблице.
Имеет атрибуты;
атрибут Align
Определяет способ горизонтального выравнивания содержимого всех ячеек данной строки. Возможные значения:"left" (по левому краю), "center" (по центру), "right" ( по правому краю).
Записывается так;
<tr align="center">
атрибут Valign
Определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: "top" (по верхней границе строки), "bottom" (по нижней границе строки), "middle"(по центру строки).
Записывается так;
<tr valign="top">
Посмотрите пример;
1 ячейка 1 строки 2 ячейка 1 строки
2 ячейка 1 строки
2 ячейка 1 строки
3 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки 3 ячейка 3 строки
Видите содержимое второй ячейки первой строки увеличилось в объеме и чтобы отобразить это содержимое браузер растянул по вертикали первую строку. Но в то же время содержимое первой и третьей ячейки по центру строки. Атрибут "valign" для того чтобы выравнять содержимое ячеек, то есть чтоб содержимое ячеек всегда находилось там где Вы хотите.
Вот пример в котором значение атрибута "valign" равно "top", то есть выранивание осуществляется по верхней границе строки. И теперь как бы не раздвигалась таблица содержимое первой и третьей ячейки будут как бы привязаны к верху строки.
1 ячейка 1 строки 2 ячейка 1 строки
2 ячейка 1 строки
2 ячейка 1 строки
3 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки 3 ячейка 3 строки
Вот пример где значение атрибута "valign" равно "bottom";
1 ячейка 1 строки 2 ячейка 1 строки
2 ячейка 1 строки
2 ячейка 1 строки
2 ячейка 1 строки
2 ячейка 1 строки
2 ячейка 1 строки
3 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки 3 ячейка 3 строки
Если не указывать атрибута "align" и "valign", то по умолчанию они принимают значения "left" и "middle" соответственно.
атрибут Bgcolor
Определяет цвет фона строки таблицы. Идентичен одноименному атрибуту элемента <Table>.
Записывается так;
<tr bgcolor="blue">
Или
<tr bgcolor="#FFCC00">.

Продолжение следует....

К оглавлению Наверх Дальше