Атрибут bgcolor тега <tfoot> — колір тла підвалу таблиці

автор: с3с

Загальний опис

автор: NagarD

Синтаксис

<tfoot bgcolor="color">...</tfoot>

Атрибут bgcolor може отримувати єдине значення:

color

Колір комірок

автор: с3с

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
	1	1	1	≤15	12	≤11

Підтримка: мобільні переглядачі
Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

Сім однакових таблиць, різниця лише в значенні bgcolor у підсумковому рядку. Другий блок показує головну пастку: усе, що браузер не зрозумів, стає чорним, а не лишається без кольору. Третій — різницю синтаксисів: той самий запис #f0f0 в атрибуті й у CSS дає різні кольори. Наприкінці — сучасна заливка й приклад того, як звичайне правило для комірок з'їдає заливку секції.

HTML

<p class="head">1. Значення, які браузер зрозумів</p>
<table>
  <caption>bgcolor="#ffcc00"</caption>
  <thead><tr><th>Товар</th><th>Сума</th></tr></thead>
  <tbody><tr><td>Олівець</td><td>7,50</td></tr></tbody>
  <tfoot bgcolor="#ffcc00"><tr><td>Разом</td><td>7,50</td></tr></tfoot>
</table>

<table>
  <caption>bgcolor="ffcc00" — без решітки теж працює</caption>
  <thead><tr><th>Товар</th><th>Сума</th></tr></thead>
  <tbody><tr><td>Олівець</td><td>7,50</td></tr></tbody>
  <tfoot bgcolor="ffcc00"><tr><td>Разом</td><td>7,50</td></tr></tfoot>
</table>

<p class="head">2. Пастка: усе незрозуміле стає чорним</p>
<table class="bad">
  <caption>bgcolor="zzzz"</caption>
  <thead><tr><th>Товар</th><th>Сума</th></tr></thead>
  <tbody><tr><td>Олівець</td><td>7,50</td></tr></tbody>
  <tfoot bgcolor="zzzz"><tr><td>Разом</td><td>7,50</td></tr></tfoot>
</table>

<table class="bad">
  <caption>bgcolor="чорний" — слово, якого не існує</caption>
  <thead><tr><th>Товар</th><th>Сума</th></tr></thead>
  <tbody><tr><td>Олівець</td><td>7,50</td></tr></tbody>
  <tfoot bgcolor="чорний"><tr><td>Разом</td><td>7,50</td></tr></tfoot>
</table>

<p class="head">3. Той самий запис в атрибуті й у CSS означає різне</p>
<table class="bad">
  <caption>bgcolor="rgb(200,0,0)" — не червоний, а бруд</caption>
  <thead><tr><th>Товар</th><th>Сума</th></tr></thead>
  <tbody><tr><td>Олівець</td><td>7,50</td></tr></tbody>
  <tfoot bgcolor="rgb(200,0,0)"><tr><td>Разом</td><td>7,50</td></tr></tfoot>
</table>

<table class="bad">
  <caption>bgcolor="#f0f0" — тут жовто-зелений, а в CSS це прозорий пурпуровий</caption>
  <thead><tr><th>Товар</th><th>Сума</th></tr></thead>
  <tbody><tr><td>Олівець</td><td>7,50</td></tr></tbody>
  <tfoot bgcolor="#f0f0"><tr><td>Разом</td><td>7,50</td></tr></tfoot>
</table>
<p class="note">А ось той самий запис у CSS —
   <span class="cssColor">background-color: #f0f0</span> — смужка є, кольору немає.</p>

