Меню

Учебник HTML

Использование таблиц

Таблица - эффективный способ отображения статистических данных или информации, которую удобнее представлять именно в таком виде. Данные таблицы хранятся в ячейках, являющихся отдельными полями, из которых состоят строки и столбцы таблицы. Надписи, которые размещаются над столбцами и описывают их содержимое, называют шапкой таблицы.

При создании таблиц может потребоваться дополнительное форматирование: выравнивание данных в ячейках, корректировка месторасположения рамок или изменение цвета фона таблицы.

Формирование таблицы

При формировании таблицы применяется несколько парных тегов.

<ТАВLЕ> и </ТАВLЕ>. Указывают на начало и конец таблицы. Все остальные теги и текст таблицы должны находиться между этими двумя тегами.
<ТR> и </ТR>. Отмечают начало и конец строки. Все шапки и ячейки любой строки должны находиться между этими двумя тегами.
<ТН> и </ТН>. Определяют начало и конец ячейки шапки таблицы.
<ТD> и </ТD>. Отмечают начало и конец ячейки данных.

Кроме того, вы можете создать заголовок таблицы. Это делается с помощью тега <САРТION>, размещаемого внутри тега <ТАВLЕ>.

В следующем примере показан НТМL-код таблицы, состоящей из трех столбцов и двух строк. Наличие атрибута BORDER в теге <ТАВLЕ> говорит о том, что ячейки таблицы ограничены линиями. Для того чтобы границы ячеек не отображались, указанный атрибут необходимо удалить.

<ТАВLЕ ВОRDER>
<ТR>
<ТН>Имя члена</ТН>
<ТН>Посещал клуб книголюбов?</ТН>
<ТН>Дата посещения</ТН>
</ТR>
<ТR>
<ТD>Елена</ТD>
<ТD>Нет</ТD>
<ТD>Нет данных</ТD>
</тR>
<тR>
<ТD>Николай</ТD>
<тD>Да</ТD>
<ТD>10 мая, 23 августа</ТD>
</ТR>
</ТАВLЕ>

Форматирование таблицы

При необходимости откорректировать внешний вид таблицы можно использовать некоторые из перечисленных далее атрибутов тегов <ТАВLЕ>, <ТН>, <ТR> и <ТD>.

ALIGN. Управляет выравниванием строк (при добавлении в тег <ТR>) или данных в ячейке (при добавлении в тег <ТD> или <ТН>) по горизонтали. Наиболее часто применяются значения LEFT, CENTER и RIGHT. Так, следующий тег указывает на то, что текст должен быть выровнен по правому краю:
```
<ТR ALIGN="RIGHT">
```
VALIGN. Управляет выравниванием строк (при добавлении в тег <ТR>) или данных в ячейке (при добавлении в тег <ТD> или <ТН>) по вертикали. Чаще всего используются значения ТОР, CENTER и ВОТТОМ. Следующий тег указывает на то, что текст будет выровнен по верхнему краю:
```
<ТR VALIGN="TOP">
```
CELLPADDING. Управляет шириной промежутка между текстом внутри ячеек и рамкой (измеряется в пикселах). Этот атрибут устанавливается в теге <ТАВLЕ>. Следующий тег указывает, что в таблице ширина промежутка между содержимым каждой ячейки и ее рамкой должна быть равна пяти пикселам:
```
<ТАВLЕ СЕLLPADDING="5">
```
CELLSPACING. Устанавливает величину промежутка между соседними ячейками. Также задается в теге <ТАВLЕ>. Если рамки для таблицы включены, то промежуток добавляется без учета границы (половина с одной стороны и половина — с другой).
BGCOLOR. Управляет цветом фона всей таблицы (при его добавлении в тег <ТАВLЕ>), строки (при добавлении в тег <ТR>) или ячейки (при его добавлении в тег <ТD> или <ТН>). Для обозначения цвета может применяться имя стандартного цвета или шестнадцатеричное значение. Например, ниже приведен тег, который назначает в качестве фона строки цвет морской волны:
```
<ТR BGCOLOR="#66FFFF">
```
BACKGROUND. Отображает в качестве фона таблицы, строки или ячейки содержимое графического файла (аналогично атрибуту BACKGROUND тега <BODY>).
WIDTH. Определяет ширину таблицы в пикселах или в процентах от ширины окна браузера.

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

Используя таблицу вы можете создать боковое меню, которое будет открываться справа или слева от рабочей области, либо поместить текст в прямоугольное окно, что и реализовано в следующем примере:

<ТАВLE BORDER ALIGN="LEFT" WIDTH="30%">
<ТR>
<TD>
Внимание! Данный текст может содержать ошибки!
</TD>
</TR>
</ТАВLЕ>

[Вернуться к содержанию...]