| 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.9 em; /* Розмір тексту */
}
</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>