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

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

Спробуйте його в дії

Атрибути

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

Нерекомендовані атрибути

Наступні атрибути є нерекомендованими та не повинні використовуватися. Вони задокументовані нижче для довідкових потреб при оновленні наявного коду та задля історичного інтересу.

align: Задає горизонтальне вирівнювання таблиці в межах її батьківського елемента. Можливі значення обмежені: left, center, right. Слід натомість користуватися властивостями CSS margin-inline-start і margin-inline-end, оскільки цей атрибут є нерекомендованим.
bgcolor: Визначає колір фону таблиці. Його значення – це колір HTML, який може бути або шестицифровим шістнадцятковим кольором RGB, перед яким стоїть символ #, або ключовим словом кольору. Інші значення CSS <color&gt не підтримуються. Слід натомість користуватися властивістю CSS background-color, оскільки цей атрибут є нерекомендованим.
border: У вигляді невід'ємного цілого значення (в пікселях) визначає розмір обрамлення, що оточує таблицю. Якщо задано значення 0, то атрибут frame вважається пустим. Слід натомість користуватися властивістю CSS border, оскільки цей атрибут є нерекомендованим.
cellpadding: Задає простір між вмістом комірки та її межею, видимою або невидимою. Цей атрибут застарів: замість його використання застосуйте властивість CSS padding до елементів <th> і <td>.
cellspacing: Задає розмір простору між двома комірками у вигляді відсоткового значення або пікселів. Цей атрибут застарів: замість його використання застосуйте властивість CSS border-spacing до елемента <table>. Зверніть увагу, що це не подіє, якщо властивість CSS border-collapse елемента <table> має значення collapse.
frame: Визначає те, який бік обрамлення, що оточує таблицю, повинен бути показаний. Можливі значення enumerated: void, above, below, hsides, vsides, lhs, rhs, box і border. Слід натомість користуватися властивостями CSS border-style і border-width, оскільки цей атрибут є нерекомендованим.
rules: Визначає те, де в таблиці виводяться лінійки (межі). Можливі значення обмежені: none (усталене значення), groups (елементи <thead>, <tbody> і <tfoot>), rows (горизонтальні лінії), cols (вертикальні лінії) й all (межі навколо кожної комірки). Слід натомість користуватися властивостями CSS border на відповідних елементах таблиць, а також на самому елементі <table>, оскільки цей атрибут є нерекомендованим.
summary: Визначає альтернативний текст, що підсумовує вміст таблиці. Слід натомість користуватися елементом <caption>, оскільки цей атрибут є нерекомендованим.
width: Задає ширину таблиці. Слід натомість користуватися властивістю CSS width, оскільки цей атрибут є нерекомендованим.

[!NOTE] Попри те, що жодна специфікація HTML не описує height як атрибут <table>, частина браузерів підтримує нестандартне тлумачення height. Значення без одиниць вимірювання задає мінімальну абсолютну висоту в пікселях. Якщо задати відсоткове значення, то мінімальна висота таблиці буде відносною щодо висоти батьківського контейнера. Слід натомість користуватися властивістю CSS min-height, оскільки цей атрибут є нерекомендованим.

Візуальне компонування вмісту таблиці

Частиною структури таблиці є наступні елементи:

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

Рамки рядів заповнюють таблицю в порядку своєї появи в коді, згори донизу. Кожна рамка ряду займає один ряд комірок.
Рамка групи рядів займає одну або декілька рамок рядів.
Рамки стовпців розташовуються поруч одна з одною, в порядку своєї появи в коді. Залежно від значення атрибута dir, стовпці розташовуються зліва направо або справа наліво. Кожна рамка стовпця займає один або декілька стовпців комірок таблиці.
Рамка групи колонок займає одну або декілька рамок колонок.
Рамка комірки може простягатися на кілька рядів і стовпців. Користувацькі агенти обрізають комірки, щоб вони вміщалися в доступну кількість рядів і стовпців.

Комірки таблиць мають внутрішні відступи. Рамки, що утворюють таблицю, не мають зовнішніх відступів.

Шари таблиці та прозорість

Задля потреб стилізації елементи таблиці можна уявляти як розміщені на шести накладених один на одного шарах:

Шари елементів таблиці

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

Доступність

Підписи

