Методы создания HTML-таблиц с несколькими строками заголовков

«Таблица с несколькими заголовками HTML» относится к таблице HTML, которая имеет несколько строк заголовков (или несколько разделов заголовков). Вот несколько способов создания таблицы с несколькими строками заголовков в HTML:

Метод 1. Использование элементов

и

<table>
  <thead>
    <tr>
      <th colspan="2">Header Row 1</th>
    </tr>
    <tr>
      <th>Subheader 1</th>
      <th>Subheader 2</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table body content goes here -->
  </tbody>
</table>

Метод 2: использование элементов

и

<table>
  <caption>Table Caption</caption>
  <thead>
    <tr>
      <th colspan="2">Header Row 1</th>
    </tr>
    <tr>
      <th>Subheader 1</th>
      <th>Subheader 2</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table body content goes here -->
  </tbody>
</table>

Метод 3. Использование элементов

и

<table>
  <colgroup>
    <col span="2">
  </colgroup>
  <thead>
    <tr>
      <th>Header Row 1</th>
      <th>Header Row 1</th>
    </tr>
    <tr>
      <th>Subheader 1</th>
      <th>Subheader 2</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table body content goes here -->
  </tbody>
</table>

Метод 4. Использование

с диапазоном строк

<table>
  <tr>
    <th rowspan="2">Header Row 1</th>
    <th>Subheader 1</th>
  </tr>
  <tr>
    <th>Subheader 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Метод 5. Использование CSS для стилизации

<style>
  th {
    font-weight: bold;
  }
  .subheader {
    font-weight: normal;
  }
</style>
<table>
  <tr>
    <th colspan="2">Header Row 1</th>
  </tr>
  <tr>
    <th class="subheader">Subheader 1</th>
    <th class="subheader">Subheader 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>