На главную | К содержанию раздела

Таблицы.

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

Вот набор базовых тэгов, без которых трудно представить себе таблицу:

1. <table> – создание таблицы
2. <caption> - создание заголовка таблицы
3. <tr> - создание строки создает новый ряд (строку) ячеек таблицы
4. <td> - создание столбца.

Теперь чуть подробнее. Вот простейшая структура таблицы.
<table>
<caption></caption>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>

А в реальной жизни это может выглядеть например так:
Листинг 9.
<table border=”1”>
<caption>Заголовок таблицы</caption>
<tr><td>строка 1 столбец 1</td><td>строка 1 столбец 2</td></tr>
<tr><td>строка 2 столбец 1</td><td>строка 2 столбец 2</td></tr>
</table>

Рис. 9

Тэг <table>

У тэга <table> есть ряд атрибутов:

• align – горизонтальное выравнивание таблицы. Традиционные параметры: left, center, right. Обратите внимание, что данное выравнивание выравнивает таблицу, а не ее содержимое. То есть, если вы напишите: <table align = "center"> - то таблица будет располагаться по центру страницы, а текст в ней останется выровненным по левому краю.
• valign – способ вертикального выравнивания. Может принимать значения: top, bottom, middle.
• border - данный параметр мы уже использовали, он определяет ширину внешней рамки таблицы.
• frame – определяет вид рамки вокруг таблицы. Может принимать значения: void, above, below, hsides, vsides, hs, rhs, box.
• cellpadding – расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.
• cellspacing – расстояние (в пикселах) между границами соседних ячеек.
• width - определяет ширину таблицы. Причем, можно написать: <table width=”50”>, тогда ширина таблицы будет 50 символов. А можно и так: <table width=”50%”>, в таком случае, таблица будет занимать 50% от общей ширины окна браузера.
• height – высота таблицы.
• bgcolor – цвет фона ячеек таблицы.
• background – позволяет задать фоновый рисунок для таблицы.
  

Тэг <caption>

Как мы уже говорили, данный тэг задает заголовок таблицы.
Для данного тэга важен только один атрибут – выравнивание текста (align), который может принимать всего два значения: top (заголовок будет размещен над таблицей) и bottom (заголовок будет размещен под таблицей). Вот такой это интересный тэг.

Тэг <tr>

Тэг <tr> создает новый ряд (или строку). После этого, в строке можно будет создавать ячейки.
Атрибуты тэга:

• align – выравнивание содержимого. Принимает традиционные значения: left, center, right.
• valign – вертикальное выравнивание содержимого. Значения: top, bottom, middle.
• bgcolor – цвет фона для всех ячеек данной строки.

Тэг <td>

При помощи данного тэга можно создать ячейки в строке.
Внимание, прежде чем приступить к созданию ячеек, вы должны обязательно определить строку. То есть, нужно делать так и только так:
<table>
<tr><td></td><td></td></tr>
…
Если вы сразу напишите <td></td>, то это будет неправильно.

Атрибуты:

• align – горизонтальное выравнивание (left, center, right). По умолчанию будет использоваться способ выравнивания, заданный в тэге <tr>.
• valign – вертикальное выравнивание (top, bottom, middle)
• width – ширина ячейки (в пикселах или процентах)
• height - высота ячейки (тоже в пикселах или процентах).
• colspan –количество столбцов, на которые простирается ячейка.

Листинг 10.
<table align="center" border="1">
<tr>
<th rowspan="2">2</th>
<td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td>
</tr>
</table>

Результат будет такой:

• rowspan - определяет количество рядов, на которые простирается ячейка.

Листинг 11.
<table align="center" border>
<tr>
<th colspan="2">2</th>
</tr>
<tr>
<td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td>
</tr>
</table>

2	1	1
	1	1

• nowrap – параметр запрещающий автоматический перенос слов.
• bgcolor –цвет фона ячейки.
• background – определяет фоновый рисунок для ячейки.
  
  Есть еще такой тэг <th>. По сути – это своеобразный заголовок ячейки. Его можно использовать для создания ячеек, если эта ячейка будет играть роль заголовка.

Сложные таблицы.

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

Листинг 12.
<table align="center" cellspacing="0" width="60%" frame='below'>
<caption><b>Журнал посещения студентов</b></caption>
<tr><th rowspan="3">Фамилии</th> <th colspan="6">Дни недели</th></tr>
<tr><th colspan="5">Рабочие дни</th> <th rowspan="2">Факультативы<br>в субботу</th></tr>
<tr><th>пн</th><th>вт</th><th>ср</th><th>чт</th><th>пт</th>
<tr align="center"><td align="left">Иванов</td><td>+</td><td>+</td><td>+</td><td>+</td><td>+</td><td>+</td></tr>
<tr align="center"><td align="left">Петров</td><td>-</td><td>+</td><td>+</td><td>+</td><td>+</td><td>+</td></tr>
<tr align="center"><td align="left">Сидоров</td><td>-</td><td>-</td><td>+</td><td>+</td><td>-</td><td>-</td></tr>
</table>

Рис. 10

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

На главную | К содержанию раздела