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

В языке HTML все, что находится между тегами <table> и </table>, относится к описанию таблицы. Строки таблицы обрамляются тегами <tr> и </tr>, а содержимое ячеек в строках заключаются в теги <td> и </td>. Итак, для того чтобы создать таблицу с одной строкой и тремя столбцами, например, такую:

A

B

C

нужно передать обозревателю следующие инструкции:

<table border=1>

<tr>

<td> A </td>

<td> B </td>

<td> C </td>

</tr>

</table>

Здесь в теге <table> использован атрибут border, который определяет границы ячеек таблицы. Значение этого атрибута, равное единице, соответствует самой тонкой границе. Отметим несколько других атрибутов тега <table>.

Атрибут bordercolor задает цвет границ, например, установка bordercolor=”red” обеспечивает вывод красных границ ячеек таблицы.

Атрибут cellpadding определяет, на сколько точек текст будет отступать от края ячейки. Обычно значение этого атрибута устанавливают в пределах 2 – 6 точек, например, cellpadding=4.

Атрибут cellspacing задает расстояние между ячейками таблицы.

При задании ширины таблицы используют атрибут width тэга <table>, задавая его значения в процентах и пикселях. В первом случае ширина таблицы будет формироваться относительно ширины окна обозревателя, во втором случае независимо от этого.

По умолчанию значение атрибута border равно 0. Из этого следует, что без использования атрибута border, таблица будет с невидимыми границами.

Использование атрибута align у тэга <table> приводит к выравниванию таблицы относительно границ окна web-обозревателя.

С помощью атрибута width в теге <td> можно задавать относительную или абсолютную (например, в пикселях) ширину столбцов.

Для объединения ячеек используются атрибуты colspan и rowspan. Приведем примеры использования этих атрибутов.

Пусть имеется исходная таблица 1.3.

Таблицы 1.3.

11	12	13
21	22	23

Таблица 1.4 получена из исходной путем объединения ячеек «12» и «22» во втором столбце.

Таблицы 1.4.

11	1222	13
21		23

Таблица 1.5 получена путем объединения ячеек «12» и «13» в первой строке.

Таблицы 1.5.

11	1213
21	22	23

HTML-код таблицы 1.3.

<table width="100%" border="1">

<tr>

<td>11</td>

<td>12</td>

<td>13</td>

</tr>

<tr>

<td>21</td>

<td>22</td>

<td>23</td>

</tr>

</table>

HTML-код таблицы 1.4.

<table width="100%" border="1">

<tr>

<td>11</td>

<td rowspan="2">1222</td>

<td>13</td>

</tr>

<tr>

<td>21</td>

<td>33</td>

</tr>

</table>

HTML-код таблицы 1.5.

<table width="100%" border="1">

<tr>

<td>11</td>

<td colspan="2">1213</td>

</tr>

<tr>

<td>21</td>

<td>22</td>

<td>33</td>

</tr>

</table>