Skip to main content

Що робить тег <table>?

Тег <table> в HTML використовується для створення таблиці - структури, що складається з рядків і стовпців, у яких зберігаються дані.

Він є контейнером для всіх елементів таблиці: рядків (<tr>), комірок (<td>), заголовків (<th>), а також логічних частин (<thead>, <tbody>, <tfoot>).


Основна функція

Тег <table> групує та відображає дані у табличній формі - як сітку, де рядки та стовпці перетинаються в комірках.


Приклад:

html
<table> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Maria</td> <td>25</td> </tr> <tr> <td>Oleh</td> <td>30</td> </tr> </table>

Що відбувається:

  • <table> - створює таблицю.
  • <tr> - додає рядок.
  • <th> - робить комірку заголовком (жирний шрифт, центрування).
  • <td> - додає звичайну комірку з даними.

Атрибути тега <table> (застарілі, але трапляються)

  • border - додає рамку навколо таблиці.

    html
    <table border="1">...</table>
  • cellpadding - задає внутрішні відступи всередині комірок.

  • cellspacing - відстань між комірками.

Зараз для оформлення таблиць використовують CSS, а не ці атрибути.


Приклад із CSS:

html
<table> <tr> <th>Item</th> <th>Price</th> </tr> <tr> <td>Bread</td> <td>$40</td> </tr> </table> <style> table { border-collapse: collapse; width: 300px; } th, td { border: 1px solid #333; padding: 8px; text-align: left; } </style>

Висновок:

Тег <table> створює таблицю і слугує основним контейнером для всіх її елементів. Він не відображає дані сам по собі, але організовує їх у рядки та стовпці, забезпечуючи структуроване та візуально зрозуміле представлення інформації.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.