Таблиці¶

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

Елементи таблиці, по порядку

Дочірніми елементами таблиці є, в порядку зменшення:

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

Будучи рідним, семантичним елементом є кращим способом присвоєння імені таблиці. забезпечує описовий, програмно пов'язаний заголовок таблиці. За замовчуванням він помітний і доступний всім користувачам.

Напис відображається поза таблицею. Розташування напису можна встановити за допомогою властивості CSS caption-side , що краще, ніж використання застарілого атрибуту align . Це дозволяє встановити напис зверху та знизу. Позиціонування ліворуч і праворуч, за допомогою inline-start та inline-end, поки не підтримується повною мірою. Верх – це подання браузера за промовчанням.

Бажано, щоб таблиці даних мали чіткі заголовки та підписи, а також були досить простими та практично не вимагали пояснень. Слід пам'ятати, що не всі користувачі мають однакові когнітивні здібності. У тих випадках, коли таблиця робить висновки або іншим чином потребує інтерпретації, дайте коротке резюме основного положення або функції таблиці. Місце розміщення такого резюме залежить від його довжини та складності. Якщо воно коротке, використовуйте його як внутрішній текст підпису.Якщо довше, то коротко викладіть суть у підписі, а резюме дайте в абзаці, що передує таблиці, зв'язавши їх атрибутом aria-describedby . Інший варіант - помістити таблицю і помістити резюме в .

Секціонування даних¶

Вміст таблиць складається максимум із трьох секцій: нульовий або більше заголовків таблиці ( ), тіла таблиці ( ) та нижніх колонтитулів таблиці ( ). Усі вони є необов'язковими, причому підтримується нуль чи більше елементів.

Ці елементи не допомагають і не заважають доступності таблиці, але вони корисні для зручності використання. Вони надають гачки для стилізації. Наприклад, вміст заголовка можна зробити липким, а вміст можна зробити прокручується. Рядки, не вкладені в жодний з цих трьох елементів, неявно загорнуті в . Всі три елементи мають одну і ту ж неявну роль rowgroup. Жоден з цих трьох елементів немає специфічних для даного елемента атрибутів.

Що ми маємо зараз:

Елемент спочатку повинен був розташовуватися відразу після і з міркувань доступності, тому в застарілих кодових базах можна зустріти такий неінтуїтивний порядок вихідних текстів.

Зміст таблиці¶

Існували атрибути, що дозволяють додавати вставки між осередками та всередині осередків, межі та вирівнювання тексту. Cellpadding і cellspacing, що визначають простір між вмістом комірки та її кордоном, а також між межами сусідніх осередків, повинні задаватися за допомогою властивостей CSS border-collapse та border-spacing відповідно.border-spacing не матиме ефекту, якщо встановлено border-collapse: collapse . Якщо встановлено border-collapse: separate; , можна повністю приховати порожні осередки за допомогою empty-cells: hide; . Щоб дізнатися більше про стилізацію таблиць, можна скористатися інтерактивним слайдом table-related CSS styles.

У прикладах ми додали кордон на таблицю і кожен окремий осередок за допомогою CSS, щоб зробити деякі особливості більш помітними:

Осередок має семантичне значення, з неявними ARIA-ролями columnheader або rowheader. Вона визначає комірку як заголовок стовпця або рядка осередків таблиці, залежно від значення атрибута scope, що перераховується. Якщо значення scope не встановлено явно, браузер за замовчуванням приймає значення col або row . Оскільки ми використовували семантичну розмітку, осередок 1956 року має два заголовки: Year та Lou Minious. Ця асоціація говорить нам про те, що "1956" - це "рік" закінчення школи для "Lou Minious". У цьому прикладі, оскільки бачимо всю таблицю, асоціація візуально очевидна. Використання забезпечує асоціацію навіть у тому випадку, якщо стовпець або рядок заголовка пішли з поля зору. Ми могли б явно поставити Рік і Лу Мініус , але для такої простої таблиці, як ця, підійдуть значення, що перераховуються за умовчанням. Інші значення для scope включають rowgroup і colgroup, які корисні під час роботи зі складними таблицями.

Об'єднання осередків¶

Подібно до MS Excel, Google Sheets і Numbers, можна об'єднати кілька осередків в одну. Це робиться за допомогою HTML! Атрибут colspan використовується для об'єднання двох або більше сусідніх осередків у межах одного рядка.Атрибут rowspan використовується для об'єднання осередків у різних рядках, розташовуючись на осередку у верхньому рядку.

У цьому прикладі заголовок таблиці містить два рядки. Перший рядок заголовка містить три осередки, що охоплюють чотири стовпці: середній осередок має значення colspan = "2". Це поєднує два сусідні осередки. Перший і останній осередки містять rowspan="2" . Це поєднує комірку з коміркою в сусідньому рядку, розташованому безпосередньо під нею.

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

У випадках, коли осередок визначається декількома осередками-заголовками з асоціаціями, які не можуть бути задані лише атрибутами scope, слід увімкнути атрибут headers з розділеним пробілами списком асоційованих заголовків. Оскільки даний приклад є складнішою таблицю, ми явно визначаємо область видимості заголовків за допомогою атрибута scope . Для більшої наочності ми додали атрибут headers у кожну комірку.

Атрибути headers, можливо, і не були необхідні в такому простому випадку, але їх важливо мати у своєму арсеналі, коли таблиці стають дедалі складнішими. Таблиці зі складною структурою, наприклад, таблиці, в яких заголовки або комірки об'єднуються, або таблиці з більш ніж двома рівнями заголовків стовпців або рядків, вимагають явної ідентифікації пов'язаних з ними осередків заголовків. У таких складних таблицях необхідно явно пов'язати кожну комірку даних з кожним відповідним осередком заголовка зі списком розділених пробілами значень id всіх зв'язаних заголовків як значення атрибута headers.

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

