html.okpython.net
HTML и CSS для начинающих

HTML :: Тег <td>

В HTML тег <td> (от англ. table data cellтабличная ячейка с данными) предназначен для формирования ячеек с данными в таблице и должен размещаться внутри элемента <tr>. Ячейки таблицы могут содержать практически любые другие <html>-элементы, типичные для тела документа и предназначенные для отображения на странице пользователю, например, текст, изображения, медиа-контент, формы и даже другие таблицы.

Закрывающий тег может быть опущен, если за элементом следует другой элемент <td> или элемент <th> или же он является последним элементом родительского <tr>.

Синтаксис

	<table>
	  <tr>
		<th>...</th>
	  </tr>
	  <tr>
		<td>...</td>		
	  </tr>
	</table>

	Закрывающий тег: не обязателен.							

Атрибуты

  • colspan – используется для объединения ячеек таблицы по горизонтали. В качестве значения принимает натуральное число, которое определяет количество объединяемых ячеек. По умолчанию используется 1.
  • headers – связывает данную ячейку с одной или несколькими заголовочными ячейками, в качестве значения принимая через пробел id этих заголовочных ячеек. Атрибут предназначен для использования в речевых браузерах, поэтому в обычных браузерах его эффект не заметен.
  • rowspan – используется для объединения ячеек таблицы по вертикали. В качестве значения принимает натуральное число, которое определяет количество объединяемых ячеек. По умолчанию используется 1.
  • Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Примеры

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>Использование атрибута headers</caption>
				
		<tr>
			<th id="abiturient" colspan="3">Ф.И.О</th>
			<th>Дата рождения</th>
		</tr>
		
		<tr>
			<td headers="abiturient">Иванов</td>
			<td headers="abiturient">Иван</td>
			<td headers="abiturient">Иванович</td>
			<td>3.05.1980</td>
		</tr>		
		
		<tr>
			<td headers="abiturient">Петренко</td>
			<td headers="abiturient">Петр</td>
			<td headers="abiturient">Петрович</td>
			<td>21.07.1989</td>
		</tr>			
	
  </table>
	
</body>
</html>

Пример №3