Как сделать таблицу в HTML? Теги таблицы HTML и их атрибуты

Таблица в HTML — это способ вывести на экран данные, упорядочив их в колонки и строки. Каждый элемент в таблице является составной частью и строки, и колонки.

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

Таблицы в HTML: Видео

В этом уроке мы рассмотрим такие вопросы:

  1. Как создать таблицу в HTML (тег <table>).
  2. Разделение таблицы на логические части (теги <thead>, <tbody>, <tfoot>).
  3. Как создать ячейку заголовка столбца таблицы в HTML (тег <th>).
  4. Как создать строки и ячейки таблицы в HTML (теги <tr> и <td>).
  5. Как сделать заголовок таблицы в HTML (тег <caption>).
  6. Как сделать границы таблицы в HTML (атрибут border).
  7. Как сделать отступ в таблице HTML (атрибуты cellpadding и cellspacing).
  8. Как объединить ячейки таблицы в HTML (атрибуты colspan и rowspan).
  9. Как сделать фон таблицы в HTML (атрибут bgcolor).
  10. Как задать размер таблицы в HTML (атрибуты width и height).
  11. Группирование строк и столбцов таблицы (теги <colgroup> и <col>).

И так, обо всем по порядку.

Как создать таблицу в HTML

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

Внутри тега <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.

Давайте создадим простую таблицу используя вышеупомянутые теги. Откройте любой текстовый редактор (можно обычный Блокнот) и впишите в него следующий код:

<table>
	<tr>
		<td>Это ячейка №1</td>
		<td>Это ячейка №2</td>
	</tr>
</table>

Сохраните созданный файл с расширением .html (Например: index.html).

Вот мы и создали свою первую простую таблицу с одной строкой и двумя ячейками.

Давайте более детально рассмотрим вышеупомянутый код.

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

Разделение таблицы на логические части

Для разделения таблицы на таблицы на логические части используют теги <thead>, <tbody>, <tfoot>.

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

В одной таблице допустимо использовать тег <thead> только один раз. Этот элемент должен идти в коде сразу после тега <table> (и после элементов <caption> и <colgroup>, если они есть), но обязательно перед тегами <tbody> и <tfoot>.

Тег <tbody> предназначен для хранения одной или нескольких строк и используется для группировки основного содержимого таблицы. Элемент <tbody> должен быть расположен после тегов <caption> и <colgroup> (если таковые присутствуют), а также после тега <thead>.

Тег <tfoot> предназначен для хранения одной или нескольких строк, которые должны быть отображены внизу таблицы. По сути — это нижний колонтитул таблицы. Элемент <tfoot> должен быть расположен перед элементом <tbody> в таблице. Несмотря на то, что тег <tfoot> в исходном коде определяется до тега <tbody>, браузеры отображают его в самом низу таблицы.

Что даёт нам разделение таблицы на логические части?

Например, у вас очень большая таблица и вы выводите её на печать. В таком случае, браузер обрабатывает код таблицы и формирует её верхний и нижний колонтитул, которые будут напечатаны соответственно в верхней и нижней части каждой страницы. Также браузеры могут использовать вышеупомянутые элементы для включения прокрутки тела таблицы, независимо от заголовка и нижнего колонтитула.

Пример как разделить таблицу на логические части:

<table>
	<thead>
		<tr>
			<td>Наименование товара</td>
			<td>Цена, руб.</td>
		</tr>
	</thead>
	
	<tfoot>
		<tr>
			<td>Итого:</td>
			<td>500</td>
		</tr>
	</tfoot>
	
	<tbody>
		<tr>
			<td>Это ячейка №1</td>
			<td>Это ячейка №2</td>
		</tr>
	</tbody>	
</table>

Как создать ячейку заголовка столбца таблицы в HTML

Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Как правило, текст в такой ячейке отображается браузером жирным шрифтом и выравнивается по центру. Это единственное отличие тега <th> от элемента <td>.

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

Пример как создать ячейку заголовка столбца таблицы в HTML:

<table>
	<thead>
		<tr>
			<th>Наименование товара</th>
			<th>Цена, руб.</th>
		</tr>
	</thead>
	
	<tfoot>
		<tr>
			<td>Итого:</td>
			<td>500</td>
		</tr>
	</tfoot>
	
	<tbody>
		<tr>
			<td>Это ячейка №1</td>
			<td>Это ячейка №2</td>
		</tr>
	</tbody>	
</table>

Как создать строки и ячейки таблицы в HTML

Для создания строки таблицы HTML используют элемент <tr>. А для создания ячейки — тег <td>.

Например, следующим кодом, мы добавили ещё одну строку с двумя ячейками в тело нашей таблицы (в раздел <tbody>):

