JSFiddle - React, Tailwind, and code Playground

by Nonamenonamevi4

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Объединение ячеек таблицы</title>
</head>
<body>
  <table>
    <caption>Добыча драгоценных камней</caption>
    <tr>
      <th></th>
      <th>2010</th>
      <th>2012</th>
      <th>2014</th>
    </tr>
    <tr>
      <td>Сапфиры</td>
      <td rowspan="2">1483</td>
      <td>4532</td>
      <td>6743</td>
    </tr>
    <tr>
      <td>Рубины</td>
      <td>3835</td>
      <td>7483</td>
    </tr>
    <tr>
      <td>Алмазы</td>
      <td>683</td>
      <td colspan="2">238</td>
    </tr>
  </table>
</body>
</html>

CSS

table {
  border: 1px solid black;
  width: 80%;
}

th, td {
  border: 1px solid black;
}

td[colspan="2"] {
  text-align: center;
}