Метод 1. Использование colspan в HTML:

Атрибут colspan в HTML позволяет объединять несколько ячеек таблицы по горизонтали. Используя этот атрибут, вы можете разделить заголовок таблицы на три части. Взгляните на фрагмент кода ниже:

<table>
  <tr>
    <th colspan="1">Header Part 1</th>
    <th colspan="1">Header Part 2</th>
    <th colspan="1">Header Part 3</th>
  </tr>
  <!-- Table content goes here -->
</table>

Метод 2. Использование CSS Grid:

CSS Grid предоставляет мощную систему макетов для разделения заголовков таблиц. Вы можете создать три столбца сетки и назначить каждую часть заголовка определенному столбцу. Вот пример:

<style>
  table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
</style>
<table>
  <tr>
    <th>Header Part 1</th>
    <th>Header Part 2</th>
    <th>Header Part 3</th>
  </tr>
  <!-- Table content goes here -->
</table>

Метод 3. Использование CSS Flexbox:

Flexbox — еще один гибкий вариант макета для разделения заголовков таблиц. Вы можете использовать свойство flex-basis, чтобы назначить определенную ширину каждой части заголовка. Вот пример:

<style>
  table {
    display: flex;
  }
  th {
    flex-basis: 33.33%;
  }
</style>
<table>
  <tr>
    <th>Header Part 1</th>
    <th>Header Part 2</th>
    <th>Header Part 3</th>
  </tr>
  <!-- Table content goes here -->
</table>

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

Если вам нужен более динамичный контроль над разделением заголовков таблиц, вы можете использовать JavaScript для управления структурой таблицы. Вот пример того, как этого можно добиться:

<script>
  const table = document.querySelector('table');
  const headerRow = table.querySelector('tr');
  const headers = headerRow.querySelectorAll('th');
  headers.forEach((header, index) => {
    header.setAttribute('colspan', '1');
    header.style.width = `${100 / headers.length}%`;
    header.textContent = `Header Part ${index + 1}`;
  });
</script>
<table>
  <tr>
    <!-- JavaScript will modify the table headers here -->
  </tr>
  <!-- Table content goes here -->
</table>

Разделение заголовков таблиц на несколько частей — это эффективный способ улучшить организацию и читаемость таблиц. В этой статье мы рассмотрели четыре метода: использование colspan в HTML, CSS Grid, CSS Flexbox и JavaScript. Выберите метод, который лучше всего соответствует требованиям вашего проекта, и придайте своим таблицам профессиональный и организованный вид.

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