Таблиця в HTML — це спосіб вивести на екран дані, упорядкувавши їх в колонки і рядки. Кожен елемент в таблиці є складовою частиною і рядка, і колонки.
В комірках HTML таблиці можуть зберігатися такі елементи як: заголовки, списки, текст, зображення, елементи форм, а також інші таблиці.
Таблиці в HTML: Відео
У цьому уроці ми розглянемо такі питання:
- Як створити таблицю в HTML (тег <table>).
- Поділ таблиці на логічні частини (теги <thead>, <tbody>, <tfoot>).
- Як створити комірку заголовка стовпця таблиці в HTML (тег <th>).
- Як створити рядки та клітинки таблиці в HTML (теги <tr> і <td>).
- Як зробити заголовок таблиці в HTML (тег <caption>).
- Як зробити межу таблиці в HTML (атрибут border).
- Як зробити відступ в таблиці HTML (атрибути cellpadding і cellspacing).
- Як об'єднати комірки таблиці в HTML (атрибути colspan і rowspan).
- Як зробити фон таблиці в HTML (атрибут bgcolor).
- Як задати розмір таблиці в HTML (атрибути width і height).
- Групування рядків і стовпців таблиці (теги <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>
