Основы работы с XHTML и CSS
Тег <th>
Заголовки столбцов можно задавать, используя теги <th> вместо тегов <td>, ограничивающих содержимое ячейки. Тег <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>
<table> <caption>This is My Table</caption> <tr id="HEAD"> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </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.16. Код для создания заголовков столбцов с помощью оформления строки (html, txt)
Контекстный селектор tr#HEAD td указывает оформление тегов td, которое появляется внутри тега tr с id="HEAD". Программист может выбрать использование тега th и его встроенного оформления или реализовать все оформление с помощью таблиц стилей. Как общее правило, чем меньше используется тегов, тем лучше.
