На главную | К содержанию раздела
Таблицы относятся к одному из ключевых элементов языка HTML. Ведь если вы посмотрите на исходный код некоторых страничек, то они будут представлять собой одну большую и разнообразно сгруппированную таблицу. В этом есть свои плюсы и минусы, но это уже совсем другой вопрос. Нас же будет более интересовать тот момент, как мы можем эти таблицы сделать.
Вот набор базовых тэгов, без которых трудно представить себе таблицу:
Теперь чуть подробнее. Вот простейшая структура таблицы.
<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> есть ряд атрибутов:
Тэг <caption>
Как мы уже говорили, данный тэг задает заголовок таблицы.
Для данного тэга важен только один атрибут – выравнивание текста (align), который может принимать всего два значения: top (заголовок будет размещен над таблицей) и bottom (заголовок будет размещен под таблицей). Вот такой это интересный тэг.
Тэг <tr>
Тэг <tr> создает новый ряд (или строку). После этого, в строке можно будет создавать ячейки.
Атрибуты тэга:
Тэг <td>
При помощи данного тэга можно создать ячейки в строке.
Внимание, прежде чем приступить к созданию ячеек, вы должны обязательно определить строку. То есть, нужно делать так и только так:
<table>
<tr><td></td><td></td></tr>
…
Если вы сразу напишите <td></td>, то это будет неправильно.
Атрибуты:
Листинг 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>
Результат будет такой:
2 | 1 | 1 |
---|---|---|
1 | 1 |
• 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 |
Сложные таблицы.
Как вы видите, манипулируя этим достаточно небольшим количеством тэгов и их атрибутами, можно создавать таблицы самой различной сложности. На самом деле, возможности создания таблиц и их визуальное оформление ограничивается лишь вашими познаниями языка, ну и конечно вашей фантазией. Хотя создание специфических таблиц в реальной жизни может пригодиться не часто, этот момент нельзя обойти стороной.
Для примера, мы создадим достаточно сложную таблицу, в которой будет содержаться какой-то несуществующий журнал посещений студентов. Думаю, если вы будете делать свою сложную таблицу, вы заполните ее чем то более важным ? ).
Листинг 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
Таким образом, процесс создания таблиц, пусть даже больших, не так сложен, как это может казаться. Чтобы избежать проблем, нужно хорошо продумать структуру таблицы, правильно расположить элементы, рассчитать (в процентном соотношении) какую часть страницы должна занимать таблица.
На главную | К содержанию раздела