Тег <table> — таблиця в HTML: створення й приклади

Для створення таблиці використовується парний тег <table> </table> який створює таблицю в HTML документі. Таблиця має складатись хочаб з одног рядка <tr> та однієї комірки (<th> - комірка-заголовок або <td> - комірка таблиці)

Теґ заголовка таблиці <caption>

Розподіл таблиці на на верхній нижній колонтитул і тіло відбувається за допомогою тегів:

• <thead> - шапка таблиці

• <tbody> - тіло таблиці

• <tfoot> - нижній колонтитул таблиці (напис, що пояснює)

Розподіл таблиці по колонках відбувається за домомогою нааступних тегів:

• <col> - параметри стовпчиків

• <colgroup> - параметри груп стовпчиків

Таблиця з невидимою границею використовавалась для створення Web-сторінок. Даний метод використовувався до появи способу верстки шарами, а також за допомогою flex.

правити

Порада

Таблиці не повинні використовуватися для розмітки сторінок! Історично склалося, що деякі веб-розробники використовували HTML таблиці в для створення макета сторінки. Проте, існує безліч альтернатив, за допомогою яких можна створити макет сторінки, наприклад за допомогою CSS.

автор: NagarD правити

Порада

Якщо в в якості елементів макету використовуються таблиці, то таким таблицям необхідно задавати атрибут role зі значенням presentation, наприклад <table role="presentation"> ... <table>, який допомагає технічним засобам (наприклад, пошуковим системам чи програмам читання з екрану) правильно розпізнавати та відтворювати дані з такої таблиці.

автор: NagarD правити

Порада

Теґи tbody, thead, tfoot не є обов'язковими, більшість сучасних браузерів підставляє їх самостійно, але їх можна використати для стилізації таблиці.

автор: NagarD правити

Нотатка

Використання інших тегів нарівні (на одному рівні) з тегами елементів таблиці заборонено.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

<table>


  <tr>


    <td>...</td>


  </tr>


</table>

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1.0+	1.0+	1.0+	2.0+	2.0+

Підтримка: мобільні переглядачі

Переглядач
	1.0+	18+	4+	1.0+

Приклади

+ запропонувати свій приклад у пісочниці

CSS стиль без задання

table {


    display: table;


    border-collapse: separate;


    border-spacing: 2px;


    border-color: gray;


}