HTML :: Тег <th>
В HTML тег <th> (от англ. table header cell – заголовочная ячейка таблицы) предназначен для формирования заголовочных ячеек таблицы и должен размещаться внутри элемента <tr>. Ячейки таблицы могут содержать практически любые другие <html>-элементы, типичные для тела документа и предназначенные для отображения на странице пользователю, например, текст, изображения, медиа-контент, формы и даже другие таблицы.
Закрывающий тег может быть опущен, если за элементом следует другой элемент <th> или элемент <td> или же он является последним элементом родительского <tr>.
Синтаксис
<table>
<tr>
<th>...</th>
</tr>
<tr>
<td>...</td>
</tr>
</table>
Закрывающий тег: не обязателен.
Атрибуты
- colspan – используется для объединения ячеек таблицы по горизонтали. В качестве значения принимает натуральное число, которое определяет количество объединяемых ячеек. По умолчанию используется 1.
- headers – связывает данную ячейку с одной или несколькими заголовочными ячейками, в качестве значения принимая через пробел id этих заголовочных ячеек. Атрибут предназначен для использования в речевых браузерах, поэтому в обычных браузерах его эффект не заметен.
- rowspan – используется для объединения ячеек таблицы по вертикали. В качестве значения принимает натуральное число, которое определяет количество объединяемых ячеек. По умолчанию используется 1.
-
scope – задает набор ячеек, для которых текущая заголовочная ячейка предоставляет заголовочную
информацию. Атрибут предназначен для использования в речевых браузерах, поэтому в обычных браузерах его эффект не заметен. Атрибут может
принимать следующие значения:
- col – данная заголовочная ячейка (заголовок) относится ко всем ячейкам текущего столбца таблицы.
- colgroup – данная заголовочная ячейка (заголовок) относится к группе столбцов, ячейки в которых были объединены с данной заголовочной ячейкой через ее атрибут rowspan (такие ячейки находятся под данной заголовочной ячейкой).
- row – данная заголовочная ячейка (заголовок) относится ко всем ячейкам текущей строки таблицы.
- rowgroup – данная заголовочная ячейка (заголовок) относится к группе строк, ячейки в которых были объединены с данной заголовочной ячейкой через ее атрибут rowspan (такие ячейки находятся справа или слева от данной заголовочной ячейки в зависимости от значения атрибута dir таблицы).
- auto – значение используется по умолчанию и означает, что связанные с данным заголовком ячейки будут определяться речевым браузером автоматически, в зависимости от контекста.
- Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.
Ссылки
Официальный сайт W3C: https://html.spec.whatwg.org/multipage/tables.html#the-th-element
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/th
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <!-- Для оформления используем стили, а не атрибуты --> <style> table, th,td{ border: 1px solid black; } table{ border-collapse: collapse } </style> </head> <body> <table> <!-- Заголовок таблицы --> <caption>Простая таблица с заголовком</caption> <!-- Первая строка таблицы --> <tr> <!-- 2 заголовочные ячейки --> <th>1-я колонка</th> <th>2-я колонка</th> </tr> <tr> <!-- 2 обычные ячейки --> <td>Я – первая ячейка второй строки </td> <td>Я – вторая ячейка второй строки</td> </tr> <tr> <td>Я – первая ячейка третьей строки</td> <td>Я – вторая ячейка третьей строки</td> </tr> </table> </body> </html>
Пример №1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №2</title> <!-- Для оформления используем стили, а не атрибуты --> <style> table, th,td{ border: 1px solid black; } table{ border-collapse: collapse } </style> </head> <body> <table> <caption>Таблица с объединенными ячейками</caption> <tr> <!-- Объединяем 2 горизонтальные ячейки 1.1 и 1.2 --> <td colspan="2" style="background-color: red">1.1+1.2</td> <td>1.3</td> <td>1.4</td> <!-- Объединяем 6 ячеек --> <td rowspan="3" colspan="2" style="background-color: yellow"> 1.5+1.6+<br>2.5+2.6+<br>3.5+3.6 </td> <td>1.7</td> <td>1.8</td> </tr> <tr> <td>2.1</td> <!-- Объединяем 2 вертикальные ячейки 2.2 и 3.2 --> <td rowspan="2" style="background-color: blue">2.2+<br>3.2</td> <td>2.3</td> <td>2.4</td> <td>2.7</td> <td>2.8</td> </tr> <tr> <td>3.1</td> <td>3.3</td> <td>3.4</td> <td>3.7</td> <td>3.8</td> </tr> </table> </body> </html>
Пример №2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №3</title> <!-- Для оформления используем стили, а не атрибуты --> <style> table, th,td{ border: 1px solid black; } table{ border-collapse: collapse } </style> </head> <body> <table> <caption>Использование атрибута scope</caption> <tr> <!-- Относится к ячейкам 3 строк --> <th rowspan="4" scope="rowgroup">Заголовок №1</th> <!-- Относится к ячейкам ниже --> <th scope="col">Заголовок №2</th> <!-- Относится к ячейкам 2 последних столбцов --> <th colspan="2" scope="colgroup">Заголовок №3</th> </tr> <tr> <td>Ячейка 1.1</td> <td>Ячейка 1.2</td> <td>Ячейка 1.3</td> </tr> <tr> <td>Ячейка 2.1</td> <td>Ячейка 2.2</td> <td>Ячейка 2.3</td> </tr> <tr> <td>Ячейка 3.1</td> <td>Ячейка 3.2</td> <td>Ячейка 3.3</td> </tr> </table> </body> </html>
Пример №3
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №4</title> <!-- Для оформления используем стили, а не атрибуты --> <style> table, th,td{ border: 1px solid black; } table{ border-collapse: collapse } </style> </head> <body> <table> <caption>Использование атрибута headers</caption> <tr> <th id="abiturient" colspan="3">Ф.И.О</th> <th rowspan="2">Дата рождения</th> </tr> <tr> <th headers="abiturient">Фамилия</th> <th headers="abiturient">Имя</th> <th headers="abiturient">Отчество</th> </tr> <tr> <td>Иванов</td> <td>Иван</td> <td>Иванович</td> <td>3.05.1980</td> </tr> <tr> <td>Петренко</td> <td>Петр</td> <td>Петрович</td> <td>21.07.1989</td> </tr> </table> </body> </html>
Пример №4