Как добавить небольшой текст в группу столбцов таблицы HTML?

Question

Вот чего я хочу достичь:

+----------+----------+----------+
| Header 1 | Header 2 | Header 3 |
+----------+----------+----------+
| Cell 11  | Cell 12  | Cell 13  |
|          | Small text here - 1 |
+----------+----------+----------+
| Cell 21  | Cell 22  | Cell 23  |
|          | Small text here - 2 |
+----------+----------+----------+

Как добавить небольшой текст, который занимает несколько столбцов под столбцами? Например, на приведенной выше иллюстрации таблицы текст «Мелкий текст здесь - 1» занимает несколько столбцов (ячейка 12 и ячейка 13) и отображается чуть ниже этих столбцов.

Answer 1

Хитрость заключается в том, чтобы понять, что первая строка фактически состоит из 2 строк, и сделать первый столбец перекрывающим эти 2 строки.

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  text-align: center;
  padding: 5px;
}

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td rowspan="2">Cell 11</td>
    <td>Cell 12</td>
    <td>Cell 13</td>
  </tr>
  <tr>
    <td colspan="2">Smal text here - 1</td>
  </tr>
  <tr>
    <td rowspan="2">Cell 21</td>
    <td>Cell 22</td>
    <td>Cell 23</td>
    </tr>
  <tr>
    <td colspan="2">Smal text here - 2</td>
  </tr>
</table>