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

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

На щастя, ми пройшли довгий шлях. Сьогодні таблиці використовуються спеціально для організації даних (як і має бути), а CSS вільно працює над позиціонуванням та компонуванням.

Побудова табличних даних, як і раніше, є випробуванням. Як таблиця повинна бути побудована в HTML багато в чому залежить від даних і як вони будуть відображатися. Потім, коли вони розмічені в HTML, таблиці повинні бути оформлені через CSS, щоб зробити інформацію більш чіткою і зрозумілою для користувачів. Створення таблиці Таблиці складаються з даних, що містяться в стовпцях і рядках і HTML пропонує кілька різних елементів для їх визначення та структурування. Як мінімум таблиця повинна складатися з елементів <table>, <tr> (table row, рядок таблиці) та <td> (table data, дані таблиці). Для покращення структури та додаткового семантичного значення таблиці можуть включати елемент <th> (table header, заголовок таблиці), а також кілька інших елементів. Коли всі ці елементи працюють разом, вони утворюють цілісну таблицю. ініціалізації таблиці на сторінці. Використання цього елемента означає, що інформація всередині цього елемента буде відображатися як таблична у вигляді необхідних стовпців та рядків.

<code data-language="html"><table> ...
</table>

Рядки таблиці

Після того, як таблиця була визначена в HTML, рядки таблиці можуть бути додані за допомогою елемента <tr>. Таблиця може містити багато рядків або елементів <tr>. Залежно від кількості інформації для відображення, кількість рядків таблиці може бути значною.

<code data-language="html"><table> <tr> ...
</tr> <tr> ...
</tr>
</table>

Дані таблиці

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

