www html, html уроки, html теги, css, верстка
статьи html уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > FAQ > Таблицы > Как выделить другим цветом первую строку таблицы?

Справочник по CSS (ЦСС) и ШТМЛ

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

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

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

Валидный HTML
Валидный CSS

<!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=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. Вид строки заголовка, оформленной с помощью стилей

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

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

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

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

Валидный HTML
Валидный CSS

<!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 #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>

Поиск по сайту




FAQ

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект