Как лучше делать такую таблицу?

В HTML есть несколько способов создания таблиц, каждый из которых может быть использован в зависимости от ваших требований и предпочтений.

Первый и наиболее простой способ - использование элементов <table>, <tr> и <td>. Этот метод основан на использовании ячеек таблицы, которые находятся в строках <tr>, а строки - в таблице <table>. Каждая ячейка определяется элементом <td>. Пример кода:

<table>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
    <td>Ячейка 3</td>
  </tr>
  <tr>
    <td>Ячейка 4</td>
    <td>Ячейка 5</td>
    <td>Ячейка 6</td>
  </tr>
</table>

Второй способ - использование элементов <thead>, <tbody> и <tfoot>. Этот метод используется, чтобы разделить заголовки таблицы, тело таблицы и футер таблицы. Это полезно, когда таблица содержит большой объем данных или когда вы хотите применить стили к заголовкам или футеру таблицы. Пример кода:

<table>
  <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
      <th>Заголовок 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ячейка 1</td>
      <td>Ячейка 2</td>
      <td>Ячейка 3</td>
    </tr>
    <tr>
      <td>Ячейка 4</td>
      <td>Ячейка 5</td>
      <td>Ячейка 6</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Футер 1</td>
      <td>Футер 2</td>
      <td>Футер 3</td>
    </tr>
  </tfoot>
</table>

Третий способ - использование CSS для стилизации таблицы. С помощью CSS можно настроить внешний вид таблицы, такой как цвет фона, размер шрифта, отступы и т. д. Можно применять стили к отдельным элементам или целым таблицам, используя классы, идентификаторы и псевдоклассы. Пример кода:

<style>
  .my-table {
    border-collapse: collapse;
    width: 100%;
  }
  
  .my-table th,
  .my-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  
  .my-table th {
    background-color: #f2f2f2;
  }
  
  .my-table tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

<table class="my-table">
  <tr>
    <th>Заголовок 1</th>
    <th>Заголовок 2</th>
    <th>Заголовок 3</th>
  </tr>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
    <td>Ячейка 3</td>
  </tr>
  <tr>
    <td>Ячейка 4</td>
    <td>Ячейка 5</td>
    <td>Ячейка 6</td>
  </tr>
</table>

Все эти способы имеют свои преимущества и недостатки, и выбор зависит от обстоятельств. Если вам нужно просто и быстро создать таблицу без дополнительных стилей, элементы <table>, <tr> и <td> идеально подойдут. Если вы хотите декорировать таблицу или разделить ее на различные части, элементы <thead>, <tbody> и <tfoot> могут быть полезными. В то время как использование CSS позволяет полностью настроить внешний вид таблицы. Выбор зависит от ваших потребностей и целей для конкретной таблицы.