Заголовок к таблице, ячейки-заголовки

К таблице можно добавить заголовок (caption), а также сформировать ячейки-заголовки (heading).

Команды <caption> и </caption> после команды <table> задают заголовок к таблице. По умолчанию заголовок центрируется относительно таблицы. При помощи атрибутов заголовок можно разместить следующим образом:

<caption valign=top> — разместить заголовок над таблицей (по умолчанию)

<caption valign=bottom> — разместить заголовок под таблицей

<caption align=left> — разместить заголовок слева

<caption align=right> — разместить заголовок справа

Задание ячейки-заголовка осуществляется при помощи команд <th> и </th>, содержимое таких ячеек по умолчанию центрируется и выводится жирным шрифтом.

В следующем примере построена таблица с заголовком, расположенным справа и ячейками-заголовками:

<table border=1>

<caption align=right>Математика и Информатика</caption>

<tr>

<th>Математика</th><th>Информатика</th>

</tr>

<tr>

<td>Теория вероятностей</td><td>Теория информации</td>

</tr>

<tr>

<td>Системное программирование</td><td>Искусственный интеллект</td>

</tr>

</table>

Что будет выглядеть как:

Математика и Информатика Математика Информатика Теория вероятностей Теория информации Системное программирование Искусственный интеллект

Цвет элементов таблицы

Атрибут bordercolor= устанавливает цвет рамки таблицы:

<table border=5 bordercolor=maroon>

<caption>Математика и Информатика</caption>

<tr>

<th>Математика</th><th>Информатика</th>

</tr>

<tr>

<td>Теория вероятностей</td><td>Теория информации</td>

</tr>

<tr>

<td>Системное программирование</td><td>Искусственный интеллект</td>

</tr>

</table>

Что будет выглядеть как:

Математика и Информатика Математика Информатика Теория вероятностей Теория информации Системное программирование Искусственный интеллект

Используя атрибут bgcolor= в командах <table>, <tr>, и <td> можно изменять цвет фона во всей таблице, в строке или в ячейке соответственно.

В следующем примере использовано задание одинакового цвета фона для заголовков столбцов и разное для ячеек таблицы:

<table border=1>

<tr bgcolor=yellow>

<th>Математика</th><th>Информатика</th>

</tr>

<tr>

<td bgcolor=lime>Теория вероятностей</td><td bgcolor=aqua>Теория информации</td>

</tr>

<tr>

<td bgcolor=lime>Системное программирование</td><td bgcolor=aqua>Искусственный интеллект</td>

</tr>

</table>

Что даст:

Математика Информатика Теория вероятностей Теория информации Системное программирование Искусственный интеллект

Отступы от границ ячейки

Атрибуты cellpadding= и cellspacing= определяют расстояние в пикселях между границей ячейки и ее содержимым и между ячейками соответственно.

Зададим в таблице отступ от границ, равный 10 пикселам:

<table border=1 cellpadding=10>

<tr bgcolor=yellow>

<th>Математика</th><th>Информатика</th>

</tr>

<tr>

<td bgcolor=lime>Теория вероятностей</td><td bgcolor=aqua>Теория информации</td>

</tr>

<tr>

<td bgcolor=lime>Системное программирование</td><td bgcolor=aqua>Искусственный интеллект</td>

</tr>

</table>

Сравните это с предыдущим примером:

Математика Информатика Теория вероятностей Теория информации Системное программирование Искусственный интеллект

Задание отступа между ячейками:

<table border=1 cellspacing=20>

<tr bgcolor=yellow>

<th>Математика</th><th>Информатика</th>

</tr>

<tr>

<td bgcolor=lime>Теория вероятностей</td><td bgcolor=aqua>Теория информации</td>

</tr>

<tr>

<td bgcolor=lime>Системное программирование</td><td bgcolor=aqua>Искусственный интеллект</td>

</tr>

</table>

В результате получится:

Математика Информатика Теория вероятностей Теория информации Системное программирование Искусственный интеллект

Задание размеров

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

Атрибут width= задает ширину таблицы (ячейки), а атрибут height= задает высоту. Причем, значениями этих атрибутов могут быть как пикселы, так и проценты (для таблицы — от ширины экрана, для ячейки — от ширины таблицы).

К примеру, создадим таблицу шириной 600 пикселов, в которой первый столбец составляет 30% от ширины таблицы:

<table border=1 width=600>

<tr>

<th width="30%">Математика</th><th>Информатика</th>

</tr>

<tr>

<td>Теория вероятностей</td><td>Теория информации</td>

</tr>

<tr>

<td>Системное программирование</td><td>Искусственный интеллект</td>

</tr>

</table>

Это будет выглядеть так:

Математика Информатика Теория вероятностей Теория информации Системное программирование Искусственный интеллект

Как видите, размер достаточно указать только для одной ячейки в столбце, все остальные станут того же размера автоматически.