Заголовок к таблице, ячейки-заголовки
К таблице можно добавить заголовок (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>
Это будет выглядеть так:
|
Как видите, размер достаточно указать только для одной ячейки в столбце, все остальные станут того же размера автоматически.