Стилізація таблиць

Є два відносно маловідомі елементи, про які було сказано побіжно: група колонок, елемент , та його єдиний нащадок, порожній елемент колонки . Елемент використовується визначення груп стовпців, чи елементів , всередині таблиці.

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

На жаль, підтримується лише кілька властивостей, стилі не успадковуються в осередках, а єдиний спосіб використання елемента в націлення осередків - це складний селектор, що включає реляційний селектор: has ().

Для розбиття таблиці на лінії зручно використовувати структурні селектори CSS. Наприклад, tbody tr:nth-of-type(odd) додасть напівпрозорого чорного кольору до кожного непарного рядка в тілі таблиці, дозволяючи проявитися будь-яким фоновим ефектам, встановленим для .

Таблиці за замовчуванням не є чуйними. Швидше за умовчанням вони мають розміри, що відповідають їх вмісту. Для того, щоб стилізація макета таблиці ефективно працювала на різних пристроях, необхідно вжити додаткових заходів. Якщо ви змінюєте властивість CSS display для елементів таблиць, увімкніть атрибути ARIA role . Хоча це може бути зайвим, властивість CSS display може впливати на дерево доступності в деяких браузерах.

Подання даних¶

У той час як сортування стовпців таблиці відноситься до області JavaScript, розмітка заголовків, які повідомляють користувачам про можливість сортування стовпців, відноситься до області HTML. Повідомте користувачам про можливість сортування стовпців таблиці за допомогою піктограм, що показують сортування за зростанням, спаданням або без сортування. Стовпець, що сортується в даний момент, повинен містити атрибут aria-sort з перерахованим значенням напрямку сортування. Стовпець може ввічливо повідомляти про оновлення порядку сортування за допомогою атрибуту aria-live і динамічно оновлюваного span, що видно користувачам програми читання з екрана. Оскільки стовпець сортується клацанням миші за заголовком, вміст заголовка має бути .

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

Як використовувати rowspan у HTML для об'єднання осередків у таблицях

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

Використання rowspan досить просто, ми вибираємо комірку, яку ми хотіли б об'єднати, використовуючи атрибут rowspan. Як значення ми вказуємо, скільки рядів таблиці хочемо об'єднати. Розглянемо приклад, де у нас є таблиця із форматуванням:

У цьому прикладі ми використовуємо rowspan для об'єднання двох рядів осередків PlayStation 4 в одну комірку. Таким чином, ми створюємо єдину комірку для двох різних версій консолі, які розташовані на різних рядах таблиці.

Зазначимо, що атрибут rowspan можна застосовувати як для рядків таблиці, а й у стовпців. Таким чином, ми можемо поєднати кілька стовпців таблиці в один, використовуючи атрибут colspan.

Ось приклад використання colspan для об'єднання трьох стовпців в один:

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

HTML: Об'єднання осередків усередині рядків та стовпців

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

У HTML-розмітці об'єднати осередки в стовпцях або рядках можна за допомогою спеціальних атрибутів colspan та rowspan. Їх значеннями є кількість осередків праворуч (для colspan) або знизу (для rowspan), які потрібно об'єднати з поточною. Відлік починається з поточної комірки, до якої застосовано властивість. Наприклад, якщо стоїть значення colspan="2" , то буде об'єднано поточний осередок із сусіднім.

Розмітка для прикладу вище без урахування об'єднання осередків буде такою:

Товар
Ціна
Кількість



Чай
Немає на складі

Для того щоб об'єднати осередки, потрібно зробити дві дії:
1. У тег комірки, яку об'єднуватимемо, додати атрибут colspan зі значенням, що дорівнює кількості комірок, що об'єднуються праворуч
2. Видалити зайві осередки з рядка

Товар
Ціна
Кількість



Чай
Немає на складі

Для об'єднання осередків по вертикалі використовується атрибут rowspan. Алгоритм дій повторює аналогічний при об'єднанні по горизонталі. Єдина відмінність — видаляти комірки потрібно в сусідніх рядках:

Співробітник
Зарплата
Бонуси
Менеджер



Олексій Примадонін
750$
63$
Кодовенька Хекслетович

Веніамін Редакторович
1200$
0

У прикладі двоє співробітників взаємодіють із одним менеджером. Можна вказати його двічі, але наочніше поєднати осередки по вертикалі. Для цього був доданий атрибут rowspan="2" , а в другому рядку видалено четвертий осередок, так як його місце займе осередок вище

Завдання

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

Якщо ви зайшли в глухий кут, то саме час поставити питання в «Обговореннях». Як правильно поставити запитання:

• Обов'язково докладіть виведення тестів, без нього практично неможливо зрозуміти, що не так, навіть якщо ви покажете свій код. Програмісти погано виконують код у голові, але за помилкою майже завжди зрозуміло, куди дивитися.

Тести влаштовані таким чином, що вони перевіряють рішення різними способами та на різних даних. Часто рішення працює з одними вхідними даними, але з іншими. Щоб розібратися з цим моментом, вивчіть вкладку «Тести» та уважно подивіться на виведення помилок, у якому є підказки.

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

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

Створювати навчальні матеріали, зрозумілі всім без винятку, досить складно. Ми дуже намагаємося, але завжди є що покращувати. Якщо ви зустріли матеріал, який вам незрозумілий, напишіть проблему в «Обговореннях». Ідеально, якщо ви сформулюєте незрозумілі моменти як запитань. Зазвичай нам потрібно кілька днів для внесення поправок.

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