Як зробити таблицю в 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>

АВТОРИЗАЦІЯ