НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML CSS JAVASCRIPT SQL PHP PYTHON JAVA KOTLIN GO C C++ C# AI W3.CSS TypeScript Як зробити? ДОВІДНИКИ БІЛЬШЕ 🔍 ◑ ВПРАВИ
HTML5. Уроки для початківців. W3Schools українською

En Es De Fr

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 українською.

Запитання для самоконтролю

  • Для чого потрібні HTML-таблиці?
  • Який тег визначає HTML-таблицю?
  • Яким тегом визначається кожен рядок HTML-таблиці?
  • Яким тегом визначається кожен заголовок HTML-таблиці?
  • Яким тегом визначається кожна чарунка з даними HTML-таблиці?
  • Які елементи можуть містити чарунки з даними HTML-таблиці?
  • За допомогою якої CSS-властивості можна додати межу HTML-таблиці?
  • За допомогою якої CSS-властивості можна згорнути межі HTML-таблиці в одну межу?
  • Як додати внутрішній відступ в чарунках HTML-таблиці?
  • Як вирівняти заголовки HTML-таблиці за лівим краєм?
  • Як додати інтервал між межами HTML-таблиці?
  • Як зробити чарунку, що охоплює більше одного стовпця HTML-таблиці?
  • Як зробити чарунку, яка охоплює більше одного рядка HTML-таблиці?
  • Як додати підпис до HTML-таблиці?
  • Де потрібно вставити тег <caption> HTML-таблиці?
  • Як визначити спеціальний стиль для однієї конкретної HTML-таблиці?
❮ Prev Next ❯

✍ Коментарі