<table> - HTML-елемент таблиці

HTML-елемент <table> представляє собою табличні дані — тобто, інформацію, представлену в двовимірній таблиці, що складається з рядків і стовпців клітинок.

Елемент <table> є контейнером для набору тегів, які разом створюють структуру таблиці: <caption>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, <colgroup> та <col>.

Таблиці дозволяють організовувати дані у вигляді сітки, що робить їх ідеальними для представлення статистичних даних, розкладів, фінансових звітів та іншої структурованої інформації.

Не використовуйте таблиці для створення макету сторінки. Історично це була поширена практика, але зараз для цього існують більш ефективні та семантично правильні інструменти, такі як CSS Flexbox та Grid.

HTML
<table>
  <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Дані 1.1</td>
      <td>Дані 1.2</td>
    </tr>
    <tr>
      <td>Дані 2.1</td>
      <td>Дані 2.2</td>
    </tr>
  </tbody>
</table>

Атрибути

Цей тег може мати глобальні атрибути.

align: Визначає вирівнювання таблиці відносно батьківського елемента. Цей атрибут є застарілим, використовуйте CSS властивість margin.
bgcolor: Визначає колір фону таблиці. Цей атрибут є застарілим, використовуйте CSS властивість background-color.
border: Визначає товщину рамки навколо таблиці в пікселях. Цей атрибут є застарілим, використовуйте CSS властивість border.
cellpadding: Визначає відступ між вмістом клітинки та її межами. Цей атрибут є застарілим, використовуйте CSS властивість padding для елементів <td> та <th>.
cellspacing: Визначає відстань між клітинками. Цей атрибут є застарілим, використовуйте CSS властивість border-spacing.
frame: Визначає, які сторони зовнішньої рамки таблиці будуть видимими. Цей атрибут є застарілим.
rules: Визначає, які внутрішні лінії (рамки) будуть видимими. Цей атрибут є застарілим.
summary: Надає текстовий опис таблиці для допоміжних технологій. Цей атрибут є застарілим. Для опису таблиці використовуйте елемент <caption> або атрибут aria-describedby.
width: Визначає ширину таблиці. Цей атрибут є застарілим, використовуйте CSS властивість width.

Технічне резюме

Категорія контенту	Потоковий контент.
Дозволений вміст	В цьому порядку: необов’язковий елемент `<caption>`, нуль або більше елементів `<colgroup>`, необов’язковий елемент `<thead>`, необов’язковий елемент `<tfoot>`, нуль або більше елементів `<tbody>` або один чи більше елементів `<tr>`.
Пропуск тегів	Жоден, початковий та кінцевий теги є обов’язковими.
Дозволені батьківські елементи	Будь-який елемент, що приймає потоковий контент.
Роль ARIA	`table`
DOM інтерфейс	`HTMLTableElement`

Приклади використання

<table>
  <tr>
    <td>Комірка 1.1</td>
    <td>Комірка 1.2</td>
  </tr>
  <tr>
    <td>Комірка 2.1</td>
    <td>Комірка 2.2</td>
  </tr>
</table>

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

<table>
  <caption>Розклад роботи</caption>
  <colgroup>
    <col span="2" style="background-color: #f2f2f2;">
    <col style="background-color: #e6e6fa;">
  </colgroup>
  <thead>
    <tr>
      <th>День</th>
      <th>Початок</th>
      <th>Кінець</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Понеділок</td>
      <td>09:00</td>
      <td>18:00</td>
    </tr>
    <tr>
      <td>Вівторок</td>
      <td>09:00</td>
      <td>18:00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Обідня перерва: 13:00 - 14:00</td>
    </tr>
  </tfoot>
</table>

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px;
  text-align: center;
}
caption {
  font-weight: bold;
  margin-bottom: 10px;
}

Стилі за замовчуванням

CSS
table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: grey;
}

Підтримка браузерів



`<table>`
`align`
`bgcolor`
`border`
`cellpadding`
`cellspacing`
`frame`
`rules`
`summary`
`width`