Основы работы с XHTML и CSS


Тег <th>


Заголовки столбцов можно задавать, используя теги <th> вместо тегов <td>, ограничивающих содержимое ячейки. Тег <th> автоматически выравнивает по центру и делает полужирным вложенный текст. Для дополнительного форматирования можно задавать в тегах другие стили. Обратите внимание в следующем примере, что в таблицу стилей для границ, окружающих эти ячейки, добавлен селектор th.

Использование тега <th> для заголовков столбцов

Рис. 8.11.  Использование тега <th> для заголовков столбцов

<style type="text/css"> table {border:outset 3px; border-collapse:collapse} table td, th {border:inset 1px} table caption {font:bold 10pt arial} </style>

<table> <caption>This is My Table</caption> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>Cell 1.1</td> <td>Cell 1.2</td> <td>Cell 1.3</td> </tr> <tr> <td>Cell 2.1</td> <td>Cell 2.2</td> <td>Cell 2.3</td> </tr> <tr> <td>Cell 3.1</td> <td>Cell 3.2</td> <td>Cell 3.3</td> </tr> </table>

Листинг 8.15. Код для создания заголовков столбцов таблицы (html, txt)

Уникальность тега <th> состоит только в том, что он по умолчанию оформляет свое содержимое полужирным шрифтом и выравнивает по центру. Однако при использовании таблиц стилей этот тег становится избыточным, так как такое же оформление можно задать без применения этого специального тега. Следующая таблица повторяет предыдущую таблицу без тегов <th>, просто определяя и оформляя первую строку таблицы.

Создание заголовков столбцов с помощью оформления строки

Рис. 8.12.  Создание заголовков столбцов с помощью оформления строки

<style type="text/css"> table {border:outset 3px; border-collapse:collapse} table tr#HEAD {font:bold; text-align:center} table td {border:inset 1px} table caption {font:bold 10pt arial} </style>




Начало  Назад  Вперед



Книжный магазин