Ячейка-заголовок таблицы HTML

Введение

В HTML тег <th> используется для определения одной ячейки как заголовка группы ячеек. Есть два типа ячеек таблицы HTML: ячейка-заголовок и стандартная ячейка. Ячейка-заголовок используется в качестве заголовка группы ячеек, а стандартные ячейки содержат данные для таблицы.

Этот пошаговый практикум проведет вас через процесс создания ячейки-заголовка в таблице HTML с использованием тега <th> с краткими объяснениями и примерами кода.

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

Создание базовой таблицы HTML

Во - первых, нам нужно создать таблицу с использованием HTML.

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

Например, следующий код создаст простую HTML - таблицу с двумя строками и двумя столбцами:

<table>
  <tr>
    <td>Строка 1, Столбец 1</td>
    <td>Строка 1, Столбец 2</td>
  </tr>
  <tr>
    <td>Строка 2, Столбец 1</td>
    <td>Строка 2, Столбец 2</td>
  </tr>
</table>

Создание ячейки-заголовка

Для создания ячейки-заголовка мы должны заменить тег <td> на тег <th> в строке таблицы, где мы хотим добавить ячейку-заголовок.

<table>
  <tr>
    <th>Заголовок 1</th>
    <th>Заголовок 2</th>
  </tr>
  <tr>
    <td>Строка 1, Столбец 1</td>
    <td>Строка 1, Столбец 2</td>
  </tr>
  <tr>
    <td>Строка 2, Столбец 1</td>
    <td>Строка 2, Столбец 2</td>
  </tr>
</table>

Добавление атрибутов к тегу

Тег <th> поддерживает различные атрибуты, которые помогают форматировать и структурировать ячейку-заголовок.

• Abbr: Используется для определения сокращенного названия для содержимого ячейки.
• Colspan: Указывает количество столбцов, которое занимает ячейка.
• Rowspan: Указывает количество строк, которое занимает ячейка.
• Scope: Указывает, какие ячейки связаны с тегом-заголовком.
• Header: Используется для указания одной или нескольких ячеек-заголовков, связанных с ячейкой.

Например, следующий код создаст ячейку-заголовок с атрибутами "abbr" и "colspan":

<table>
  <tr>
    <th abbr="Header 1" colspan="2">Header 1 &amp; Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Резюме

В этом пошаговом практикуме вы узнали, как создать ячейку-заголовок в таблице HTML с использованием тега <th>. Заголовки таблиц HTML важны для структурирования данных. С использованием тега th вы можете создать ячейку-заголовок и управлять ее форматированием и атрибутами.