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

Примеры

HTML Результат

htmlCodes

<!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>Я &ndash; первая ячейка второй строки  &nbsp; &nbsp;</td>
			<td>Я &ndash; вторая ячейка второй строки</td>
		</tr>

		<tr>
			<td>Я &ndash; первая ячейка третьей строки</td>
			<td>Я &ndash; вторая ячейка третьей строки</td>
		</tr>
		
	</table>	
	
</body>
</html>

Пример №1

HTML Результат

htmlCodes

<!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

HTML Результат

htmlCodes

<!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

HTML Результат

htmlCodes

<!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