Якщо надати елемент <caption>, чиє значення ясно та влучно описує призначення таблиці, то він допоможе людям вирішити, чи потрібно їм дивитися решту вмісту таблиці, чи пропустити її.

Це допоможе людям орієнтуватися за допомогою допоміжної технології штибу читача з екрана, людям зі слабким зором і людям з когнітивними негараздами.

Область дії на рядах і стовпцях

Атрибут scope на комірках-заголовках (елементах <th>) є надлишковим у простих контекстах, бо в таких випадках область дії виводиться автоматично. Проте частина допоміжних технологій може не змогти правильно виконати виведення, тож задання області дії заголовка може покращити взаємодію з сайтом. У складних таблицях атрибут scope можна задати, щоб надати необхідну інформацію про комірки, пов'язані з заголовком.

Складні таблиці

Допоміжні технології штибу читачів з екрана можуть мати труднощі з розбором таблиць, які настільки складні, що комірки-заголовки не можна пов'язати строго з рядом або стовпцем. Зазвичай на це вказує присутність атрибутів colspan і rowspan.

В ідеалі краще помізкувати над іншими способами представлення вмісту таблиці, в тому числі розбитті її на колекцію менших, пов'язаних між собою таблиць, яким не потрібно покладатися на використання атрибутів colspan і rowspan. Крім допомоги людям, що використовують допоміжні технології для розуміння вмісту таблиці, це може також допомогти людям з когнітивними негараздами, які можуть мати труднощі з розумінням асоціацій, які задає компонування таблиці.

Якщо таблицю не можна розбити на частини, слід скористатися поєднанням атрибутів id і headers, щоб програмно пов'язати кожну комірку таблиці з заголовками (елементами <th>), з якими вона пов'язана.

Приклади

Приклади нижче містять таблиці з поступовим зростанням складності. Також шукайте поширені корисні техніки в нашому посібнику для початківців Стилізація таблиць.

Оскільки структура <table> включає використання кількох табличних елементів HTML, а також різних пов'язаних атрибутів, наступні приклади мають на меті надати спрощене пояснення, що охоплює основи та загальні стандарти. Додаткову та більш детальну інформацію можна знайти на відповідних сторінках, на які ведуть посилання.

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

У зв'язку з тим, як структуруються таблиці HTML, розмітка може швидко збільшуватися. Через це важливо ясно визначити призначення таблиці та остаточний її вигляд так, щоб утворити відповідну структуру. Логічна структура, розроблена за допомогою семантичної розмітки, не тільки легше стилізується, але й дозволяє створювати корисні та доступні таблиці, що піддаються розумінню та орієнтуванню будь-кого, в тому числі пошукових рушіїв і користувачів допоміжних технологій.

Перший приклад – базовий, а далі – зростання складності. Спершу розробляється дуже базова структура таблиці HTML. Перші два приклади не містять жодних розділових груп таблиці, як то визначених колонтитулів або тіла, та не містять жодного розтягування комірок або явно визначених відносин між комірками. Не задається навіть підпис. По ходу роботи з приклади вони поступово покращуються, щоб вмістити всі можливості таблиць, які повинна використовувати складна таблиця даних.

Базова таблиця

Цей приклад містить дуже базову таблицю з трьома рядами та двома стовпцями. Щоб продемонструвати типові стилі таблиць браузера, в цьому прикладі немає CSS.

HTML

Ряди таблиці визначені за допомогою елементів <tr>, а стовпці – за допомогою заголовних та даних комірок всередині них. Перший ряд містить заголовні комірки (елементи <th>), що служать заголовками стовпців для даних комірок (елементи <td>). Кожен елемент (<th> або <td>) на ряду знаходиться в відповідному стовпці – тобто перший елемент ряду знаходиться в першому стовпці, а другий елемент цього ряду – в другому стовпці.

<table>
  <tr>
    <th>Ім'я</th>
    <th>Вік</th>
  </tr>
  <tr>
    <td>Андрій Мельник</td>
    <td>28</td>
  </tr>
  <tr>
    <td>Ганна Мельник</td>
    <td>34</td>
  </tr>
</table>

Результат

До цієї таблиці не застосовується жодний кастомний CSS або користувацькі списки стилів. Стилізація відбувається виключно завдяки стилям користувацького агента.

