Как выделить другим цветом первую строку таблицы?

🕛 22.01.2009, 23:43
Первая строка таблицы обычно используется для строки заголовка, в которой пишется наименования столбцов. Для акцентирования внимания на заголовке, строку выделяют другим фоном и цветом. С этой целью обычно применяется тег <TH>, который по своему действию похож на тег <TD>, при этом текст в ячейке выравнивается по ее центру и пишется жирным начертанием. Для селектора TH допустимо задать собственный стиль, определяющий оформления строки заголовка (пример 1).
Пример 1. Использование тега <TH>

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Строка заголовка</title> <style type="text/css"> TABLE { width: 100%; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойные линии между ячейками */ } TD, TH { padding: 4px; /* Поля в ячейках */ border: 1px solid #000080; /* Граница между ячейками */ } TH { background: #000080; /* Цвет фона строки заголовка */ color: #ffe; /* Цвет текста */ text-align: left; /* Выравнивание по левому краю */ font-family: Arial, Helvetica, sans-serif; /* Выбор гарнитуры */ font-size: 90%; /* Размер текста */ } </style> </head> <body> <table> <tr> <th>Изображение</th> <th>Цель</th> <th>Решение</th> </tr> <tr> <td>Фотография</td> <td>Просмотр</td> <td>Уменьшить до 600 пикселов по максимальной стороне. Формат JPEG.</td> </tr> <tr> <td>Фотография</td> <td>Печать</td> <td>Зависит от размера печатного оттиска. Для 10х15 см достаточно 1500 пикселов по максимальной стороне. Формат JPEG. </td> </tr> <tr> <td>Цветной документ</td> <td>Просмотр</td> <td>Уменьшить до 800 пикселов по максимальной стороне. Формат JPEG или GIF.</td> </tr> <tr> <td>Ч/б документ</td> <td>Просмотр</td> <td>Уменьшить до 800 пикселов по максимальной стороне. Формат TIFF или GIF.</td> </tr> </table> </body>
</html>Результат данного примера показан на рис. 1.



Рис. 1. Вид строки заголовка, оформленной с помощью стилей

Поскольку содержимое тега <TH> по умолчанию выравнивается по центру ячейки, для изменения выравнивания в примере 1 используется стилевой параметр text-align со значением left.

Еще один способ изменения вида строки заголовка состоит в применении тега <THEAD>, внутри которого располагается нужная строка таблицы. В свою очередь оформление строки задается путем добавления стилевых параметров к селектору THEAD, как показано в примере 2.

Пример 2. Использование тега <THEAD>

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Строка заголовка</title> <style type="text/css"> TABLE { width: 300px; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойные линии между ячейками */ } TD, TH { padding: 4px; /* Поля в ячейках */ border: 1px solid #999; /* Граница между ячейками */ } THEAD { background: #666; /* Цвет фона строки заголовка */ color: #fff; /* Цвет текста */ } </style> </head> <body> <table> <thead> <tr> <td>Место</td> <td>Оценка</td> <td>Фильм</td> <td>Год выпуска</td> </tr> </thead> <tr><td>1</td><td>9.1</td><td>Крестный отец</td><td>1972</td></tr> <tr><td>2</td><td>9.1</td><td>Побег из Шоушенка</td><td>1994</td></tr> <tr><td>3</td><td>9.0</td><td>Крестный отец 2</td><td>1974</td></tr> <tr><td>4</td><td>8.9</td><td>Хороший, плохой, злой</td><td>1966</td></tr> <tr><td>5</td><td>8.8</td><td>Криминальное чтиво</td><td>1994</td></tr> <tr><td>6</td><td>8.8</td><td>Список Шиндлера</td><td>1993</td></tr> <tr><td>7</td><td>8.8</td><td>Звездные войны: эпизод 5</td><td>1980</td></tr> <tr><td>8</td><td>8.8</td><td>Полет над гнездом кукушки</td><td>1975</td></tr> <tr><td>9</td><td>8.8</td><td>Касабланка</td><td>1942</td></tr> <tr><td>10</td><td>8.8</td><td>Семь самураев</td><td>1954</td></tr> </table> </body>
</html>