HTML-заголовок таблицы: мастерство структуры и дизайна таблиц

Введение

В HTML таблицы используются для отображения данных в строках и столбцах. Тег <thead> используется для определения заголовочной строки таблицы. Заголовочная строка обычно используется для обозначения содержимого в нижележащих столбцах и содержит описательные метки.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Создать таблицу

Создайте файл index.html и откройте его в текстовом редакторе. Именно здесь вы будете писать свой HTML-код.

Создайте таблицу с использованием тега <table>.

<table>
  <!-- content goes here -->
</table>

Добавить заголовок таблицы

Добавьте тег <thead>, чтобы определить заголовочную строку таблицы. Внутри тега <thead> добавьте строки заголовка таблицы с использованием тега <th>.

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- table content goes here -->
  </tbody>
</table>

Вставить содержимое в таблицу

Добавьте содержимое в таблицу, используя тег <tbody> и вложенные теги <tr> и <td>.

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
    </tr>
    <tr>
      <td>Content 4</td>
      <td>Content 5</td>
      <td>Content 6</td>
    </tr>
  </tbody>
</table>

Дать стиль заголовку таблицы

Используйте CSS для стилизации тега <thead>. Ниже приведен пример изменения цвета фона заголовка на серый:

<style>
  thead {
    background-color: gray;
  }
</style>

Резюме

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