Таблиця, розширена комірками-заголовками

Цей приклад розширює базову таблицю, розширюючи вміст і додаючи базові стилі CSS.

HTML

Ця таблиця вже складається з чотирьох рядів (елементів <tr>) по чотири стовпці кожен. Перший ряд – це рядок комірок-заголовків (перший ряд містить лише елементи <th>). Наступні ряди містять стовпчик-заголовок (елементи <th> як перші дочірні елементи кожного ряду) та три стовпчики даних (елементи <td>). Оскільки елементи розділових груп таблиці не використовуються, браузер автоматично визначає структуру груп вмісту, тобто всі ряди обгорнуті в тілі таблиці неявного елемента <tbody>.

<table>
  <tr>
    <th>Ім'я</th>
    <th>Ідентифікатор</th>
    <th>Дата реєстрації</th>
    <th>Баланс</th>
  </tr>
  <tr>
    <th>Марія Бойченко</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">6 червня 2010 р.</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <th>Антон Мазур</th>
    <td>533175</td>
    <td><time datetime="2011-01-13">13 січня 2011 р.</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th>Алла Кушнір</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">23 липня 2012 р.</time></td>
    <td>15.00</td>
  </tr>
</table>

CSS

За допомогою CSS додається базова стилізація, щоб утворити лінії навколо компонентів таблиці та зробити структуру даних яснішою. CSS додає суцільну межу навколо елемента <table> і навколо кожної комірки таблиці, включно з тими, що визначені і як елементи <th>, і як <td>, виділяючи кожну комірку-заголовок і комірку даних.

