Синтаксис table элемента

Элемент <TABLE> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <TR> и <TD>. Внутри <TABLE> допустимо использовать следующие элементы: <CAPTION>, <COL>, <COLGROUP>, <TBODY>, <TD>, <TFOOT>, <TH>, <THEAD> и <TR>.

Общий синтаксис

<table>

<tr>

</tr>

</table>

Параметры

align - Определяет выравнивание таблицы. <table align="left | center | right">... </table>

background - Задает фоновый рисунок в таблице. <table background="URL">... </table>

bgcolor - Цвет фона таблицы. <table bgcolor="цвет">... </table>

border - Толщина рамки в пикселах. <table border="толщина">... </table> Задается в числовом значении, по умолчанию равно 1.

bordercolor - Цвет рамки. <table bordercolor="цвет">... </table> Задается в числово-буквенном значении, как и любой цвет в WEB-дизайне.

cellpadding - Отступ от рамки до содержимого ячейки. Этот параметр добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот параметр не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками. Синтаксис: <table cellpadding="значение">... </table>

cellspacing - Задает расстояние между внешними границами ячеек. Если установлен параметр border, толщина границы принимается в расчет. Синтаксис: <table cellspacing="значение">... </table>

cols - Число колонок в таблице. Параметр cols задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого параметра таблица будет показана только после того, как все содержимое таблицы будет загружено в браузер и проанализировано. Использование параметра cols позволяет несколько ускорить отображение содержимого таблицы. Синтаксис: <table cols="число">... </table>

frame - Сообщает браузеру, как отображать границы вокруг таблицы. Толщина границы указывается с помощью параметра border. Синтаксис: <table frame="значение">... </table>

Значения:

void - Не отрисовывать границы.

border - Граница вокруг таблицы.

above - Граница по верхнему краю таблицы.

below - Граница снизу таблицы.

hsides - Добавить только горизонтальные границы (сверху и снизу таблицы).

vsides - Рисовать только вертикальные границы (слева и справа от таблицы).

rhs - Граница только на правой стороне таблицы.

lhs - Граница только на левой стороне таблицы.

Значение по умолчанию -border

rules - Сообщает браузеру, где отображать границы между ячейками. Толщина границы и ее цвет указывается с помощью параметров border и bordercolor. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку. Синтаксис: <table rules="значение">... </table>

Значения

all - Линия рисуется вокруг каждой ячейки таблицы.

groups - Линия отображается между группами, которые образуются тегами <THEAD>, <TFOOT>, <TBODY>, <COLGROUP> или <COL>.

cols - Линия отображается между колонками.

none - Все границы скрываются.

rows - Граница рисуется между строками таблицы, созданых через тег <TR>.

Значение по умолчанию -none (если border="0"); all (если значение параметра border отлично от нуля).

height - Высота таблицы. Указывается в пикселях или процентах. <table height="значение">... </table>

width - Ширина таблицы. Указывается в пикселях или процентах. <table width="значение">... </table>

<TR>

Тег <TR> служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега < TH> или <TD>.

ALIGN

Задает выравнивание содержимого ячеек строки по горизонтали. Выравнивание осуществляется для всех ячеек в пределах одной строки. Если требуется применить разное выравнивание для каждой ячейки, воспользуйтесь стилями или используйте параметр align для тега <TD> или <TH>.

Синтаксис

<tr align="left | center | right | justify">... </tr>

Значения

left - Выравнивание содержимого ячеек по левому краю.

center - Выравнивание по центру.

right - Выравнивание по правому краю.

justify - Выравнивание по ширине (одновременно по правому и левому краю).

Значение по умолчанию -left

Bgcolor

Устанавливает цвет фона строки таблицы.

Синтаксис - <tr bgcolor="цвет">... </tr>

Bordercolor

Устанавливает цвет рамки вокруг строки. Рамка показывается, когда установлен параметр border с ненулевым значением у тега <TABLE>.

Синтаксис - <tr bordercolor="цвет">... </tr>

Valign

Устанавливает вертикальное выравнивание содержимого ячеек в строке. По умолчанию контент ячейки располагается по ее вертикали в центре.

Синтаксис - <tr valign="top | middle | bottom | baseline">... </tr>

Значения:

top - Выравнивание содержимого ячеек по верхнему краю строки.

middle - Выравнивание по середине.

bottom - Выравнивание по нижнему краю.

baseline - Выравнивание по базовой линии, при этом происходит привязка содержимого ячеек к одной линии.

Значение по умолчанию -middle

