HTML Таблиці

❮ Prev Next ❯

HTML таблиці дозволяють веброзробникам упорядковувати дані у рядки та стовпці.

Приклад

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

Спробуйте самі »

Визначення HTML Таблиці

Тег <table> визначає HTML таблицю.

Кожен рядок таблиці визначається тегом <tr>. Кожен заголовок таблиці визначається тегом <th>. Кожна чарунка з даними таблиці визначається тегом <td>.

За замовчуванням текст в елементах <th> виділений жирним шрифтом і відцентрований.

За замовчуванням текст в елементах <td> є звичайним і вирівняним за лівим краєм.

Приклад

Проста HTML таблиця:

<table style="width:100%">
<tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
</tr>
<tr>
<td>Jill</td>
    <td>Smith</td>
    <td>50</td>
</tr>
<tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
</tr>
</table>

Спробуйте самі »

Примітка: Елементи <td> - це контейнери даних таблиці.
Вони можуть містити всілякі елементи HTML: текст, зображення, списки, інші таблиці тощо.

HTML таблиця. Як додати межу - border

Щоб додати межу до таблиці, використовуйте CSS властивість border:

Приклад

table, th, td {
border: 1px solid black;
}

Спробуйте самі »

Не забудьте визначити межі як для таблиці, так і для чарунок таблиці.

HTML Таблиця. Як згорнути межі - border-collapse

Щоб дозволити межам таблиці згортатися в одну межу, додайте CSS властивість border-collapse:

Приклад

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

Спробуйте самі »

HTML Таблиця. Як додати внутрішній відступ в чарунках - padding

Внутрішній відступ чарунки визначає простір між вмістом чарунки та її межами.

Якщо ви не вказали внутрішній відступ, чарунки таблиці відображатимуться без відступу.

Щоб встановити внутрішній відступ, використовуйте CSS властивість padding:

Приклад

th, td {
padding: 15px;
}

Спробуйте самі »

HTML Таблиця. Як вирівняти заголовки за лівим краєм - text-align

За замовчуванням заголовки таблиць виділені напівжирним шрифтом і відцентровані.

Щоб вирівняти заголовки таблиць за лівим краєм, використовуйте CSS властивість text-align:

Приклад

th {
text-align: left;
}

Спробуйте самі »

HTML Таблиця. Як додати інтервал між межами - spacing

Інтервал між межами визначає простір між чарунками.

Щоб встановити інтервал між межами таблиці, використовуйте CSS властивість border-spacing:

Приклад

table {
border-spacing: 5px;
}

Спробуйте самі »

Примітка: Якщо таблиця має згорнуті межі (border-collapse), то border-spacing не має ефекту.

HTML Таблиця - Чарунка, що охоплює кілька стовпців

Щоб зробити чарунку, що охоплює більше одного стовпця, використовуйте атрибут colspan:

Приклад

<table style="width:100%">
<tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
</tr>
<tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
</tr>
</table>

Спробуйте самі »

HTML Таблиця - Чарунка, яка охоплює багато рядків

Щоб зробити чарунку, яка охоплює більше одного рядка, використовуйте атрибут rowspan:

Приклад

<table style="width:100%">
<tr>
    <th>Name:</th>
    <td>Bill Gates</td>
</tr>
<tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
</tr>
<tr>
    <td>55577855</td>
</tr>
</table>

Спробуйте самі »

HTML Таблиця - Додати підпис

Щоб додати підпис до таблиці, використовуйте тег <caption>:

Приклад

<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td>January</td>
    <td>$100</td>
</tr>
<tr>
    <td>February</td>
    <td>$50</td>
</tr>
</table>

Спробуйте самі »

Примітка: Тег <caption> потрібно вставити відразу після тегу <table>.

Спеціальний стиль для однієї таблиці

Щоб визначити спеціальний стиль для однієї конкретної таблиці, додайте до таблиці атрибут id:

Приклад

<table id="t01">
<tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
</tr>
<tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
</tr>
</table>

Тепер ви можете визначити спеціальний стиль для цієї таблиці:

#t01 {
width: 100%;
background-color: #f1f1c1;
}

Спробуйте самі »

І додати більше стилів:

#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: white;
  background-color: black;
}

Спробуйте самі »

Підсумок

Використовуйте HTML елемент <table> для визначення таблиці
Використовуйте HTML елемент <tr> для визначення рядка таблиці
Використовуйте HTML елемент <td> для визначення чарунки таблиці
Використовуйте HTML елемент <th> для визначення заголовка таблиці
Використовуйте HTML елемент <caption> для визначення підпису таблиці
Використовуйте CSS властивість border для визначення межі
Використовуйте CSS властивість border-collapse для згортання меж чарунок
Використовуйте CSS властивість padding для додавання внутрішнього відступу в чарунках
Використовуйте CSS властивість text-align для вирівнювання тексту в чарунках
Використовуйте CSS властивість border-spacing для встановлення інтервалу між чарунками
Використовуйте атрибут colspan, щоб чарунка охоплювала багато стовпців
Використовуйте атрибут rowspan, щоб чарунка охоплювала багато рядків
Використовуйте атрибут id для однозначного визначення однієї таблиці

HTML Вправи

Перевірте себе за допомогою вправ

Вправа:

Додайте рядок таблиці з двома заголовками таблиць.

Два заголовки таблиць повинні мати значення "Name" (ім'я) та "Age" (вік).

<table>




  <tr>
    <td>Jill Smith</td>
    <td>50</td>
  </tr>
</table>

HTML Теги таблиці

Тег	Опис
<table>	Визначає таблицю
<th>	Визначає чарунку заголовка в таблиці
<tr>	Визначає рядок у таблиці
<td>	Визначає чарунку в таблиці
<caption>	Визначає підпис таблиці
<colgroup>	Визначає групу одного або декількох стовпців у таблиці для форматування
<col>	Визначає властивості стовпців для кожного стовпця в межах елемента <colgroup>
<thead>	Групує вміст заголовка в таблиці
<tbody>	Групує вміст body в таблиці
<tfoot>	Групує вміст нижнього колонтитула в таблиці

Для отримання повного списку всіх доступних HTML тегів відвідайте HTML Довідник тегів на нашому сайті W3Schools українською.