<table>
	<thead>
		<tr>
			<th>Наименование товара</th>
			<th>Цена, руб.</th>
		</tr>
	</thead>
	
	<tfoot>
		<tr>
			<td>Итого:</td>
			<td>500</td>
		</tr>
	</tfoot>
	
	<tbody>
		<tr>
			<td>Это ячейка №1 строки №1</td>
			<td>Это ячейка №2 строки №1</td>
		</tr>
		<tr>
			<td>Это ячейка №1 строки №2</td>
			<td>Это ячейка №2 строки №2</td>
		</tr>
	</tbody>	
</table>

Как сделать заголовок таблицы в HTML

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

Пример как сделать заголовок таблицы в HTML:

<table>
	<caption>Таблица №1. Пример таблицы HTML</caption>
	<thead>
		<tr>
			<th>Наименование товара</th>
			<th>Цена, руб.</th>
		</tr>
	</thead>
	
	<tfoot>
		<tr>
			<td>Итого:</td>
			<td>500</td>
		</tr>
	</tfoot>
	
	<tbody>
		<tr>
			<td>Это ячейка №1 строки №1</td>
			<td>Это ячейка №2 строки №1</td>
		</tr>
		<tr>
			<td>Это ячейка №1 строки №2</td>
			<td>Это ячейка №2 строки №2</td>
		</tr>
	</tbody>	
</table>

Как сделать границы таблицы в HTML

Для того, чтобы сделать границу таблицы в HTML используется атрибут border. Если задан атрибут border="0", то таблица будет без рамки. Если же border="1", то ширина границы будет равна 1px. Если border="10" — то 10px.

Пример как сделать границы таблицы в HTML:

<table border="2">
	<caption>Таблица №1. Пример таблицы HTML</caption>
	<thead>
		<tr>
			<th>Наименование товара</th>
			<th>Цена, руб.</th>
		</tr>
	</thead>
	
	<tfoot>
		<tr>
			<td>Итого:</td>
			<td>500</td>
		</tr>
	</tfoot>
	
	<tbody>
		<tr>
			<td>Это ячейка №1 строки №1</td>
			<td>Это ячейка №2 строки №1</td>
		</tr>
		<tr>
			<td>Это ячейка №1 строки №2</td>
			<td>Это ячейка №2 строки №2</td>
		</tr>
	</tbody>	
</table>

Как сделать отступ в таблице HTML

Атрибут cellpadding определяет расстояние между границей ячейки и ее содержимым. Он добавляет пустое пространство к ячейке и тем самым увеличивает ее размеры. Без cellpadding текст в таблице плохо воспринимается, так как он накладывается на границу ячеек (при условии, что граница таблицы не равна 0). А с cellpadding вокруг текста образуется свободное пространство и благодаря этому такой текст комфортнее читать.

Атрибут cellspacing задает расстояние между внешними границами ячеек. Если установлен атрибут border, то толщина границы принимается в расчет.

Пример как сделать отступ в таблице HTML:

<table cellspacing="5" cellpadding="10" border="2">
	<caption>Таблица №1. Пример таблицы HTML</caption>
	<thead>
		<tr>
			<th>Наименование товара</th>
			<th>Цена, руб.</th>
		</tr>
	</thead>
	
	<tfoot>
		<tr>
			<td>Итого:</td>
			<td>500</td>
		</tr>
	</tfoot>
	
	<tbody>
		<tr>
			<td>Это ячейка №1 строки №1</td>
			<td>Это ячейка №2 строки №1</td>
		</tr>
		<tr>
			<td>Это ячейка №1 строки №2</td>
			<td>Это ячейка №2 строки №2</td>
		</tr>
	</tbody>	
</table>

Как объединить ячейки таблицы в HTML

Для объединения двух и более ячеек в одну используются атрибуты colspan и rowspan тега <td>.

Атрибут colspan устанавливает число ячеек, которые должны быть объединены по горизонтали.

Атрибут rowspan устанавливает число ячеек, которые должны быть объединены по вертикали.

Пример как объединить ячейки таблицы в HTML по вертикали:

<table cellspacing="5" cellpadding="10" border="2">
	<caption>Таблица №1. Пример таблицы HTML</caption>
	<thead>
		<tr>
			<th>Наименование товара</th>
			<th>Цена, руб.</th>
		</tr>
	</thead>
	
	<tfoot>
		<tr>
			<td>Итого:</td>
			<td>500</td>
		</tr>
	</tfoot>
	
	<tbody>
		<tr>
			<td rowspan="2">Это ячейка №1 строки №1</td>
			<td>Это ячейка №2 строки №1</td>
		</tr>
		<tr>
			<td>Это ячейка №1 строки №2</td>			
		</tr>
	</tbody>	
