Размещение содержимого в ячейках

Как построить простую таблицу

У списков есть один недостаток — они одномерны. Это означает, что вы можете располагать информацию только на следующих друг за другом строках. Таблицы же позволяют располагать данные не только по строкам, но и по столбцам. У вас появляется гибкость двухмерной структуры для вывода информации на 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>

На экране это выглядит так:

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

Замечание. Если ячейка является пустой, вокруг нее рамка рисоваться не будет, поэтому в пустую ячейку в таблице следует помещать неразрывный пробел (&nbsp;).

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

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