Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Які основні елементи складають структуру таблиці?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Структура таблиці в 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>`.
Ці елементи формують логічно правильну та семантично зрозумілу таблицю.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати320 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.