Атрибут background тега <th> — фон комірки таблиці
Атрибут background визначає зображення, яке буде використовуватися в якості фонового малюнка комірки таблиці. На відміну від звичайних зображень, для фону не встановлюються ширина і висота, і він завжди відображається в натуральну величину з масштабом 100%.
Якщо малюнок за розміром менше ширини або висоти комірки, то картинка повторюється по горизонталі вправо і вниз, шикуючись, як мозаїка. З цієї причини на місці стику фонових картинок можуть виникнути видимі перепади, помітні для відвідувачів сайту.
При виборі шпалер переконайтеся, що забезпечений достатній контраст між ним і вмістом осередку. В якості фону допускається використовувати анімовані зображення у форматі GIF, але вони відволікають увагу читачів.
автор: с3с
Загальний опис
автор: NagarD
Синтаксис
<th background="URL">Атрибут background може отримувати єдине значення:
-
URL -
Відносна або абсолютна адреса зображення.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | ≤4 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута background теґа <th>
HTML
<table>
<tr>
<th background="https://picsum.photos/400/100">Приклад з використанням атрибуту background</th>
<th>Приклад без використання атрибуту background</th>
</tr>
</table>CSS
table,th{
border: 1px solid grey;
text-align:center;
color:red;
}
th{
padding:20px;
}Дві таблиці з тим самим малюнком: у першій фон задано атрибутом background (плитка в натуральну величину, текст ледь читається), у другій — стилями з cover, no-repeat і напівпрозорим шаром поверх.
HTML
<table class="attr">
<caption>Атрибут background — плитка в натуральну величину</caption>
<tr>
<th background="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Crect width='18' height='18' fill='%23f6d9a0'/%3E%3Cpath d='M0 18L18 0' stroke='%23c0392b' stroke-width='3'/%3E%3C/svg%3E">Місто</th>
<th background="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Crect width='18' height='18' fill='%23f6d9a0'/%3E%3Cpath d='M0 18L18 0' stroke='%23c0392b' stroke-width='3'/%3E%3C/svg%3E">Населення</th>
</tr>
<tr><td>Київ</td><td>2 950 000</td></tr>
<tr><td>Львів</td><td>717 000</td></tr>
</table>
<table class="css">
<caption>Стилі — той самий малюнок під підкладкою й без плитки</caption>
<tr><th>Місто</th><th>Населення</th></tr>
<tr><td>Київ</td><td>2 950 000</td></tr>
<tr><td>Львів</td><td>717 000</td></tr>
</table>CSS
table {
width: 340px;
margin-bottom: 22px;
border-collapse: collapse;
}
caption {
margin-bottom: 6px;
font-weight: 600;
text-align: left;
}
td,
th {
padding: 8px;
border: 1px solid #b9c6d8;
}
.css th {
background-image:
linear-gradient(rgba(255, 255, 255, .78), rgba(255, 255, 255, .78)),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Crect width='18' height='18' fill='%23f6d9a0'/%3E%3Cpath d='M0 18L18 0' stroke='%23c0392b' stroke-width='3'/%3E%3C/svg%3E");
background-repeat: no-repeat, no-repeat;
background-position: center, center;
background-size: cover, cover;
}Різниця між HTML 4.01 та HTML5
Атрибут background для тега <th> не підтримується у HTML5. Використовуйте для цього CSS властивість background-image.
Коментарі
Коментарів ще немає — будьте першим!