JSFiddle - React, Tailwind, and code Playground

by Kate Masiuk

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<table>
    <tr>
        <th><b>Название</b></th>
        <th><b>Цвет</b></th>
        <th><b>Твёрдость по Моосу</b></th>
        <th><b>Формула</b></th>
    </tr>
    <tr>
        <td>Алмаз</td>
        <td>Белый</td>
        <td>10</td>
        <td>C</td>
    </tr>
    <tr>
        <td>Рубин</td>
        <td>Красный</td>
        <td>9</td>
        <td>Al<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>

CSS

table {border-collapse: collapse;font: 16px/16px Times;}
td {border: 1px solid #000;padding: 4px;}
th {background: #777;color: #fff;border: 1px solid #000;padding: 4px;}
table td:nth-child(3){text-align: center;}
table td:nth-child(odd) {background: #7FD5B6;}
table td:nth-child(even) {background: #F2E85D;}