</table>

Пример как объединить ячейки таблицы в HTML по горизонтали:

<table cellspacing="5" cellpadding="10" border="2">
	<caption>Таблица №1. Пример таблицы HTML</caption>
	<thead>
		<tr>
			<th>Наименование товара</th>
			<th>Цена, руб.</th>
		</tr>
	</thead>
	
	<tfoot>
		<tr>
			<td>Итого:</td>
			<td>500</td>
		</tr>
	</tfoot>
	
	<tbody>
		<tr>
			<td colspan="2">Это ячейка №1 строки №1</td>
		</tr>
		<tr>
			<td>Это ячейка №1 строки №2</td>
			<td>Это ячейка №2 строки №2</td>			
		</tr>
	</tbody>	
</table>

Как сделать фон таблицы в HTML

Атрибут bgcolor устанавливает цвет фона ячейки.

Пример как сделать фон таблицы в HTML:

<table cellspacing="5" cellpadding="10" border="2" bgcolor="blue">
	<caption>Таблица №1. Пример таблицы HTML</caption>
	<thead>
		<tr>
			<th>Наименование товара</th>
			<th>Цена, руб.</th>
		</tr>
	</thead>
	
	<tfoot>
		<tr>
			<td>Итого:</td>
			<td>500</td>
		</tr>
	</tfoot>
	
	<tbody>
		<tr>
			<td colspan="2" bgcolor="#ffcc00">Это ячейка №1 строки №1</td>
		</tr>
		<tr>
			<td>Это ячейка №1 строки №2</td>
			<td>Это ячейка №2 строки №2</td>			
		</tr>
	</tbody>	
</table>

Как задать размер таблицы в HTML

Атрибут width задает ширину элемента, атрибут height — его высоту. Таким образом, создавая таблицу в HTML, можно указать её ширину, или высоту (при необходимости).

Для этого нам достаточно прописать для элемента table атрибут width="значение", или height="значение". Значение может быть указано как в пикселях, так и в процентах.

Пример как установить ширину таблицы в HTML:

<table cellspacing="5" cellpadding="10" border="2" bgcolor="blue" width="500">
	<caption>Таблица №1. Пример таблицы HTML</caption>
	<thead>
		<tr>
			<th>Наименование товара</th>
			<th>Цена, руб.</th>
		</tr>
	</thead>
	
	<tfoot>
		<tr>
			<td>Итого:</td>
			<td>500</td>
		</tr>
	</tfoot>
	
	<tbody>
		<tr>
			<td colspan="2" bgcolor="#ffcc00">Это ячейка №1 строки №1</td>
		</tr>
		<tr>
			<td>Это ячейка №1 строки №2</td>
			<td>Это ячейка №2 строки №2</td>			
		</tr>
	</tbody>	
</table>

Группирование строк и столбцов таблицы

Тег <colgroup> предназначен для задания ширины и стиля одной или нескольких колонок таблицы. Этот тег позволяет уменьшить код таблицы за счет сокращения повторяющихся атрибутов, и при наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки.

Тег <colgroup> можно использовать в комбинации с тегом <col>, который определяет характеристики одной или нескольких колонок.

Тег <col> также задает ширину и другие характеристики одной или нескольких колонок таблицы.

Добавляются эти теги непосредственно после элементов <table> и <caption>.

Пример как задать характеристики для столбцов таблицы:

<table cellspacing="5" cellpadding="10" border="2" bgcolor="blue" width="500">  
	<caption>Таблица №1. Пример таблицы HTML</caption>
	
		<colgroup>
			<col span="1" style="background:Khaki"><!-- С помощью этой конструкции задаем цвет фона для первого столбца таблицы-->
			<col style="background-color:LightCyan"><!-- Задаем цвет фона для следующего (одного) столбца таблицы-->
		</colgroup>
		
	<thead>
		<tr>
			<th>Наименование товара</th>
			<th>Цена, руб.</th>
		</tr>
	</thead>
	
	<tfoot>
		<tr>
			<td>Итого:</td>
			<td>500</td>
		</tr>
	</tfoot>
	
	<tbody>
		<tr>
			<td colspan="2" bgcolor="#ffcc00">Это ячейка №1 строки №1</td>
		</tr>
		<tr>
			<td>Это ячейка №1 строки №2</td>
			<td>Это ячейка №2 строки №2</td>			
		</tr>
	</tbody>	
</table>

Наши рекомендации

Сollaborator

Hosting Ukraine

АВТОРИЗАЦИЯ