Атрибут bgcolor тега <th> — колір тла комірки заголовка

HTML

<p><b>Приклад використання атрибута "bgcolor"</b></p>
<table>
<caption>Графік роботи</caption>
<thead>
  <tr>
    <th bgcolor="red">День тиждня</th>
    <th bgcolor="#7FFFD4">Роботчий час</th>
    <th   bgcolor="rgb(100, 125, 255)" >Обідня перерва</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,th,td{
  border: 1px solid grey;
  text-align:center;
} 

td{
   padding:10px;
}
th,td{
   padding:10px;
}
caption{
  font-size:20px;
}

HTML

<p>З використанням атрибуту bgcolor</p>
<table > 
		<caption>Таблиця товарів</caption> 
  <tr  >
			<th  id="a">Фрукти</th>
			<th id="b">Овочі</th> 
			<th id="b1">Ягоди</th>
		</tr> 
		<tr > 
			<td>Апельсин</td>
			<td >Гарбуз</td>
			<td >Чорниця</td>
		</tr>
	</table> 
<br>
<input type="color" name="" id="a1"><br><br>
<input type="button" onclick="func()" value="Змінити колір">

CSS

table{

  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;
}

JS

function func() {
  a.setAttribute('bgcolor', document.getElementById("a1").value);
  b.setAttribute('bgcolor', document.getElementById("a1").value);
  b1.setAttribute('bgcolor', document.getElementById("a1").value);
}
//# sourceURL=pen.js

HTML

<table>
    <caption>Що намалює атрибут із різних значень</caption>
    <tr>
        <th bgcolor="red">red</th>
        <th bgcolor="#00ff00">#00ff00</th>
        <th bgcolor="ff0000">ff0000</th>
        <th bgcolor="notacolor">notacolor</th>
        <th bgcolor="chucknorris">chucknorris</th>
        <th bgcolor="rgba(0,0,0,.5)">rgba(0,0,0,.5)</th>
        <th>без атрибута</th>
    </tr>
</table>

<table bgcolor="#dfe8ff">
    <caption>Перевага: комірка над рядком, рядок над таблицею, стилі над усіма</caption>
    <tr bgcolor="#ffe9b0">
        <th>фон рядка</th>
        <th bgcolor="#c8f0c8">власний bgcolor комірки</th>
        <th bgcolor="red" class="css">bgcolor="red" плюс правило в стилях</th>
    </tr>
    <tr>
        <td>фон таблиці</td>
        <td>фон таблиці</td>
        <td>фон таблиці</td>
    </tr>
</table>

<table class="today">
    <caption>Сучасно: жодного bgcolor, смужки одним правилом</caption>
    <tr><th>Місто</th><th>2001</th><th>2021</th></tr>
    <tr><td>Київ</td><td>2 611 000</td><td>2 952 000</td></tr>
    <tr><td>Львів</td><td>725 000</td><td>717 000</td></tr>
    <tr><td>Одеса</td><td>1 029 000</td><td>1 010 000</td></tr>
    <tr><td>Харків</td><td>1 470 000</td><td>1 433 000</td></tr>
</table>

CSS

table {
    margin-bottom: 24px;
    border-collapse: collapse;
}

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

td,
th {
    padding: 6px 10px;
    border: 1px solid #7d8fa6;
    font-size: .95em;
}

.css {
    background-color: #2f6fd0;
    color: #fff;
}

.today th {
    background-color: #1b4f9c;
    color: #fff;
    text-align: left;
}

.today tr:nth-child(even) td {
    background-color: #eef3fb;
}