<table> <tr> <td>Не змушуйте мене думати Стів Круг</td> <td>На складі</td> <td>1</td> <td>$30.02</td>
</tr> <tr> <td>UX-дизайн. Практичний посібник із проектування досвіду взаємодії Расс Унгер, Керолайн Чендлер</td> <td>На складі</td> <td>2</td> <td>$52.94 ($26.47 &#215; 2)</td>
</tr> <tr> <td>Вивчаємо HTML5 Брюс Лоусон, Ремі Шарп</td> <td>Немає на складі</td> <td>1</td> <td>$22.23</td>
</tr> <tr> <td>Куленепробивний веб-дизайн Ден Сідерхолм</td> <td>На складі</td> <td>1</td> <td>$30.17</td>
</tr>
</table>

Заголовок таблиці

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

Різниця між цими двома елементами схожа на різницю між заголовками (елементи від <h1> до <h6>) та абзацами (елемент < ;р>). Хоча вміст заголовка можна помістити всередину абзацу, немає сенсу робити це. Тому що застосування заголовка додає більше семантичного змісту вмісту. Те саме вірно і для заголовків таблиці.

Заголовки таблиці можуть бути задіяні в стовпцях та рядках; дані таблиці визначають, де заголовки доречні. Атрибут scope допомагає точно визначити, який вміст пов'язаний із заголовком. Атрибут scope зі значеннями col, row, colgroup і rowgroup у елемента <th> застосовується до рядка або стовпця. Значення col і row. Значення col вказує, що кожен осередок усередині стовпця має безпосереднє відношення до цього заголовка таблиці, а значення row вказує, що кожен осередок в рядку відноситься безпосередньо до цього заголовка таблиці.

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

<table> <tr> <th scope="col">Назва</th> <th scope="col">Наявність</th> <th scope="col">Кількість</th> <th scope="col">Ціна</th>
</tr> <tr> <td>Не змушуйте мене думати Стів Круг</td> <td>На складі</td> <td>1</td> <td>$30.02</td>
</tr> <tr> <td>UX-дизайн. Практичний посібник із проектування досвіду взаємодії Расс Унгер, Керолайн Чендлер</td> <td>На складі</td> <td>2</td> <td>$52.94 ($26.47 &#215; 2)</td>
</tr> <tr> <td>Вивчаємо HTML5 Брюс Лоусон, Ремі Шарп</td> <td>Немає на складі</td> <td>1</td> <td>$22.23</td>
</tr> <tr> <td>Куленепробивний веб-дизайн Ден Сідерхолм</td> <td>На складі</td> <td>1</td> <td>$30.17</td>
</tr>
</table>

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

Структура таблиці

Знання про побудову таблиці та систематизації даних є вкрай потужними, однак є кілька додаткових елементів, які допоможуть нам організувати дані та структуру таблиці. Ці елементи включають <caption>, <thead>, <tbody> та <tfoot>.

<caption>

Елемент < caption> забезпечує підпис або назву таблиці. Підпис допоможе користувачам визначити, що стосується таблиці і які очікувані дані вони можуть знайти в ній. <caption> повинен слідувати відразу ж після тега <table> і розташовується у верхній частині таблиці за умовчанням.<code data-language="html"><table> <caption>Книги з дизайну та фронтенд-розробки</caption> ... </table>

<thead>, <tbody> і <tfoot>

Вміст таблиць може бути розбитий на кілька груп, включаючи шапку, тіло та підвал. Елементи <thead> (шапка таблиці), <tbody> (тіло таблиці) та <tfoot> (підвал таблиці) допомагають структурно організувати таблиці.

Шапка таблиці, <thead>, обертає рядок заголовка або рядки таблиці, щоб позначити їх шапкою. <thead> має бути поміщений у верхній частині таблиці, після будь-якого елементу <caption> і перед будь-яким елементом <tbody>.

Після <thead> можуть йти елементи < ;tbody> або <tfoot>. Спочатку елемент <tfoot> повинен йти відразу після елемента <thead>, але HTML5 надав у цьому свободу дій. Ці елементи тепер можуть зустрічатися в будь-якому порядку, але вони ніколи не повинні бути батьківськими елементами один одному. Елемент <tbody> повинен містити основні дані таблиці, у той час як <tfoot> містить опис даних таблиці.

<table> <caption>Книги з дизайну та фронтенд-розробки</caption> <thead> <tr> <th scope="col">Назва</th> <th scope="col">Наявність</th> <th scope="col">Кількість</th> <th scope="col">Ціна</th>
</tr>
</thead> <tbody> <tr> <td>Не змушуйте мене думати Стів Круг</td> <td>На складі</td> <td>1</td> <td>$30.02</td>
</tr> ...
</tbody> <tfoot> <tr> <td>Сума</td> <td></td> <td></td> <td>$135.36</td>
</tr> <tr> <td>ПДВ</td> <td></td> <td></td> <td>$13.54</td>
</tr> <tr> <td>Разом</td> <td></td> <td></td> <td>$148.90</td>
</tr>
</tfoot>
</table>

Об'єднання кількох осередків

Часто дві або більше осередки повинні бути об'єднані в одну, не порушуючи при цьому загального компонування рядків та стовпців. Можливо два осередки поруч один з одним містять однакові дані, є порожній осередок або осередки повинні бути об'єднані з метою стилізації. У таких випадках ми можемо використовувати атрибути colspan та rowspan. Ці два атрибути працюють з елементами <td> або <th>.

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

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

 <code data-language="html"><table> <caption>Книги з дизайну та фронтенд-розробки</caption> <thead> <tr> <th scope="col" colspan="2">Назва</th> <th scope="col">Кількість</th> <th scope="col">Ціна</th>
</tr>
</thead> <tbody> <tr> <td>Не змушуйте мене думати Стів Круг</td> <td>На складі</td> <td>1</td> <td>$30.02</td>
</tr> ...
</tbody> <tfoot> <tr> <td colspan="3">Сума</td> <td>$135.36</td>
</tr> <tr> <td colspan="3">ПДВ</td> <td>$13.54</td>
</tr> <tr> <td colspan="3">Разом</td> <td>$148.90</td>
</tr>
</tfoot>
</table>

Межі в таблиці

Ефективне використання кордонів може допомогти зробити таблицю наочнішою . Кордони навколо таблиці або окремих осередків можуть мати великий вплив, коли користувач намагається інтерпретувати дані та швидко сканувати інформацію. При стилізації кордонів через CSS є дві властивості, які можуть швидко стати в нагоді: border-collapse і border-spacing.

Властивість border-collapse

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

Властивість border-collapse визначає модель кордону таблиці. Є три значення для властивості border-collapse: collapse, separate та inherit. Значення за промовчанням separate у властивості border-collapse означає, що всі різні межі складаються один з одним, як описано вище. Значення collapse, з іншого боку, стискає межі в один, вибираючи комірку таблиці як основний.

table { border-collapse: collapse; } 
th, td { border: 1px solid #cecfd5; padding: 10px 15px; }

Властивість border-spacing

Коли властивість border-collapse зі значенням separate дозволяє з'єднувати один кордон з іншим, так як властивість border-spacing задає, яке відстань, якщо вона є, відображається між цими кордонами.

Наприклад, таблиця з однопіксельним кордоном навколо всієї таблиці та однопіксельним кордоном навколо кожного осередку матиме двопіксельний кордон навколо кожного осередку, тому що межі складаються один з одним. Додавання border-spacing зі значенням 4px відокремлює межі на 4 пікселі.

table { border-collapse: separate ; border-spacing: 4px; } 
table, th, td { border: 1px solid #cecfd5; } 
th, td { padding: 10px 15px; }

Властивість border-spacing працює тільки тоді, коли значення властивості border-collapse встановлено як separate, це значення за промовчанням. Якщо властивість border-collapse раніше не вказувалася, ми можемо використовувати властивість border-spacing не хвилюючись.

Крім того, властивість border-spacing може приймати два значення розміру: перше значення для горизонтальної відстані, а друге для вертикального. Наприклад, запис border-spacing: 5px 10px встановить 5 пикселів горизонтальної відстані між кордонами і 10 пикселів вертикального.

Додавання кордонів до рядків

Додавання меж до таблиці часом може бути складним, особливо при вставці меж між рядками. У таблиці кордону не можуть застосовуватися до елементів <tr> або структурних елементів таблиці, так що коли ми бажаємо поставити межу між рядками, буде потрібно деяке роздуми.

Почнемо з того, що встановимо властивість border-collapse для таблиці як collapse, а потім додамо нижній border до кожної комірки таблиці, незалежно від того, який це елемент, <th> або <td>. За бажанням ми можемо прибрати нижню межу у осередків в останньому рядку таблиці за допомогою псевдокласу :last-child, щоб вибрати останній елемент <tr> у таблиці та націлитись на елементи <td> всередині рядка. Крім того, якщо таблиця використовує структурні елементи, ми повинні переконатися, що останній рядок таблиці знаходиться в елементі <tfoot>.

table { border-collapse: collapse; } 
th, td { border-bottom: 1px solid #cecfd5; padding: 10px 15px; } 
tfoot tr:last-child td { border-bottom: 0; }

Чергування в таблиці

Серед зусиль зробити таблиці наочнішими, однією Типовою практикою дизайну є «чергування» рядків таблиці зі змінним кольором тла. Це робить рядки чіткішими та забезпечує наочність при скануванні інформації. Один із способів зробити це — помістити клас до кожного елемента <tr> через один і встановити колір фону для цього класу. Інший, більш простий спосіб полягає у використанні псевдокласу :nth-child з параметром even або odd , щоб вибрати кожен елемент <tr> через один.

Тут наша таблиця з книгами використовує псевдоклас :nth-child з параметром even для вибору всіх парних рядків таблиці та застосування до них сірого фону. Отже, кожен рядок через один у тілі таблиці буде сірим.

table { border-collapse: separate; border-spacing: 0; } 
th, td { padding: 10px 15px; } 
thead { background: #395870; color: #fff; } 
tbody tr:nth-child(even) { background: #f0f0f2; } 
td { border-bottom: 1px solid #cecfd5; border-right: 1px solid #cecfd5; } 
td:first-child { border-left: 1px solid #cecfd5; }

У цьому коді є кілька нюансів, про які варто згадати. Спочатку, елемент <table> явно містить властивість border-collapse зі значенням separate, а border-spacing задано як 0. Причина в тому, що елементи <td> включають межі , а елементи <th> немає. Без властивості border-collapse як separate межі у елементів <td> зроблять тіло і підвал таблиці ширше, ніж шапка. ми повинні бути обережними в тому, як межі застосовуються до елементів <td>. Тут межі встановлюються праворуч та знизу у всіх елементів <td>. Потім перший елемент <td> у <tr> отримує ліву межу. Оскільки всі елементи <td> з'єднуються разом з їх межами, це забезпечує появу суцільного кордону навколо кожного елемента.

Зрештою, всі елементи <th> отримує синій фон, а кожен парний елемент <tr> отримує сірий background через псевдоклас :nth-child.

Вирівнювання тексту

На додаток до меж та чергування, важливу роль у формуванні таблиці грає вирівнювання тексту всередині клітинок. Імена, описи тощо, як правило, вирівнюються по лівому краю, тоді як номери та інші числа вирівнюються праворуч. Інша інформація, залежно від контексту, може бути центром. Ми можемо перемістити текст по горизонталі за допомогою властивості text-align у CSS, як ми розглянули це в уроці 6, «Робота з друкаркою».

Для вирівнювання тексту по вертикалі, однак, застосовується властивість vertical-align. Ця властивість працює тільки з рядковими елементами та осередками таблиці і не буде працювати для блокових, рядково-блокових або інших елементів.

Властивість vertical-align приймає кілька різних значень, найпопулярніші — top, middle та bottom . Ці значення вертикально позиціонують текст щодо осередку таблиці або найближчого батьківського елемента для малих елементів. "attribute">vertical-align ми можемо очистити макет нашої таблиці з книгами. Зверніть увагу, що дані таблиці стає набагато ясніше і зручніше.

HTML

<code data-language="html"><table> <thead> <tr> <th scope="col" colspan="2">Назва</th> <th scope="col">Кількість</th> <th scope="col">Ціна</th>
</tr>
</thead> <tbody> <tr> <td> <strong class="book-title">Не змушуйте мене думати</strong> Стів Круг
</td> <td class="item-stock">На складі</td> <td class="item-qty">1</td> <td class="item-price">$30.02</td>
</tr> <tr> <td> <strong class="book-title">UX-дизайн. Практичний посібник із проектування досвіду взаємодії</strong> Расс Унгер, Керолайн Чендлер
</td> <td class="item-stock">На складі</td> <td class="item-qty">2</td> <td class="item-price">$52.94 <span class="item-multiple">$26.47 &#215; 2</span></td>
</tr> <tr> <td> <strong class="book-title">Вивчаємо HTML5</strong> Брюс Лоусон, Ремі Шарп
</td> <td class="item-stock">Немає на складі</td> <td class="item-qty">1</td> <td class="item-price">$22.23</td>
</tr> <tr> <td> <strong class="book-title">Куленепробивний веб-дизайн</strong> Ден Сідерхолм
</td> <td class="item-stock">На складі</td> <td class="item-qty">1</td> <td class="item-price">$30.17</td>
</tr>
</tbody> <tfoot> <tr> <td colspan="3">Сума</td> <td>$135.36</td>
</tr> <tr> <td colspan="3">ПДВ</td> <td>$13.54</td>
</tr> <tr> <td colspan="3">Разом</td> <td>$148.90</td>
</tr>
</tfoot>
</table>

CSS

table { border-collapse: separate; border-spacing: 0; color: #4a4a4d; font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; } 
th, td { padding: 10px 15px; vertical-align: middle; } 
thead { background: #395870; color: #fff; } 
th: first-child { text-align: left; } 
tbody tr:nth-child(even) { background: #f0f0f2; } 
td { border-bottom: 1px solid #cecfd5; border-right: 1px solid #cecfd5; } 
td:first-child { border-left: 1px solid #cecfd5; } 
.book-title { color: #395870; display: block; } 
.item-stock, .item-qty {text-align: center; } 
.item-price { text-align: right; } 
.item-multiple { display: block; } 
tfoot { text-align: right; } 
tfoot tr:last-child { background: #f0f0f2; }

Цілком стилізована таблиця

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

HTML

<code data-language="html"><table> <thead> <tr> <th scope="col" colspan="2">Назва</th> <th scope="col">Кількість</th> <th scope="col">Ціна</th>
</tr>
</thead> <tbody> <tr> <td> <strong class="book-title">Не змушуйте мене думати</strong> <span class="text-offset">Стив Коло</span>
</td> <td class="item-stock">На складі</td> <td class="item-qty">1</td> <td class="item-price">$30.02</td>
</tr> <tr> <td> <strong class="book-title">UX-дизайн. Практичний посібник із проектування досвіду взаємодії</strong> <span class="text-offset">Рас Унгер, Керолайн Чендлер</span>
</td> <td class="item-stock">На складі</td> <td class="item-qty">2</td> <td class="item-price">$52.94 <span class="text-offset item-multiple">$26.47 &#215; 2</span></td>
</tr> <tr> <td> <strong class="book-title"> Вивчаємо HTML5</strong> <span class="text-offset">Брюс Лоусон, Ремі Шарп</span>
</td> <td class="item-stock">Немає на складі</td> <td class="item-qty">1</td> <td class="item-price">$22.23</td>
</tr> <tr> <td> <strong class="book-title">Куленепробивний веб-дизайн</strong> <span class="text-offset">Ден Сідерхолм</span>
</td> <td class="item-stock">На складі</td> <td class="item-qty">1</td> <td class="item-price">$30.17</td>
</tr>
</tbody> <tfoot> <tr class="text-offset"> <td colspan="3">Сума</td> <td>$135.36</td>
</tr> <tr class="text-offset"> <td colspan="3">ПДВ</td> <td>$13.54</td>
</tr> <tr> <td colspan="3">Разом</td> <td>$148.90</td>
</tr>
</tfoot>
</table>

CSS

table { border-collapse: separate; border-spacing: 0; color: #4a4a4d; font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; } 
th, td { padding: 10px 15px; vertical-align: middle; } 
thead { background: #395870; background: linear-gradient(#49708f, #293f50); color: #fff; font-size: 11px; text-transform: uppercase; } 
th:first-child { border-top-left-radius: 5px; text-align: left; } 
th:last-child { border-top-right-radius: 5px; } 
tbody tr:nth-child(even) { background: #f0f0f2; } 
td { border-bottom: 1px solid #cecfd5; border-right: 1px solid #cecfd5; } 
td:first-child { border-left: 1px solid #cecfd5; } 
.book-title { color: #395870; display: block; } 
.text-offset { color: #7c7c80; font-size: 12px; } 
.item-stock, .item-qty {text-align: center; } 
.item-price { text-align: right; } 
.item-multiple { display: block; } 
tfoot { text-align: right; } 
tfoot tr:last-child { background: #f0f0f2; color: #395870; font-weight: bold; } 
tfoot tr:last-child td:first-child { border-bottom-left-radius: 5px; } 
tfoot tr:last-child td:last-child { border-bottom-right-radius: 5px; }

На практиці

Тепер, коли ми знаємо, як створити та стилізувати таблиці, давайте завершимо останню сторінку нашого сайту Styles Conference — розклад.

1. Ми почнемо нашу сторінку Розклад з відкриття файлу schedule.html і додавання елемента <section> з класом row, так само, як ми це зробили з усіма іншими сторінками. Всередині цього нового <section> також додамо елемент <div> з класом container.

   <code data-language="html"><section class="row"> <div class="container"> ...
   </div>
   </section>

   За допомогою цих елементів та класів ми створили новий розділ сторінки з білим background і вертикальним container на місці класу grid для елемента <div>.Оскільки ми не будемо використовувати будь-який