<TH>

Тег <TH> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег <TH> должен размещаться внутри контейнера <TR>, который в свою очередь располагается внутри тега <TABLE>.

Синтаксис

<table>

<tr>

</tr>

</table>

Параметры

align - Определяет выравнивание содержимого ячейки по горизонтали. Был описан ранее.

background - Задает фоновый рисунок в ячейке. Был описан ранее.

bgcolor - Цвет фона ячейки. Был описан ранее.

bordercolor - Цвет рамки. Был описан ранее.

colspan - Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк.

Пример таблицы, где используется горизонтальное объединение ячеек

В приведенной таблице содержатся две строки и две колонки, причем верхние горизонтальные ячейки объединены с помощью параметра colspan.

Синтаксис - <th colspan="число">... </th>

Значения -Любое целое положительное число больше 1.

height - Высота ячейки. Был описан ранее.

nowrap -Добавление параметра nowrap к тегу <TH> заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого параметра может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-страницу. Как следствие, появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной таблицей будет неудобно, из-за чего применение параметра nowrap осуждается в спецификации HTML 4.

Синтаксис - <th nowrap>... </th>

rowspan - Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рисунке.

Пример таблицы, где используется вертикальное объединение ячеек

В приведенной на рис. 1 таблице содержатся две строки и две колонки, причем левые вертикальные ячейки объединены с помощью параметра rowspan.

Синтаксис - <th rowspan="число">... </th>

Значения -Любое целое положительное число больше 1.

valign - Выравнивание содержимого ячейки по вертикали. Был описан ранее.

width - Ширина ячейки. Был описан ранее.

<TD>

Предназначен для создания одной ячейки таблицы. Тег <TD> должен размещаться внутри контейнера <TR>, который в свою очередь располагается внутри тега <TABLE>.

Синтаксис

<table>

<tr>

</tr>

</table>

Параметры

align - Определяет выравнивание содержимого ячейки по горизонтали. Описан ранее.

background - Задает фоновый рисунок в ячейке. Описан ранее.

bgcolor - Цвет фона ячейки. Описан ранее.

bordercolor - Цвет рамки. Описан ранее.

colspan - Объединяет горизонтальные ячейки. Описан ранее.

height - Высота ячейки. Описан ранее.

nowrap - Запрещает перенос строк. Описан ранее.

rowspan - Объединяет вертикальные ячейки. Описан ранее.

valign - Выравнивание содержимого ячейки по вертикали. Описан ранее.

width - Ширина ячейки. Описан ранее.

<CAPTION>

Тег <CAPTION> предназначен для создания заголовка к таблице и может размещаться только внутри контейнера <TABLE>, причем сразу после открывающего тега. Такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий ее содержание.

Синтаксис

<table>

<caption>Текст</caption>

<tr>

</tr>

</table>

Параметры

align - Определяет выравнивание заголовка по горизонтали.

valign - Устанавливает расположение заголовка до или после таблицы.

Закрывающий тег -Обязателен.

Пример. Использование тега <CAPTION>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Тег CAPTION</title>

</head>

<body>

<caption>Таблица 3.2. Демонстрация катаболических

процессов организма</caption>

<tr>

<th> </th><th>Чебурашка</th>

<th>Крокодил Гена</th><th>Шапокляк</th>

</tr>

<tr>

</tr>

<tr>

<td>Выпил, л</td><td>6</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Результат данного примера показан ниже

Вид заголовка таблицы в браузере Opera

Тег <COL> задает ширину и другие характеристики одной или нескольких колонок таблицы. При наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Тег <COL> можно использовать совместно с тегом <COLGROUP>, который задает группу колонок, обладающих общими параметрами.

Синтаксис

<table>

<col параметры>

<tr>

<td>... </td>

</tr>

</table>

Параметры

align - Устанавливает выравнивание содержимого колонки по краю.

span - Количество колонок, к которым следует применять параметры.

valign - Задает вертикальное выравнивание содержимого колонки.

width - Ширина колонок.

<TBODY>

Элемент <TBODY> предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты.

Допускается применять несколько тегов <TBODY> внутри контейнера <TABLE>. Доступны и другие виды группировок строк — <TFOOT> и <THEAD>, ни один из них не должен перекрываться с элементом <TBODY>.

Синтаксис

<table>

<thead>.... </thead>

<tfoot>... </tfoot>

<tbody>

<tr>

<td>... </td>

</tr>

</tbody>

</table>

Параметры

align - Определяет выравнивание текста в строке.