Создание таблиц. Для оформления таблиц используется специальный набор тегов

Для оформления таблиц используется специальный набор тегов. Внутри таблицы можно использовать все элементы HTML-документа: вставлять текст, рисунки и т.п.

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

Пример:

Имеется следующая таблица. Необходимо оформить ее на языке HTML.

<table border="1">

<caption>Годовой отчет</caption>

<tr>

<th>Статья</th> <th>1 квартал</th> <th>2 квартал</th> <th>3 квартал</th>

<th>4 квартал</th>

</tr>

<tr>

<td> Доходы</td> <td> 15000</td> <td> 12000</td> <td>14000 </td>

<td> 13.500</td>

</tr>

<tr>

<td>Расходы </td> <td>10000 </td> <td>8000 </td> <td>11000 </td>

<td>8.500 </td>

</tr>

</table>

!!! Для задания пустой ячейки между ее тегами помещается код: <td>&nbsp</td>

Заголовок

Элемент <caption> задает название таблицы. Внутри может быть любая разметка, например, ссылки. По умолчанию, заголовок отображается над таблицей. Используя атрибут align (возможные значекния - top и bottom), можно вывести название под таблицей:

<caption align= " bottom " >Годовой отчет</caption>

Строки

У элементов строк может быть два атрибута:

align (возможные значения: left, right, center) – для выравнивания текста по горизонтали;

valign (возможные значения: top, bottom, center) - для выравнивания текста по вертикали.

Ячейки

В ячейках таблицы можно использовать атрибуты align и valign.

Иногда требуется сделать так, чтобы две или более ячеек имели общую границу и вели себя как одна ячейка. Для этого используются два атрибута: colspan и rowspan. Первый из них задает охват по горизонтали, другой − по вертикали.

Пример

В предыдущей таблице вместо строки

<tr>

<td> Доходы</td> <td> 15000</td> <td> 12000</td> <td>14000 </td>

<td> 13.500</td>

</tr>

напишем строку

<tr> <td> Доходы</td> <td colspan="2">15000</td> <td>14000 </td>

<td> 13.500</td>

</tr>

Параметр "2" указывает растянуть ячейку 15000 на две колонки. На экране увидим:

Рис. 1