Атрибут bgcolor тега <td> — колір тла комірки таблиці

HTML

<p>З використанням атрибуту bgcolor</p>
<table > 
		<caption>Таблиця товарів</caption> 
  <tr  >
			<th>Фрукти</th>
			<th>Овочі</th> 
			<th>Ягоди</th>
		</tr> 
		<tr > 
			<td id="a">Апельсин</td>
			<td id="b">Гарбуз</td>
			<td id="b1">Чорниця</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

<p><b>Приклад використання атрибута "bgcolor"</b></p>
<table>
<caption>Графік роботи</caption>
<thead>
  <tr>
    <th>День тиждня</th>
    <th>Роботчий час</th>
    <th>Обідня перерва</th>
  </tr>
</thead>
<tr>
  <td bgcolor="red">Понеділок</td>
  <td bgcolor="red">8:00 - 16:00</td>
  <td bgcolor="red">12:00 - 13:00</td>
</tr> 
<tr>
  <td>Вівторок</td>
  <td>9:00 - 17:00</td>
  <td>13:00 - 14:00</td>
</tr>
<tr>
  <td bgcolor="#7FFFD4">Середа</td>
  <td bgcolor="#7FFFD4">11:00 - 19:00</td>
  <td bgcolor="#7FFFD4">15:00 - 16:00</td>
</tr> 
<tr>
  <td>Четверг</td>
  <td>9:00 - 18:00</td>
  <td>13:30 - 14:30</td>
</tr> 
<tr>
  <td bgcolor="#6495ED">П'ятниця</td>
  <td bgcolor="#6495ED">9:00 - 13:00</td>
  <td bgcolor="#6495ED">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

<table class="attr">
    <caption>Атрибут bgcolor — і його дивовижний розбір значень</caption>
    <tr bgcolor="#dfe7f3">
        <th>Запис у розмітці</th>
        <th>Що виходить</th>
    </tr>
    <tr>
        <td>bgcolor="gold"</td>
        <td bgcolor="gold">назва кольору — очікувано</td>
    </tr>
    <tr>
        <td>bgcolor="123456"</td>
        <td bgcolor="123456" class="light">ґратку загублено, а колір той самий</td>
    </tr>
    <tr>
        <td>bgcolor="chucknorris"</td>
        <td bgcolor="chucknorris" class="light">не колір, але темно-червоний</td>
    </tr>
    <tr>
        <td>bgcolor="rgb(1,2,3)"</td>
        <td bgcolor="rgb(1,2,3)" class="light">запис із CSS тут не працює</td>
    </tr>
    <tr>
        <td>bgcolor="gold" + правило в CSS</td>
        <td bgcolor="gold" class="css-wins">виграє CSS</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>
    <tr><td>Одеса</td><td>1 010 000</td></tr>
    <tr><td>Харків</td><td>1 421 000</td></tr>
</table>

CSS

table {
    width: 420px;
    margin-bottom: 22px;
    border-collapse: collapse;
}

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

td,
th {
    padding: 6px 9px;
    border: 1px solid #b9c6d8;
}

.attr td:first-child {
    font-family: ui-monospace, monospace;
    font-size: .9em;
}

.light {
    color: #fff;
}

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

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

.css td:last-child {
    background-color: #fdf6e3;
    text-align: right;
}

.css tr:hover td {
    background-color: #d9ead3;
}