Які основні елементи складають структуру таблиці?

HTMLJunior~1 хв читання

Структура таблиці в HTML складається з кількох основних елементів, кожен з яких відповідає за певну частину таблиці.

1. `<table>` - контейнер таблиці

Це основний тег, всередині якого розташовуються всі інші елементи таблиці.

html

<table> ... </table>

2. `<tr>` - рядок таблиці (table row)

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

html

<tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
</tr>

3. `<td>` - комірка даних (table data)

Використовується для звичайних комірок, що містять текст, числа, зображення тощо.

html

<td>Sample data</td>

4. `<th>` - комірка заголовка (table header)

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

html

<th>Name</th>

5. `<thead>` - заголовок таблиці

Містить один або кілька рядків <tr> із заголовками (<th>). Допомагає логічно відокремити "шапку" таблиці.

html

<thead>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
</thead>

6. `<tbody>` - тіло таблиці

Містить основні дані таблиці (рядки <tr> з комірками <td>).

html

<tbody>
  <tr>
    <td>Maria</td>
    <td>25</td>
  </tr>
</tbody>

7. `<tfoot>` - нижня частина таблиці (підсумки)

Використовується для рядків з підсумками або примітками. Зазвичай розташовується внизу, але браузери можуть візуально розміщувати його після <tbody>.

html

<tfoot>
  <tr>
    <td>Total</td>
    <td>100</td>
  </tr>
</tfoot>

Підсумкова структура:

html

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bread</td>
      <td>$40</td>
    </tr>
    <tr>
      <td>Milk</td>
      <td>$70</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$110</td>
    </tr>
  </tfoot>
</table>

Коротко:

Елемент	Призначення
`<table>`	Уся таблиця
`<tr>`	Рядок
`<th>`	Комірка заголовка
`<td>`	Звичайна комірка
`<thead>`	Верхня частина (заголовки)
`<tbody>`	Основні дані
`<tfoot>`	Підсумки/низ таблиці

Висновок: Основна структура таблиці в HTML складається з: <table> → <thead> → <tbody> → <tfoot> → <tr> → <th>/<td>. Ці елементи формують логічно правильну та семантично зрозумілу таблицю.

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

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

Premium

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