Таблицы в HTML-документе

Создание таблиц

Таблица – это структурированная информация, представленная в виде столбцов и строк.

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

Создание таблиц вручную – одна из наиболее сложных задач в HTML, требующая внимательности и аккуратности. Сначала формируется таблица, затем – первая строка, затем – каж­дая ячейка с её содержимым. Каждый элемент требует открывающего и закрывающего тегов.

Таблица обозначается в HTML-документе парными тегами < TABLE> и < /TABLE>. Тег < table> может иметь следующие атрибуты:

border – ширина рамки вокруг таблицы;

width – ширина таблицы;

align – выравнивание таблицы относительно боковых границ окна;

bgcolor – цвет фона под таблицей.

Элемент CAPTION задает заголовок таблицы:

< САРТION> Название таблицы< /САРTION>

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

top – над таблицей;

bottom – под таблицей.

Элемент TH создает ячейку и определяет ее как ячейку-заголовок:

< ТН> Заголовок столбца< /ТН>

Содержимое заголовка автоматически размещается по центру ячей­ки и отображается полужирным шрифтом. Данный тег можно встав­лять в любом месте таблицы.

Элемент TR создает строку ячеек:

< ТR> Строка таблицы< /ТR>

У тега < TR> есть следующие атрибуты:

align – способ горизонтального выравнивания содержимого всех ячеек строки: (left, right, center);

valign – вертикальное выравнивание содержимого всех ячеек строки (top, bottom, middle);

bgcolo r – цвет фона для всех ячеек строки.

Столбцы таблицы задаются при помощи элемента TD:

< ТD> Столбец таблицы< /ТD>

Атрибуты align, valign и bgcolor аналогичны атрибутам тега < TR>:

widht – ширина ячейки;

colspan – объединение ячеек нескольких столбцов;

rowspan – объединение ячеек несколько строк.

Пример создания простой таблицы

< Н2> Самая простая таблица< /Н2>

< table border=" 4" >

< tr>

< Тd> ячейка a< /td>

< Тd> ячейка b< /td> Первая строка

< Тd> ячейка c< /td>

< /tr>

< tr>

< Тd> ячейка d< /td>

< Тd> ячейка e< /td> Вторая строка

< Тd> ячейка f< /td>

< /tr>

< /table>

Пример создания таблицы с названиями столбцов