|
Для организации таблиц в HTML используются открывающий и закрывающий теги table
между этими тегами должны быть расположены открывающий и закрывающий теги tr,
которые организуют строки таблицы. Между тегами tr должны быть расположены открывающий
и закрывающий теги td, которые разбивают строки на ячейки.
Между тегами td размещается содержимое ячейки.
Если в каких-либо ячейках нужно отцентрировать текст и выделить его жирным шрифтом,
то теги td для этих ячеек можно заменить на теги th, хотя это можно
сделать и обычными средствами.
Если для таблицы нужен заголовок - после открывающего тега table; вставляются открывающий и
закрывающий теги caption с текстом заголовка:
| Код | Отображение |
|---|
<table>
<caption>Текст заголовка таблицы</caption>
<tr>
<th>
Содержание первой ячейки шапки
</th>
<th>
Содержание второй ячейки шапки
</th>
</tr>
<tr>
<td>
Содержание первой ячейки на первой строке
</td>
<td>
Содержание второй ячейки на первой строке
</td>
</tr>
<tr>
<td>
Содержание первой ячейки на второй строке
</td>
<td>
Содержание второй ячейки на второй строке
</td>
</tr>
</table>
|
Текст заголовка таблицы
|
Содержание первой ячейки шапки
|
Содержание второй ячейки шапки
|
|
Содержание первой ячейки на первой строке
|
Содержание второй ячейки на первой строке
|
|
Содержание первой ячейки на второй строке
|
Содержание второй ячейки на второй строке
|
Примечание: Раскраска рамки и ячеек в этом примере зависит от настройки CSS-стилей.
|
Атрибуты элементов table, tr, td, th, caption
| Атрибут | Элемент | Описание |
|---|
| ALIGN | table, tr, td, th |
left / center / right / justify -
определяет способ горизонтального выравнивания абзаца (Прижать влево /
Расположить по центру / Прижать вправо / Растянуть по ширине)
|
| ALIGN | caption | top / bottom - помещает заголовок над / под таблицей |
| VALIGN | table, tr, td, th |
top / middle / bottom - определяет способ вертикального выравнивания (Прижать вверх /
Расположить по центру / Прижать вниз)
|
| WIDTH | table, td, th | Устанавливает ширину в пикселах или процентах |
| HEIGHT | table, td, th | Устанавливает высоту в пикселах или процентах |
| BORDER | table | Определяет ширину окружающей рамки в пикселах |
| CELLSPACING | table | Расстояние в пикселах между соседними ячейками |
| CELLPADDING | table | Расстояние в пикселах между границей ячейки и ее содержимым |
| BACKGROUND | table, td, th |
Заполняет фон таблицы рисунком. В качестве значения нужно указать URL рисунка.
|
| BGCOLOR | table, tr, td, th | Цвет фона таблицы |
| BORDERCOLOR | table | Цвет рамки |
| COLSPAN | td, th | Определяет количество столбцов, на которые простирается данная ячейка |
| ROWSPAN | td, th | Определяет количество рядов, на которые простирается данная ячейка |
| NOWRAP | td, th | Блокирует автоматический перенос слов в пределах текущей ячейки |
Примечания:
Границы ячейки отображаются только в том случае, когда в ней что-нибудь записано.
Чтобы получить пустую ячейку с границами, нужно поместить в нее специальный символ
(пробел) или маленькую прозрачную gif-картинку.
Если вы используете одновременно атрибуты NOWRAP и WIDTH (несовместимые для некоторых
браузеров), то следует дополнительно вставлять внутрь ячейки атрибут NOBR.
| 