Учебник CSS
Невозможно отучить людей изучать самые ненужные предметы.
Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3
Надо знать обо всем понемножку, но все о немногом.
Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы
Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)
Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода
Самоучитель CSS
Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5
Новости
Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости
Справочник CSS
Справочник от А до Я
HTML, CSS, JavaScript
Афоризмы
Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы
- 19 апрель 2023, 08:23
- 20 апрель 2024, 00:00
| Помогли мы вам |
- 19 апрель 2023, 08:23
- 15 март 2020, 12:20
Выделить другим цветом первую строку таблицы - «Таблицы»
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Изменить стиль заголовка таблицы.
Решение
Первая строка таблицы обычно используется для заголовка, в котором пишется наименования столбцов. Для акцентирования внимания на заголовке, строку выделяют другим фоном и цветом. С этой целью обычно применяется тег <th>, который по своему действию похож на тег <td>, при этом текст в ячейке выравнивается по ее центру и пишется жирным начертанием. Для селектора th допустимо задать собственный стиль, определяющий оформления строки заголовка (пример 1).
Пример 1. Использование тега <th>
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Строка заголовка</title>
<style>
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: 0.9em; /* Размер текста */
}
</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>
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Строка заголовка</title>
<style>
table {
width: 100%; /* Ширина таблицы */
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>Результат данного примера показан на рис. 2.
Рис. 2. Применение тега <thead>
|
|
|
|
АВТОРИЗАЦИЯ
|
• Мы информационный портал, на котором публикуются новости веб-дизайна и мелкие хитрости, а так же информация и советы которые вам смогут помочь по созданию сайтов, шаблонов, и многое другое. Вы также сможете найти интересные уроки по CSS3, HTML5, jQuery, Photoshop и и многое другое, интересное, с интернет мира. Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не хочется." «Самоучитель CSS » © Мы транслируем с 2006 года. Все для веб-дизайнера - CSS. Все материалы публикуют на сайте гости и пользователи сайта. Администрация сайта не несет ответственности за публикации. |
|