3.1. Создание простейших таблиц в HTML-документах

ГЛАВА 3. ТАБЛИЦЫ

Таблицы обеспечивают важную часть в представлении информации. Разделение данных на столбцы и строки имеет широкое применение в практике оформления текстовых документов. Не являются исключением из этого правила и HTML-документы, которые имеют специальный тег <table> для создания таблиц.

В HTML-документах таблицы применяют не только для представления табличных данных, но и для создания разметки HTML-страницы. Например, многие страницы сайта имеют «шапку» (верхняя часть страницы), непосредственно информацию и «подвал» (нижняя часть страницы). Для разбивки HTML-документа на эти составные части хорошо подходят таблицы, у которых скрывается рамка и визуально создается впечатление единства всех составляющих частей. Таблицы удобны для создания разнообразного разбиения, т.к. ячейки таблицы могут содержать в себе и другие таблицы. В результате Web-мастеру не составляет большого труда организовать требуемую структуру документа и, затем, наполнить ее необходимым содержимым.

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

3.1. Создание простейших таблиц в HTML-документах

Создание таблицы в HTML-документе начинается с тега <table> и заканчивается закрывающим тегом </table>. Таблицы всегда должны располагаться в разделе <body> документа. За тегом <table> обычно следует тег <tr>, описывающий строку таблицы. Затем, внутри тега <tr> располагается либо тег <th>, описывающий ячейку-заголовок таблицы, либо (и чаще всего) тег <td>, описывающий ячейку с данными таблицы. По сути, тег <th> или <td> разбивают строку таблицы на ячейки. Если нужно создать две ячейки в строке, то соответственно внутри тега <tr> должно быть два тега <td> (или <th>). Число строк в таблице определяется числом тегов <tr> внутри текущей таблицы. При этом общее число таблиц в документе может быть произвольным. По умолчанию каждая строка таблицы <tr> должна содержать одинаковое число ячеек. Если данное условие не будет выполнено, то браузер автоматически добавит недостающее число ячеек и выровнит таблицу. Теги <tr>, <th> и <td> могут не иметь соответствующих закрывающих тегов, но их применение рекомендуется для лучшей ориентации Web-мастеру в структуре таблицы.

Приведем пример простой таблицы, содержащей список студентов с экзаменационными отметками по разным дисциплинам.

<html> <head> <title>Пример простой таблицы</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <table border=1> <tr> <th>Ф.И.О.</th> <th>Информатика</th> <th>Математика</th> <th>Физика</th> <th>Химия</th> </tr> <tr> <td>Иванов И.И.</td> <td>4</td> <td>3</td> <td>5</td> <td>4</td> </tr> <tr> <td>Петров П.П.</td> <td>3</td> <td>5</td> <td>4</td> <td>4</td> </tr> <tr> <td>Наместников С.М.</td> <td>5</td> <td>5</td> <td>5</td> <td>5</td> </tr> </table> </body> </html>

В приведенном примере у тега <table> использовался необязательным параметр border со значением 1, который задает толщину рамки вокруг таблицы. Данный параметр может принимать и большие значение: 2,3,…, однако толщина будет влиять только на рамку вокруг таблицы, на толщину рамки вокруг отдельных ячеек это не оказывает никакого влияния. Отличие составляет только значение border=0. В этом случае рамок ни вокруг таблицы, ни вокруг ячеек не будет.

Рис. 3.1. Пример отображения простой таблицы

Из приведенного примера видно, что текст в ячейках заголовка таблицы (заданных тегом <th>) выделены полужирным и выровнены по центру. Текст в ячейках данных (заданных тегом <td>) не выделен полужирным и выровнен по левому краю ячейки. Также следует отметить, что по умолчанию вертикальное выравнивание во всех ячейках таблицы выполняется по центру.

Тег <caption>

Таблица в HTML-документе может иметь описание, располагающееся в необязательном теге <caption>. Данный тег обязательно должен идти сразу после тега <table> и имеет необязательный параметр

align=left | right | top | bottom

для выравнивания заголовка таблицы по левому, правому краю таблицы, либо определяет способ вывода сверху или снизу таблицы. Если параметр align не задан, то он принимается равным top. Ниже представлены примеры использования тега <caption> с различным набором параметров.

 <table border=1> <caption>Список студентов</caption> … </table>  <table border=1> <caption align=bottom>Список студентов</caption> … </table>  <table border=1> <caption align=right>Список студентов</caption> … </table>

а)

б)

в)

Рис. 3.2. Примеры использования тега <caption> с различными свойствами параметра align.