| Таблицы (часть 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">.
|
Продолжение следует....
|