table {
  border: 2px solid rgb(140 140 140);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

Результат

Задання відносин між комірками таблиці

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

HTML

Цього можна досягнути шляхом додавання атрибута scope на елементах <th> з відповідним значенням: col (стовпець) або row (ряд).

<table>
  <tr>
    <th scope="col">Ім'я</th>
    <th scope="col">Ідентифікатор</th>
    <th scope="col">Дата реєстрації</th>
    <th scope="col">Баланс</th>
  </tr>
  <tr>
    <th scope="row">Марія Бойченко</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">6 червня 2010 р.</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <th scope="row">Антон Мазур</th>
    <td>533175</td>
    <td><time datetime="2011-01-13">13 січня 2011 р.</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th scope="row">Алла Кушнір</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">23 липня 2012 р.</time></td>
    <td>15.00</td>
  </tr>
</table>

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

[!NOTE] Якщо структура таблиці – ще складніша, то використання (на додачу) атрибута headers на елементах <th> і <td> може покращити доступність і допомогти допоміжним технологіям визначити відносини між комірками; див. Складні таблиці.

Явне задання розділових груп таблиці

На додачу до покращення доступності шляхом задання відносин між комірками, семантика таблиці може бути покращена шляхом додання розділових груп таблиці.

HTML

Оскільки перший ряд (елемент <tr>) містить лише комірки-заголовки стовпців і надає заголовок для решти вмісту таблиці, його можна обгорнути в елемент <thead>, щоб явно визначити цей ряд як верхній розділ таблиці. Крім того, те, що автоматично виконує браузер, також можна явно задати – розділ тіла таблиці, що містить основні дані таблиці, визначається шляхом обгортання відповідних рядів у елемент <tbody>. Явне використання елемента <tbody> допомагає браузеру відтворити задуману структуру таблиці, уникнувши небажаних результатів.

<table>
  <thead>
    <tr>
      <th scope="col">Ім'я</th>
      <th scope="col">Ідентифікатор</th>
      <th scope="col">Дата реєстрації</th>
      <th scope="col">Баланс</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Марія Бойченко</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">3 червня 2010 р.</time></td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Антон Мазур</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">13 січня 2011 р.</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Алла Кушнір</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">23 липня 2012 р.</time></td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

Знову таки, CSS і візуальний результат не змінюються – вказання таких розділових груп таблиці надає цінну контекстну інформацію для допоміжних технологій, серед яких читачі з екрана та пошукові рушії, а також для стилізації за допомогою CSS, яка буде показана в наступних прикладах.

Розтягування стовпців і рядів

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

HTML

Базуючись на раніше створеній таблиці, до кожного ряду тіла додається стовпець "Дати закінчення членства", за допомогою елемента <td>. Також в розділі заголовків (елемент <thead>) додається ще один ряд (елемент <tr>), щоб ввести заголовок "Дати членства" як заголовок для стовпчиків "Приєднання" та "Скасування".

Створення другого ряду заголовків передбачає додавання атрибутів colspan і rowspan до елементів <th>, щоб розподілити комірки-заголовки на відповідні стовпці та ряди.

<table>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Ім'я</th>
      <th scope="col" rowspan="2">Ідентифікатор</th>
      <th scope="col" colspan="2">Дати членства</th>
      <th scope="col" rowspan="2">Баланс</th>
    </tr>
    <tr>
      <th scope="col">Приєднання</th>
      <th scope="col">Скасування</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Марія Бойченко</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">3 червня 2010 р.</time></td>
      <td>–</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Антон Мазур</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">13 січня 2011 р.</time></td>
      <td><time datetime="2017-04-08">8 квітня 2017 р.</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Алла Кушнір</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">23 липня 2012 р.</time></td>
      <td>–</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

table {
  border: 2px solid rgb(140 140 140);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

Результат

Верхній розділ тепер має два ряди: один з заголовками (елементами <th>) "Ім'я", "Ідентифікатор", "Дати членства" і "Баланс", і заголовок "Дати членства" з двома підзаголовками, які знаходяться в другому ряду: "Приєднання" і "Скасування". Це досягається наступним чином:

Комірки-заголовки першого ряду "Ім'я", "Ідентифікатор" і "Баланс" розтягуються на обидва ряди заголовків таблиці за допомогою атрибута rowspan, що робить їх кожну два ряди заввишки.
Комірка-заголовок першого ряду "Дати членства" простягається на дві колонки за допомогою атрибута colspan, що робить її дві колонки завширшки.
Другий ряд містить лише дві комірки-заголовки "Приєднання" і "Скасування", оскільки інші три стовпчики об'єднані з комірками першого ряду, які простягаються на два ряди. Дві комірки-заголовки правильно розташовані під заголовком "Дати членства".

Підпис таблиці та підсумок стовпця

Поширеною та рекомендованою практикою є додавання підсумку до вмісту таблиці, даючи користувачам змогу швидко з'ясувати її доречність. Крім того, стовпчик "Баланс" підсумовується шляхом відображення суми балансів окремих членів.

HTML

Підсумок таблиці додається за допомогою підпису таблиці (елемента <caption>) як першого дочірнього елемента щодо <table>. Підпис надає таблиці доступний опис.

Наостанок, нижче тіла додається нижній розділ таблиці (елемент <tfoot>) з рядом, що підсумовує стовпчик "Баланс", відображаючи суму. Застосовуються елементи та атрибути, показані раніше.

<table>
  <caption>
    Статус членів клубу, 2021 рік
  </caption>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Ім'я</th>
      <th scope="col" rowspan="2">Ідентифікатор</th>
      <th scope="col" colspan="2">Дати членства</th>
      <th scope="col" rowspan="2">Баланс</th>
    </tr>
    <tr>
      <th scope="col">Приєднання</th>
      <th scope="col">Скасування</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Марія Бойченко</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">3 червня 2010 р.</time></td>
      <td>–</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Антон Мазур</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">13 січня 2011 р.</time></td>
      <td><time datetime="2017-04-08">8 квітня 2017 р.</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Алла Кушнір</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">23 липня 2012 р.</time></td>
      <td>–</td>
      <td>15.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="4">Сумарний баланс</th>
      <td>52.00</td>
    </tr>
  </tfoot>
</table>

table {
  border: 2px solid rgb(140 140 140);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

Результат

Базова стилізація таблиці

Застосуймо до таблиці базовий стиль, щоб підлаштувати гарнітуру та додати до рядів верху та низу background-color. HTML цього разу не змінюється, тому давайте одразу перейдемо до CSS.

<table>
  <caption>
    Статус членів клубу, 2021 рік
  </caption>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Ім'я</th>
      <th scope="col" rowspan="2">Ідентифікатор</th>
      <th scope="col" colspan="2">Дати членства</th>
      <th scope="col" rowspan="2">Баланс</th>
    </tr>
    <tr>
      <th scope="col">Приєднання</th>
      <th scope="col">Скасування</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Марія Бойченко</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">3 червня 2010 р.</time></td>
      <td>–</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Антон Мазур</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">13 січня 2011 р.</time></td>
      <td><time datetime="2017-04-08">8 квітня 2017 р.</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Алла Кушнір</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">23 липня 2012 р.</time></td>
      <td>–</td>
      <td>15.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="4">Сумарний баланс</th>
      <td>52.00</td>
    </tr>
  </tfoot>
</table>

CSS

Крім додання до елемента <table> властивості font, щоб задати більш візуально привабливу гарнітуру (або ж гидотну гарнітуру sans-serif, тут уже як вам завгодно), цікавим є другий стиль, де елементи <tr>, що знаходяться всередині елементів <thead> і <tfoot>, стилізуються шляхом додавання блакитного тла. Це спосіб швидко застосувати колір фону до всіх комірок в певних розділах одночасно.

table {
  border: 2px solid rgb(140 140 140);
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
}

thead > tr,
tfoot > tr {
  background-color: rgb(228 240 245);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

Результат

Поглиблена стилізація таблиці

Тепер час піти далі, застосувавши стилі до рядів як згори, так і в тілі, додавши почергові кольори рядів, рядки з різними кольорами, залежними від положення в ряду, і так далі. Спершу погляньмо на результат.

Результат

Ось який остаточний вигляд матиме таблиця:

Тут, знову таки, немає жодних змін до HTML. Погляньте, чого можна досягнути шляхом правильної підготовки структури HTML.

<table>
  <caption>
    Статус членів клубу, 2021 рік
  </caption>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Ім'я</th>
      <th scope="col" rowspan="2">Ідентифікатор</th>
      <th scope="col" colspan="2">Дати членства</th>
      <th scope="col" rowspan="2">Баланс</th>
    </tr>
    <tr>
      <th scope="col">Приєднання</th>
      <th scope="col">Скасування</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Марія Бойченко</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">3 червня 2010 р.</time></td>
      <td>–</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Антон Мазур</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">13 січня 2011 р.</time></td>
      <td><time datetime="2017-04-08">8 квітня 2017 р.</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Алла Кушнір</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">23 липня 2012 р.</time></td>
      <td>–</td>
      <td>15.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="4">Сумарний баланс</th>
      <td>52.00</td>
    </tr>
  </tfoot>
</table>

CSS

Цього разу CSS грає більше ролі. Він не складний, але в ньому чимало всього відбувається. Нумо розбиратися.

Тут додаються властивості border-collapse і border-spacing, щоб усунути проміжки між комірками та накласти одна на одну межі, що торкаються одна одної, щоб виходила одинарна межа, а не подвійна. Крім цього, внизу таблиці розміщується елемент <caption> за допомогою властивості caption-side:

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 2px solid rgb(140 140 140);
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
}

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

Далі використовується властивість padding, щоб надати всім коміркам таблиці простір навколо їх вмісту. Властивість vertical-align вирівнює вміст комірок-заголовків до bottom (нижнього краю) комірки, що видно на комірках у верхньому розділі, які простягаються на два ряди:

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 4px 6px;
}

th {
  vertical-align: bottom;
}

Наступне правило CSS задає background-color для всіх елементів <tr> у верху таблиці (як вказано за допомогою <thead>). Потім нижня межа верху встановлюється як двопіксельна лінія. Проте зверніть увагу, що використовується селектор :nth-of-type, аби застосувати властивість border-bottom до другого згори ряду. Чому? Тому що верх складається з двох рядів, на які простягається частина комірок. Це означає, що насправді є два ряди; застосування стилю до першого ряду не дало б очікуваного результату:

thead > tr {
  background-color: rgb(228 240 245);
}

thead > tr:nth-of-type(2) {
  border-bottom: 2px solid rgb(140 140 140);
}

Стилізуймо дві комірки-заголовки "Приєднання" та "Скасування" зеленою та червоною барвами, аби подати "добро" нового члена та "прикрість" скасування членства. Тут відбувається закопування в останній ряд верхнього розділу таблиці за допомогою селектора :last-of-type, і першій комірці-заголовку в ньому (заголовку "Приєднання") задається зеленувата барва, а другій (заголовку "Скасування") – червоняста:

thead > tr:last-of-type > th:nth-of-type(1) {
  background-color: rgb(225 255 225);
}

thead > tr:last-of-type > th:nth-of-type(2) {
  background-color: rgb(255 225 225);
}

Оскільки перший стовпець також повинен виділятися, до нього також додається стилізація. Це правило CSS стилізує першу комірку-заголовок в кожному ряду тіла таблиці за допомогою властивості text-align, щоб вирівняти імена членів по лівому краю, і з дещо іншим background-color:

tbody > tr > th:first-of-type {
  text-align: left;
  background-color: rgb(225 229 244);
}

Поширеною практикою є допомагати з покращенням читабельності даних таблиці шляхом чергування кольорів рядів – це іноді називають "смугами зебри". Додаймо до кожного парного ряду трохи background-color:

tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}

Оскільки стандартною практикою є вирівнювання грошових значень у таблицях по правому краю, зробімо це тут. Останньому елементу <td> в кожному ряду тіла таблиці задається властивість text-align зі значенням right:

tbody > tr > td:last-of-type {
  text-align: right;
}

І наостанок, трохи стилізації, схожої на верх, застосовується до нижнього розділу таблиці, щоб він також виділявся:

tfoot > tr {
  border-top: 2px dashed rgb(140 140 140);
  background-color: rgb(228 240 245);
}

tfoot th,
tfoot td {
  text-align: right;
  font-weight: bold;
}

Виведення великих таблиць у малому просторі

Поширеною проблемою таблиць у Вебі є те, що вони не дуже добре працюють нативно на дрібних екранах, коли кількість вмісту – велика, і як його прокручувати – неочевидно, особливо коли розмітка може бути отримана з CMS і не можна додати обгортку.

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

<table>
  <thead>
    <tr>
      <th>1<sup>3</sup> дорівнює:
      <th>2<sup>3</sup> дорівнює:
      <th>3<sup>3</sup> дорівнює:
      <th>4<sup>3</sup> дорівнює:
      <th>5<sup>3</sup> дорівнює:
      <th>6<sup>3</sup> дорівнює:
      <th>7<sup>3</sup> дорівнює:
  <tbody>
    <tr>
      <td>ряд 1: 1
      <td>ряд 1: 8
      <td>ряд 1: 27
      <td>ряд 1: 64
      <td>ряд 1: 125
      <td>ряд 1: 216
      <td>ряд 1: 343
    <tr>
      <td>ряд 2: 1
      <td>ряд 2: 8
      <td>ряд 2: 27
      <td>ряд 2: 64
      <td>ряд 2: 125
      <td>ряд 2: 216
      <td>ряд 2: 343
    <tr>
      <td>ряд 3: 1
      <td>ряд 3: 8
      <td>ряд 3: 27
      <td>ряд 3: 64
      <td>ряд 3: 125
      <td>ряд 3: 216
      <td>ряд 3: 343
    <tr>
      <td>ряд 4: 1
      <td>ряд 4: 8
      <td>ряд 4: 27
      <td>ряд 4: 64
      <td>ряд 4: 125
      <td>ряд 4: 216
      <td>ряд 4: 343
    <tr>
      <td>ряд 5: 1
      <td>ряд 5: 8
      <td>ряд 5: 27
      <td>ряд 5: 64
      <td>ряд 5: 125
      <td>ряд 5: 216
      <td>ряд 5: 343
    <tr>
      <td>ряд 6: 1
      <td>ряд 6: 8
      <td>ряд 6: 27
      <td>ряд 6: 64
      <td>ряд 6: 125
      <td>ряд 6: 216
      <td>ряд 6: 343
    <tr>
      <td>ряд 7: 1
      <td>ряд 7: 8
      <td>ряд 7: 27
      <td>ряд 7: 64
      <td>ряд 7: 125
      <td>ряд 7: 216
      <td>ряд 7: 343
    <tr>
      <td>ряд 8: 1
      <td>ряд 8: 8
      <td>ряд 8: 27
      <td>ряд 8: 64
      <td>ряд 8: 125
      <td>ряд 8: 216
      <td>ряд 8: 343
    <tr>
      <td>ряд 9: 1
      <td>ряд 9: 8
      <td>ряд 9: 27
      <td>ряд 9: 64
      <td>ряд 9: 125
      <td>ряд 9: 216
      <td>ряд 9: 343
    <tr>
      <td>ряд 10: 1
      <td>ряд 10: 8
      <td>ряд 10: 27
      <td>ряд 10: 64
      <td>ряд 10: 125
      <td>ряд 10: 216
      <td>ряд 10: 343
    <tr>
      <td>ряд 11: 1
      <td>ряд 11: 8
      <td>ряд 11: 27
      <td>ряд 11: 64
      <td>ряд 11: 125
      <td>ряд 11: 216
      <td>ряд 11: 343
    <tr>
      <td>ряд 12: 1
      <td>ряд 12: 8
      <td>ряд 12: 27
      <td>ряд 12: 64
      <td>ряд 12: 125
      <td>ряд 12: 216
      <td>ряд 12: 343
    <tr>
      <td>ряд 13: 1
      <td>ряд 13: 8
      <td>ряд 13: 27
      <td>ряд 13: 64
      <td>ряд 13: 125
      <td>ряд 13: 216
      <td>ряд 13: 343
    <tr>
      <td>ряд 14: 1
      <td>ряд 14: 8
      <td>ряд 14: 27
      <td>ряд 14: 64
      <td>ряд 14: 125
      <td>ряд 14: 216
      <td>ряд 14: 343
    <tr>
      <td>ряд 15: 1
      <td>ряд 15: 8
      <td>ряд 15: 27
      <td>ряд 15: 64
      <td>ряд 15: 125
      <td>ряд 15: 216
      <td>ряд 15: 343
    <tr>
      <td>ряд 16: 1
      <td>ряд 16: 8
      <td>ряд 16: 27
      <td>ряд 16: 64
      <td>ряд 16: 125
      <td>ряд 16: 216
      <td>ряд 16: 343
    <tr>
      <td>ряд 17: 1
      <td>ряд 17: 8
      <td>ряд 17: 27
      <td>ряд 17: 64
      <td>ряд 17: 125
      <td>ряд 17: 216
      <td>ряд 17: 343
    <tr>
      <td>ряд 18: 1
      <td>ряд 18: 8
      <td>ряд 18: 27
      <td>ряд 18: 64
      <td>ряд 18: 125
      <td>ряд 18: 216
      <td>ряд 18: 343
    <tr>
      <td>ряд 19: 1
      <td>ряд 19: 8
      <td>ряд 19: 27
      <td>ряд 19: 64
      <td>ряд 19: 125
      <td>ряд 19: 216
      <td>ряд 19: 343
    <tr>
      <td>ряд 20: 1
      <td>ряд 20: 8
      <td>ряд 20: 27
      <td>ряд 20: 64
      <td>ряд 20: 125
      <td>ряд 20: 216
      <td>ряд 20: 343
</table>

CSS

При розгляді цих стилів можна помітити, що властивість display таблиці має значення block. Хоч це і вмикає прокручування, таблиця втрачає частину своєї цілісності, і її комірки намагаються стати якомога меншими. Щоб пом'якшити цю проблему, на <tbody> задано white-space зі значенням nowrap. Проте цього не зроблено для <thead>, щоб довгі назви не змушували колонки бути ширшими, ніж їм потрібно для виведення даних.

Щоб залишити заголовки таблиці на сторінці при прокручуванні вниз, на елементах <th> задано position зі значенням sticky. Зверніть увагу, що не задається border-collapse зі значенням collapse, адже якщо це зробити, заголовок не зможе бути відокремлений від решти таблиці.

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

table,
th,
td {
  border: 1px solid black;
}

table {
  overflow: auto;
  width: 100%;
  max-width: 400px;
  height: 240px;
  display: block;
  margin: 0 auto;
  border-spacing: 0;
}

tbody {
  white-space: nowrap;
}

th,
td {
  padding: 5px 10px;
  border-top-width: 0;
  border-left-width: 0;
}

th {
  position: sticky;
  top: 0;
  background: #fff;
  vertical-align: bottom;
}

th:last-child,
td:last-child {
  border-right-width: 0;
}

tr:last-child td {
  border-bottom-width: 0;
}

Результат

Технічний підсумок

Категорії вмісту	Flow content
Дозволений вміст	У наступному порядку: необов'язковий елемент `<caption>`, нуль або більше елементів `<colgroup>`, необов'язковий елемент `<thead>`, щось одне з наступного: нуль або більше елементів `<tbody>` один або більше елементів `<tr>` необов'язковий елемент `<tfoot>`
Пропуск тега	Немає; і початковий, і кінцевий теги – обов'язкові.
Дозволені батьківські елементи	Всі елементи, що приймають потоковий вміст
Неявна роль ARIA	`table`
Дозволені ролі ARIA	Усі
Інтерфейс DOM	`HTMLTableElement`

Специфікації

Специфікація
HTML Standard (HTML) # the-table-element

Сумісність із браузерами

	desktop						mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
`table`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	Internet Explorer Full support Так	Opera Full support Так	Safari Full support Так	WebView Android Full support 1	Chrome Android Full support 18	Firefox for Android Full support 4	Opera Android Full support Так	Safari on iOS Full support Так	Samsung Internet Full support 1.0
`align` Нерекомендоване	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	Internet Explorer Full support Так	Opera Full support Так	Safari Full support Так	WebView Android Full support 1	Chrome Android Full support 18	Firefox for Android Full support 4	Opera Android Full support Так	Safari on iOS Full support Так	Samsung Internet Full support 1.0
`bgcolor` Нерекомендоване	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	Internet Explorer Full support Так	Opera Full support Так	Safari Full support Так	WebView Android Full support 1	Chrome Android Full support 18	Firefox for Android Full support 4	Opera Android Full support Так	Safari on iOS Full support Так	Samsung Internet Full support 1.0
`border` Нерекомендоване	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	Internet Explorer Full support Так	Opera Full support Так	Safari Full support Так	WebView Android Full support 1	Chrome Android Full support 18	Firefox for Android Full support 4	Opera Android Full support Так	Safari on iOS Full support Так	Samsung Internet Full support 1.0
`cellpadding` Нерекомендоване	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	Internet Explorer Full support Так	Opera Full support Так	Safari Full support Так	WebView Android Full support 1	Chrome Android Full support 18	Firefox for Android Full support 4	Opera Android Full support Так	Safari on iOS Full support Так	Samsung Internet Full support 1.0
`cellspacing` Нерекомендоване	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	Internet Explorer Full support Так	Opera Full support Так	Safari Full support Так	WebView Android Full support 1	Chrome Android Full support 18	Firefox for Android Full support 4	Opera Android Full support Так	Safari on iOS Full support Так	Samsung Internet Full support 1.0
`frame` Нерекомендоване	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	Internet Explorer Full support Так	Opera Full support Так	Safari Full support Так	WebView Android Full support 1	Chrome Android Full support 18	Firefox for Android Full support 4	Opera Android Full support Так	Safari on iOS Full support Так	Samsung Internet Full support 1.0
`rules` Нерекомендоване	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	Internet Explorer Full support Так	Opera Full support Так	Safari Full support Так	WebView Android Full support 1	Chrome Android Full support 18	Firefox for Android Full support 4	Opera Android Full support Так	Safari on iOS Full support Так	Samsung Internet Full support 1.0
`summary` Нерекомендоване	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	Internet Explorer Full support Так	Opera Full support Так	Safari Full support Так	WebView Android Full support 1	Chrome Android Full support 18	Firefox for Android Full support 4	Opera Android Full support Так	Safari on iOS Full support Так	Samsung Internet Full support 1.0
`width` Нерекомендоване	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	Internet Explorer Full support Так	Opera Full support Так	Safari Full support Так	WebView Android Full support 1	Chrome Android Full support 18	Firefox for Android Full support 4	Opera Android Full support Так	Safari on iOS Full support Так	Samsung Internet Full support 1.0

Дивіться також

Навчання – Основи таблиць HTML
<caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr> – інші елементи, пов'язані з таблицями
background-color – властивість CSS для задання фонового кольору таблиці
border, border-collapse, border-spacing – властивості CSS для керування виглядом меж комірок, лінійок і обрамлення
margin, padding – властивості CSS для вирівнювання таблиці та задання відступів для вмісту комірок
text-align – властивість CSS для горизонтального вирівнювання вмісту комірок
vertical-align – властивість CSS для вертикального вирівнювання вмісту комірок
width – властивість CSS для керування шириною таблиці

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.