Таблицы. Основным тегом для обозначения таблицы является <table>

Основным тегом для обозначения таблицы является <table>. Элемент TABLE представляет собой тэг-контейнер, в котором размещается содержимое таблицы. Построение таблицы осуществляется по строкам, для обозначения которых применяется контейнер TR. Внутри контейнера строк помещаются контейнеры для обозначения ячеек. Стандарт HTML определяет два типа контейнеров для обозначения ячеек <th> и <td>. Первый предназначен для обозначения заголовков, а второй для данных в ячейках. Отличие этих двух элементов заключается лишь в том как их содержимое отображается браузером, заголовки большинство браузеров выделяют полужирным шрифтом и центрируют в своих ячейках. Ячейка данных может содержать текст, изображения, списки, параграфы и т. д.

<html> <body><h1>Две строки и три столбца:</h1><table border="1"><tr> <td>1.1</td> <td>1.2</td> <td>1.3</td></tr><tr> <td>2.1</td> <td>2.2</td> <td>2.3</td></tr></table></body> </html>

Для тега table определены следующие аттрибуты.

· align - определяет способ горизонтального выравнивания таблицы на странице. Возможные значения: left, center, right. Значение по умолчанию - left.

· valign - должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle.

· border - определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет.

· cellpadding - определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.

· cellspacing - определяет расстояние (в пикселах) между границами соседних ячеек.

· width - определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.

· height - определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.

· bgcolor - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

· background - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.

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

Для тегов <td> и <th> очень полезными являются атрибуты colspan и rowspan. Первый показывает сколько ячеек надо объединить по горизонтали, а второй по вертикали. Следует заметить, что если мы применяем объединение ячеек, то общее число ячеек с учетом объединенных должно быть равным.

Пример: Регулирование толщины рамки

<html> <body><h1>Толстая рамка:</h1> <table border="10"><tr> <td>Первая</td> <td>строка</td></tr> <tr> <td>Вторая </td> <td>строка</td></tr></table></body> </html>

Пример: Заголовки в таблице

<html> <body><h4>Заголовки таблицы:</h4><table border="1"><tr> <th>Имя </th> <th>Телефон </th> <th>Телефон </th></tr><tr> <td>Калиткин</td> <td>202 55 55 </td> <td>456 77 84 </td></tr></table></body> </html>

Пример: Заглавие таблицы

<html> <body><table border="6"><caption>Заглавие</caption><tr> <td>100</td> <td>200</td> <td>300</td></tr><tr> <td>400</td> <td>500</td> <td>600</td></tr></table></body> </html>

Пример: Расстояние между ячейками

<html> <body><table border="1" cellspacing="10"><tr> <td>Первая </td> <td>Строка</td></tr> <tr> <td>Вторая </td> <td>Строка </td></tr></table></body> </html>

Пример: Объединенные ячейки таблицы

<html> <body><h4>Ячейка в два столбца:</h4><table border="1"><tr> <th>Организация</th> <th colspan="2">Телефон</th> </tr> <tr> <td> VOLVO </td> <td>253-9312</td> <td>253-9313</td> </tr></table><h4>Ячейка в две строки:</h4><table border="1"><tr> <th>Организация:</th> <td> VOLVO </td> </tr><tr> <th rowspan="2">Телефон:</th> <td>253-9312</td> </tr><tr> <td>253-9313</td> </tr></table></body> </html>

Пример: Теги внутри таблицы

<html> <body><table border="1"><tr> <td> <p>Это параграф </p> <p>Это другой параграф </p> </td> <td>Эта ячейка содержит таблицу: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td></tr><tr> <td>Эта ячейка содержит список <ul> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ul> </td> <td>КОНЕЦ</td></tr></table></body> </html>

Контрольные вопросы

1. Каким образом указывается стиль нумерации в нумерованных и ненумерованных списках?

2. Каково назначение параметров width и height?