Как построить простую таблицу
У списков есть один недостаток — они одномерны. Это означает, что вы можете располагать информацию только на следующих друг за другом строках. Таблицы же позволяют располагать данные не только по строкам, но и по столбцам. У вас появляется гибкость двухмерной структуры для вывода информации на web-страницу.
Для формирования таблицы применяется целый ряд команд. Команды <table> и </table> обрамляют таблицу целиком, затем таблица делится на строки, а строки, в свою очередь, состоят из ячеек:
<tr> и </tr> (Table Row) — задание строки таблицы
<td> и </td> (Table Detail) — задание ячейки таблицы
Атрибут border= в команде задания таблицы <table> рисует рамку вокруг таблицы и каждой ячейки. Ширина рамки (бордюра) задается в пикселях.
Пример простой таблицы с рамкой шириной 1 пиксел:
<table border=1>
<tr>
<td>Теория вероятностей</td><td>Теория информации</td>
</tr>
<tr>
<td>Системное программирование</td><td>Искусственный интеллект</td>
</tr>
</table>
На экране это выглядит так:
|
Замечание. Если ячейка является пустой, вокруг нее рамка рисоваться не будет, поэтому в пустую ячейку в таблице следует помещать неразрывный пробел ( ).
Заголовок к таблице, ячейки-заголовки
К таблице можно добавить заголовок (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>Это будет выглядеть так:
|
Как видите, размер достаточно указать только для одной ячейки в столбце, все остальные станут того же размера автоматически.
Размещение содержимого в ячейках
Содержание каждой ячейки может быть размещено с помощью атрибутов align= (горизонтальное положение) и valign= (вертикальное положение) для команд <tr> или <td>.
Атрибут valign= может принимать следующие значения:
· valign=top — прижать вверх
· valign=bottom — прижать вниз
· valign=middle — разместить по центру
Атрибут align= может принимать следующие значения:
· align=left — прижать влево
· align=right — прижать вправо
· align=center — разместить по центру
Например:
<table border=1 cellpadding=10 width=400><tr><th>Математика</th><th>Информатика</th></tr><tr valign=bottom><td align=center>Теория вероятностей<br>и математическая статистика</td><td align=left>Теория информации</td></tr><tr><td align=right>Системное программирование</td><td>Искусственный интеллект</td></tr></table>В результате получится:
|
Создание сложных таблиц
Атрибуты colspan= и rowspan= команд <td>, <th> позволяют объединять ячейки таблицы в группы, вокруг которых рисуется рамка. Ячейки таблицы формируются построчно. Если ячейка охватывает более одной строки (атрибут rowspan=), то она размещается в соответствующих строках, расположенных под первой, автоматически, при этом дополнительной команды <td> для представления ее в этих строках не требуется. Атрибут colspan= позволяет объединить несколько столбцов.
Пример объединения двух столбцов:
<table border=1><tr><th colspan=2>Математика и Информатика</th></tr><tr><td>Теория вероятностей</td><td>Теория информации</td></tr><tr><td>Системное программирование</td><td>Искусственный интеллект</td></table>Что даст:
|
Пример объединения двух строк таблицы:
<table border=1><tr><th rowspan=2>Математика и Информатика</th><td align=center>Теория вероятностей<p>Теория информации</td></tr><tr><td align=center>Системное программирование<p>Искусственный интеллект</td></tr></table>Что даст:
|
Изменение шрифтов
Важное замечание. Если команды задания начертания (<i>, <b>) или команда изменения шрифта <font> используются в таблице, то они действуют только в пределах одной ячейки! То есть, нельзя, например, одной командой <i> установить курсив для содержимого нескольких ячеек сразу.
