JSFiddle - React, Tailwind, and code Playground

by fersterin

HTML

<table>
  <caption>Таблица 3.2. Демонстрация катаболических 
     процессов оргнизма</caption> <!-- Подпись к таблице -->
     <colgroup>
       <col span="1" width="55" style="background-color: blue;"> <!-- Задает шириру первого столбца -->
       <col span="2" width="150">
     </colgroup>
     
  <thead> <!-- Блок заголовков таблицы -->
    <tr> <!-- Строка таблицы -->
      <th>Lorem.</th>
      <th>Earum.</th>
      <th>Earum.</th>
      <th>Earum.</th>
    </tr>
  </thead>
  <tbody> <!-- Тело таблицы -->
    <tr>
      <td>Lorem.</td>
      <td>Nihil.</td>
      <td>Nostrum!</td>
      <td>Nostrum!</td>
    </tr>
    <tr>
      <td>Lorem.</td>
      <td>Nihil.</td>
      <td>Nostrum!</td>
      <td>Nostrum!</td>
    </tr>
    <tr>
      <td>Lorem.</td>
      <td>Nihil.</td>
      <td>Nostrum!</td>
      <td>Nostrum!</td>
    </tr>
  </tbody>
  <tfoot> <!-- Нижний колонтикул таблицы -->
    <tr>
      <td>Lorem.</td>
      <td>Nihil.</td>
      <td>Nostrum!</td>
      <td>Nostrum!</td>
    </tr>
  </tfoot>
  
</table>

CSS

td {
  border: 1px solid black;
}
thead {
  background: lightgreen;
}
tfoot {
  background: yellow;
}
table {
  width: 100%; /* Если таблица 100%, но на последний элемент не действует col у которого задана ширина width. */
}
.wh {
  color: white;
}
tbody td {
  color: white;
}

th {
  background: cornsilk;
  border: solid 1px brown;
}

JavaScript

/* thead - для хранения одной или нескольких строк, которые представлены вверху таблицы */
/* th - для создавния заголовочной ячейки */