Таблицы

Таблицы используются, когда вам необходимо показать «табличные данные», например, информацию, логически упорядоченную в столбцы и ряды.

Содержание

• Синтаксис создания таблиц
• Заголовок таблицы
• Атрибуты тега <table>

Синтаксис создания таблиц

Для начала необходимо ознакомится с общей структурой создания таблицы. Первым идёт открывающий тег контейнера таблицы <table>, который указывает, на то, что именно с этого места начинается таблица. Естественно, что этот тег является парным, и по окончанию таблицы его необходимо закрыть. Внутри этого контейнера располагаются элементы структуризации таблицы. Как известно, таблица состоит из колонок и строк. Для каждой строки и каждой ячейки таблицы существует свой элемент. После открытия элемента <table> мы должны указать элемент строки который в свою очередь содержит любое количество элементов-ячеек. Для задания строк таблицы используются элементы <tr> (Table Row), а для задания ячейки таблицы используется элемент <td> (Table Data).

Атрибут border

По умолчанию таблицы отображаются без видимых границ, воспользуемся атрибутом border для указания наличия границы таблицы (присутствие атрибута border указывает на то, что броузер должен показать таблицу с видимыми границами).

Атрибут border может указывать на толщину границы таблицы следующим образом:

Заголовок таблицы

Любая таблица может иметь чётко привязанный к ней заголовок, который определяется элементом <caption>. Заголовок может содержать любой текст, по умолчанию распологается над таблицей, текст заголовка равняется по центру.

Внутри элемента <caption> можно вкладывать любые элементы физического и логического форматирования, чтобы как-то разнообразить вид заголовка.

У элемента <caption> существует атрибут align с помощью которого заголовок можно размещать в верху или внизу таблицы. Его значения могут быть равны: top и bottom.

Атрибуты тега <table>

Атрибут cellspacing

Атрибут cellspacing управляет расcтояниями между отдельными ячейками. Если внимательно присмотреться к таблицам, то легко заметить, что таблица имеет двойные рамки, т.е. каждая ячейка заключена в свою рамку. Через значение атрибута cellspacing задаются растояния между рамками отдельных ячеек. Ниже приведён пример с значением cellspacing="15" (пикселям).

Атрибут cellpadding

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

Атрибуты width и heidht

При размещении таблицы в потоке данных броузер пытается автоматически подобрать её высоту и ширину, исходя из заданных атрибутов cellspasing, cellpadding, размеров и начертаний шрифтов текста, данных размещённых в ячейках, размера окна броузера. Главное правило автоматического подбора размеров таблицы заключается в том, что ширина таблицы не должна превышать ширину окна.

Но достаточно часто возникает необходимость задать фиксированные размеры таблицы. В спецификации HTML4 разрешается изменять только ширину таблицы, используя атрибут width. Ширина элемента <table> может задаваться в относительных (процентах) единицах и в псевдоабсолютных единицах (пикселях).

Атрибут align

Этот атрибут используется для выравнивания данных внутри таблицы. Соответсвенно его значения могут быть равны left, right, center.

Атрибуты bordercolor, background и bgcolor

• атрибут bgcolor отвечает за цвет фона элемента таблицы.
• атрибут bordercolor используется для изменения цвета рамок таблицы.
• фоновый рисунок вставляется при помощи атрибута background (в значении этого атрибута указывается путь к рисунку, который нужно сделать фоновым. Например: background="./images/p12.jpg").