Атрибут background тега <table> — фонове зображення
Використовується для встановлення URL-адреси зображення яке буде встановлено на фон таблиці. На відміну від звичайних зображень, для фону не встановлюються ширина і висота, і воно завжди відображається в натуральну величину з масштабом 100%. Якщо малюнок за розміром менше ширини або висоти таблиці, то картинка повторюється по горизонталі вправо і вниз, шикуючись як мозаїка. З цієї причини на місці стику фонових картинок можуть виникнути видимі перепади, помітні для відвідувачів сайту.
автор: с3с
Загальний опис
автор: NagarD
- Порада
-
Даний атрибут застарів, рекомендуємо встановлювати фонове зображення за допомогою CSS стилю -
автор: с3сbackgroundабоbackground-image - Порада
-
При виборі шпалер переконайтеся, що забезпечений достатній контраст між ним і вмістом таблиці.
автор: с3с - Порада
-
Атрибут не розповсюджується на теґ заголовка таблиці
автор: с3с<caption> - Нотатка
-
В якості фону також допускається використовувати анімовані зображення у форматі GIF, але вони відволікають увагу читачів.
автор: с3с
Синтаксис
<table background="URL">...</table>Атрибут background може отримувати єдине значення:
-
URL -
Адреса зображення - можна використовувати відносний або абсолютний шлях.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | ≤4 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута background теґа <table>
Якщо ви не бачити тексту таблиці через малюнки обновіть сторінку.
HTML
<table background="https://picsum.photos/250/100">
<caption><p>З використанням атрибуту background</p><hr>Графік роботи</caption>
<thead>
<tr>
<th>День тиждня</th>
<th>Роботчий час</th>
<th>Обідня перерва</th>
</tr>
</thead>
<tr>
<td>Понеділок</td>
<td>8:00 - 16:00</td>
<td>12:00 - 13:00</td>
</tr>
<tr>
<td>Вівторок</td>
<td>9:00 - 17:00</td>
<td>13:00 - 14:00</td>
</tr>
<tr>
<td>Середа</td>
<td>11:00 - 19:00</td>
<td>15:00 - 16:00</td>
</tr>
<tr>
<td>Четверг</td>
<td>9:00 - 18:00</td>
<td>13:30 - 14:30</td>
</tr>
<tr>
<td>П'ятниця</td>
<td>9:00 - 13:00</td>
<td>12:00 - 13:30</td>
</tr>
</table>
<table>
<caption><p>Без використання атрибуту background</p><hr>Графік роботи</caption>
<thead>
<tr>
<th>День тиждня</th>
<th>Роботчий час</th>
<th>Обідня перерва</th>
</tr>
</thead>
<tr>
<td>Понеділок</td>
<td>8:00 - 16:00</td>
<td>12:00 - 13:00</td>
</tr>
<tr>
<td>Вівторок</td>
<td>9:00 - 17:00</td>
<td>13:00 - 14:00</td>
</tr>
<tr>
<td>Середа</td>
<td>11:00 - 19:00</td>
<td>15:00 - 16:00</td>
</tr>
<tr>
<td>Четверг</td>
<td>9:00 - 18:00</td>
<td>13:30 - 14:30</td>
</tr>
<tr>
<td>П'ятниця</td>
<td>9:00 - 13:00</td>
<td>12:00 - 13:30</td>
</tr>
</table>CSS
table{
width:500px;
height:200px;
margin-left:5px;
float:left;
}
table,th,td{
border: 1px solid grey;
text-align:center;
}
th,td{
background:#ffffffc5;
padding:10px;
}
caption{
font-size:20px;
color:blue;
}Перша таблиця розфарбована атрибутом background: плитка лягає в натуральну величину й повторюється мозаїкою. Друга бере те саме зображення через CSS, де background-size: cover розтягує його на всю таблицю, а background-repeat вимикає повтор. У третьої є і атрибут, і правило CSS — атрибут програє, і зображення немає взагалі. Зображення вбудоване як SVG у data:-адресу, зовнішніх файлів приклад не потребує.
HTML
<h4>1. Атрибут background — мозаїка в натуральну величину</h4>
<table background="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='60'%3E%3Crect%20width='60'%20height='60'%20fill='%23fdf0d5'/%3E%3Ccircle%20cx='30'%20cy='30'%20r='18'%20fill='%23d9c39a'/%3E%3C/svg%3E">
<tr><th>Місто</th><th>Область</th></tr>
<tr><td>Львів</td><td>Львівська</td></tr>
<tr><td>Полтава</td><td>Полтавська</td></tr>
</table>
<h4>2. Те саме через CSS — розмір і повтор під контролем</h4>
<table class="via-css">
<tr><th>Місто</th><th>Область</th></tr>
<tr><td>Львів</td><td>Львівська</td></tr>
<tr><td>Полтава</td><td>Полтавська</td></tr>
</table>
<h4>3. Є і атрибут, і CSS — атрибут програє</h4>
<table class="overridden" background="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='60'%3E%3Crect%20width='60'%20height='60'%20fill='%23fdf0d5'/%3E%3Ccircle%20cx='30'%20cy='30'%20r='18'%20fill='%23d9c39a'/%3E%3C/svg%3E">
<tr><th>Місто</th><th>Область</th></tr>
<tr><td>Львів</td><td>Львівська</td></tr>
<tr><td>Полтава</td><td>Полтавська</td></tr>
</table>CSS
h4 { margin: 1em 0 .3em; }
table { border-collapse: collapse; width: 100%; margin-bottom: 1em; }
td, th { border: 1px solid #999; padding: .55em .8em; }
th { background-color: rgba(255, 255, 255, .8); }
.via-css {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='60'%3E%3Crect%20width='60'%20height='60'%20fill='%23fdf0d5'/%3E%3Ccircle%20cx='30'%20cy='30'%20r='18'%20fill='%23d9c39a'/%3E%3C/svg%3E");
background-size: cover;
background-repeat: no-repeat;
}
.overridden { background-image: none; background-color: #eef4fb; }Різниця між HTML 4.01 та HTML5
Цей атрибут не підтримується в HTML5
Різниця між XHTML та HTML
В XHTML 1.0,XHTML 1.1 не рекомендований до використання.
Коментарі
Коментарів ще немає — будьте першим!