JSFiddle - React, Tailwind, and code Playground

by eleonore

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Цветные колонки в таблице</title>
    </head>

<body>
<table cellpadding="4" cellspacing="0" border="1">
<tr>
<th>Название</th><th>Цвет</th><th>Твердость по Моосу</th><th>Формула</th>
</tr>
<tr>
<td>Алмаз</td><td>Белый</td><td>10</td><td>C</td>
</tr>
<tr>
<td>Рубин</td><td>Красный</td><td>9</td><td>Аl<sub>2</sub>O<sub>3</sub></td>
</tr>
<tr>
<td>Аметист</td><td>Голубой</td><td>7</td><td>SiO<sub>2</sub></td>
</tr>
<tr>
<td>Изумруд</td><td>Зеленый</td><td>8</td><td>Be<sub>3</sub>Al<sub>2</sub>(SiO<sub>3</sub>)<sub>6</sub></td>
</tr>
<tr>
<td>Сапфир</td><td>Голубой</td><td>9</td><td>Al<sub>2</sub>O<sub>3</sub></td>
</tr>
</table>
</body>
</html>

CSS

table{background:#00D5D5; border:1px solid #000; border-collapse:collapse;}
th{background:#666; color:#FFF; border:1px solid #000;text-align:left;padding:5px;}
td{border:1px solid #000;padding:5px;}
td:nth-child(even){background:#F5FD60;}
td:nth-child(3){text-align:center;}