Рейтинг@Mail.ru
По поводу размещения своих банеров пишите по почте

Таблица

ОбучениеНедостаток средств форматирования в языке HTML привел к появлению разнообразных трюков. Одним из элементов, которые наиболее подходят для этой цели, являются таблицы. Таблица представляет собой сложное сочетание многих элементов HTML. Она описывается парным тегом <table> и содержит внутренние элементы, описывающие ее содержание. Весь текст документа должен располагаться не непосредственно внутри элемента table, а в составе одного из ее структурных элементов.

Пример <html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<caption>Таблица умножения</caption>
<tr><td></td><th>2</th><td>3</th><th>4</th><th>5</th></tr>
<tr><th>2</th><td>4</td><td>6</td><td>8</td><td>10</td></tr>
<tr><th>3</th><td>6</td><td>9</td><td>12</td><td>15</td></tr>
<tr><th>4</th><td>8</td><td>12</td><td>16</td><td>20</td></tr>
<tr><th>5</th><td>10</td><td>15</td><td>20</td><td>25</td></tr>
</table>
</body>
</html>

Заголовок таблицы задается тегом <caption>. Заголовок относится ко всей таблице. Это парный тег который может быть опущен целиком. Если же открывающий тег указан, то закрывающий тег обязателен.
Строка таблицы описывается тегом <tr>. Это также парный тег, описывающий набор ячеек таблицы. Образующий строку. Закрывающий тег в данном случае не обязателен. Как конец стоки воспринимается как начало следующей строки или окончание всей таблицы.
Отдельные ячейки таблицы описываются тегом <td>. Этот тег можно располагать только внутри элемента строки таблицы. Как и в предыдущем случае, закрывающий тег необязателен, так как окончание ячейки однозначно определяется местом начала следующей.
Другой способ описания ячейки таблицы состоит в использовании тега <th>. О нем можно сказать все то же, что и о теге <td>, с той разницей, что тег <th> описывает ячейку заголовка. Таковы, как правило, ячейки первой строки и первого столбца таблицы. Текст такой ячейки по умолчанию отображается полужирным шрифтом. При подсчете числа ячеек строки, последние два типа элементов равноправны.
Содержимое ячеек таблицы может быть любым, то есть в ячейках можно размещать любые блочные или текстовые элементы. Допустимо и размещать внутри ячейки другую таблицу. Простейшая таблица содержит всего одну ячейку.

Для всех тегов таблицы могут быть заданы различные атрибуты. Они оказывают воздействие только на соответствующий элемент. Некоторые из этих атрибутов позволяют переопределить настройки, унаследованные от элементов более высокого уровня, другие имеют специфическое название. Тег <table> имеет следующие атрибуты:
align - задает выравнивание таблицы в целом (left, right, center)
width - задает ширину таблицы (px, %)
border - указывает на отображении граничной линии, числовое значение указывает на толщину линии (px)
cellpadding - задает отступ между внутренней границей ячейки и ее содержимым (px)
cellspacing - задает расстояние между соседними ячейками таблицы (px)
style - задает стиль таблицы
background-image - фоновый рисунок таблицы url(pic.jpg)
background-attachment - данный параметр указывает на передвижение фонового рисунка вместе с текстом. (fixed - (используется по умолчанию) фон остается на месте, scroll - фон передвигается вместе с текстом)
background-color - этот параметр определяет фон таблицы
background-repeat - данный параметр указывает на способ повторения рисунка в таблице (repeat-x - повторение по горизонтали, repeat-y - повторение по вертикали, no-repeat - рисунок не будет повторяться)
border-color - указывает цвет граничной линии
border-style - указывает на стиль таблицы (solid, double, groove, ridge, inset, outset)
border-width - данный параметр указывает на ширину таблицы
frame - указывает какие стороны таблицы и ячеек должны иметь рамку. (above - только снизу, below - только снизу, hsides - сверху и снизу, vsizes - слева и справа, lhs - только слева, rhs - только справа, box - со всех сторон)

Для тега <caption> может быть задан только атрибут align, который имеет значение top или bottom. В первом случае заголовок размещается над таблицей, во втором под ней.
Для строки таблицы может быть задан отдельный фоновый цвет с помощью того же атрибута style (background-color), кроме того, здесь можно задать выравнивание текста, в пределах ячеек, относящихся к данной строке. Это достигается с помощью атрибутов align и valign. Атрибут align определяет горизонтальное выравнивание и может принимать значения left, right, center. Атрибут valign определяет выравнивание по вертикали. Его возможные значения - top, middle, bottom, baseline.
Ячейки таблицы создаются с помощью тегов <td> и <th>, в которых используется один и тот же набор атрибутов. В частности, для каждой ячейки можно переопределить фоновой цвет и способ выравнивания текста. Но в данном случае можно использовать и дополнительные атрибуты, например для каждой ячейки можно определить высоту и ширину при помощи атрибутов width и height.
Очень важна также возможность создания увеличенных ячеек, объединяющих группу ячеек в одно целое. Для этого используются атрибуты rowspan и colspan. Значениям этих атрибутов являются числа, указывающие, на сколько строк (столбцов) таблицы простирается данная ячейка.

Назад       Далее

Design Studio of Vint Stone. 2003.

Hosted by uCoz