<p class="head">4. Звичайне правило для комірок з'їдає заливку секції</p>
<table class="komirky">
  <caption>bgcolor="#ffcc00" на tfoot, але в стилях td { background: #fff }</caption>
  <thead><tr><th>Товар</th><th>Сума</th></tr></thead>
  <tbody><tr><td>Олівець</td><td>7,50</td></tr></tbody>
  <tfoot bgcolor="#ffcc00"><tr><td>Разом</td><td>7,50</td></tr></tfoot>
</table>

<p class="head">5. Сучасно</p>
<table class="suchasno">
  <caption>tfoot { background-color: #ffcc00 } у стилях</caption>
  <thead><tr><th>Товар</th><th>Сума</th></tr></thead>
  <tbody><tr><td>Олівець</td><td>7,50</td></tr></tbody>
  <tfoot><tr><td>Разом</td><td>7,50</td></tr></tfoot>
</table>

CSS

.head {
    margin: 20px 0 8px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

table {
    width: 100%;
    max-width: 460px;
    margin-bottom: 18px;
    border-collapse: collapse;
}

caption {
    margin-bottom: 5px;
    font-weight: 600;
    text-align: left;
}

td,
th {
    padding: 5px 10px;
    border: 1px solid #b9c6d8;
    text-align: left;
}

thead th {
    background: #eef3fb;
}

.bad caption {
    color: #c0392b;
}

.bad {
    outline: 2px dashed #d64545;
    outline-offset: 3px;
}

/* через це правило заливка секції зникає повністю */
.komirky td {
    background: #ffffff;
}

.komirky caption {
    color: #1b4f9c;
}

.suchasno tfoot {
    background-color: #ffcc00;
}

.suchasno caption {
    color: #1b5e20;
}

.cssColor {
    display: inline-block;
    width: 160px;
    padding: 0 6px;
    border: 1px solid #b9c6d8;
    background-color: #f0f0;
    font: .85em/1.8 ui-monospace, monospace;
}

.note {
    max-width: 460px;
    margin: 0 0 18px;
    color: #5a6472;
    font-size: .9em;
}

автор: NagarD

Найпростіший приклад використання HTML атрибута bgcolor теґа <tfoot>

HTML

<p>З використанням атрибуту bgcolor</p>
<table border="0" cellpadding="5" cellspacing="3">
<tbody >
<tr>
<th colspan="4">
Транспорт України
</th>
</tr>
<tr>
<th colspan="2">Автомобілі</th>
<th colspan="2">Літаки</th>
</tr>
</tbody>
<tbody align="left" >
<tr>
<td>ZAZ Vida</td>
<td>ZAZ Forza</td>
<td>Ан-77</td>
<td>Ан-24</td>
</tr>
<tr>
<td>ZAZ Lanos</td>
<td>ZAZ Sens</td>
<td>ХАЗ-30</td>
<td>Aeroprakt A-22</td>
</tr>
</tbody>
<tfoot id="a">
<tr>
<th colspan="4">
Кількість (шт.)
</th>
</tr>
<tr>
<th colspan="2">35</th>
<th colspan="2">40</th>
</tr>
</tfoot>
 </table>
<br>
<input type="color" name="" id="a1"><br><br>
<input type="button" onclick="func()" value="Змінити колір">

CSS

table{
   width:50%;
  text-align:center;
} 

th{
   padding:20px;
    border: 1px solid grey;
  text-align:center;
}
th,td{
   padding:20px;
    border: 1px solid grey;
}
caption{
  font-size:20px;
}

function func() {
  a.setAttribute('bgcolor', document.getElementById("a1").value);

}
//# sourceURL=pen.js

автор: с3с

Найпростіший приклад використання HTML атрибута bgcolor теґа <tfoot>

HTML

<p>З використанням атрибуту bgcolor</p>
<table border="0" cellpadding="5" cellspacing="3">
<tbody >
<tr>
<th colspan="4">
Транспорт України
</th>
</tr>
<tr>
<th colspan="2">Автомобілі</th>
<th colspan="2">Літаки</th>
</tr>
</tbody>
<tbody align="left" >
<tr>
<td>ZAZ Vida</td>
<td>ZAZ Forza</td>
<td>Ан-77</td>
<td>Ан-24</td>
</tr>
<tr>
<td>ZAZ Lanos</td>
<td>ZAZ Sens</td>
<td>ХАЗ-30</td>
<td>Aeroprakt A-22</td>
</tr>
</tbody>

<tfoot bgcolor="orange">
<tr>
<th colspan="4">
Кількість (шт.)
</th>
</tr>
<tr>
<th colspan="2">35</th>
<th colspan="2">40</th>
</tr>
</tfoot>
 </table>
<br>
<p>Без використання атрибуту bgcolor</p>
<table border="0" cellpadding="5" cellspacing="3">
<tbody >
<tr>
<th colspan="4">
Транспорт України
</th>
</tr>
<tr>
<th colspan="2">Автомобілі</th>
<th colspan="2">Літаки</th>
</tr>
</tbody>
<tbody align="left" >
<tr>
<td>ZAZ Vida</td>
<td>ZAZ Forza</td>
<td>Ан-77</td>
<td>Ан-24</td>
</tr>
<tr>
<td>ZAZ Lanos</td>
<td>ZAZ Sens</td>
<td>ХАЗ-30</td>
<td>Aeroprakt A-22</td>
</tr>
</tbody>

<tfoot>
<tr>
<th colspan="4">
Кількість (шт.)
</th>
</tr>
<tr>
<th colspan="2">35</th>
<th colspan="2">40</th>
</tr>
</tfoot>
 </table>

CSS

table{
   width:30%;
} 

th{
   padding:10px;
    border: 1px solid grey;
}
th,td{
   padding:10px;
    border: 1px solid grey;
}
caption{
  font-size:10px;
}

автор: с3с

Різниця між HTML 4.01 та HTML5

Атрибут bgcolor тега <tfoot> більше не підртимується в HTML5. Використовуйте CSS властивість background-color.

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Ваше ім'я Коментар

Як форматувати текст?

Пишемо	Виходить
`важливо` `акцент` `~~застаріле~~`	Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
`## Як працює каскад` `### Порядок оголошень`	Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
`[[css/property/color]]`	Посилання на сторінку довідника. Наберіть `[[` — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
`[[!sandbox/S0oh1hBm]]`	Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком `!`: наберіть `[[!` і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
`[MDN](https://developer.mozilla.org)`	Посилання на чужий сайт.
`![Схема каскаду](https://site.com/схема.png)`	Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру	Код усередині речення.
```css `.card { display: grid }` ```	Код блоком. Мова після трьох лапок вмикає підсвітку.
`- Походження` `1. Походження`	Перелік: маркований і нумерований.
`- [ ] дописати приклади` `- [x] перевірити в Firefox`	Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
`> Порядок важить лише за рівної ваги.`	Цитата на всю ширину абзацу.
`Специфічність` `: вага селектора; більша перемагає`	Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
`Каскад має три критерії[^1]` `[^1]: Походження, специфічність, порядок.`	Виноска: номер у тексті, примітка внизу сторінки. Без згадки `[^1]` у тексті примітка не з'явиться.
`Відповідь: \|\|сорок два\|\|`	Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
`\|\| Показати рішення` Задайте контейнеру `display: grid`. `\|\|`	Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок	Новий абзац. Щоб перенести рядок усередині абзацу, поставте `\` в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.