Справочник по CSS (ЦСС) и ШТМЛ
Как выделить другим цветом первую строку таблицы?
Первая строка таблицы обычно используется для строки заголовка, в которой пишется наименования столбцов. Для акцентирования внимания на заголовке, строку выделяют другим фоном и цветом. С этой целью обычно применяется тег <TH>, который по своему действию похож на тег <TD>, при этом контент в ячейке выравнивается по ее центру и пишется жирным начертанием. Для селектора TH допустимо задать собственный стиль, определяющий оформления строки заголовка (пример 1).
Пример 1. Использование тега <TH>
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01//EN" "http://www.w3.org/TR/ШТМЛ4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
<!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=utf-8">
<title>Строка заголовка</title>
<style type="text/CSS (ЦСС)">
TABLE {
width: 300px; /* Ширина таблицы */
border-collapse: collapse; /* Убираем двойные линии между ячейками */
}
TD, TH {
padding: 4px; /* Поля в ячейках */
border: 1px solid #000080; /* Граница между ячейками */
}
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>1072</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>