Таблиці¶

У цьому розділі ми розглянемо всі елементи, з яких складається таблиця, а також деякі особливості доступності та зручності використання, які слід враховувати при поданні табличних даних. Хоча "Вивчення 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, тому ми розглянемо їх далі.

Створення таблиці в HTML

У мові розмітки HTML таблиці використовуються як подання будь-яких даних як рядків і стовпців, а й як форматування сторінок і завдання розташування різних елементів.

Іншими словами, HTML оформлення таблиці може бути зовсім не помітним, проте виконувати функцію каркаса, займаючи всю веб-сторінку.

Можна помістити, наприклад, її лівий стовпець меню, основну інформацію в середній, а контактні дані — в правий.

Оновлено: 2024-02-22 14:35:43 Вадим Дворніков автор матеріалу

Як зробити таблицю в HTML?

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

Стовпець 1
Стовпець 2
Стовпець 3

У вікні браузера щойно створена таблиця виглядає так:

Таблиця починається з тега

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

Межі та рамки

Стовпець 1
Стовпець 2
Стовпець 3

Як вставити картинку в HTML - використовуйте тег для додавання зображень на веб-сторінку.

Колір фону та тексту

• background — як тло використовується зображення. Вказати можна або ім'я файлу, або шлях до нього;
• bgcolor - тлом є певний колір. Вказати можна як назву відтінку, що цікавить, так і шістнадцятковий код.

Щоб змінити колір тексту в таблиці HTML, потрібно використовувати тег .

Осередок 1

Осередок 3
Осередок 4

Відступи таблиці в HTML

• cellspacing - відстань між межами сусідніх осередків;
• cellpading — відстань між вмістом та межею осередку.

Осередок 1


background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Комірка 3
Осередок 4

Візуальне відображення цього коду у браузері таке:

Для створення відступу HTML використовуйте тег

з CSS властивістю margin.

Вирівнювання таблиці в HTML

Для кожного окремого осередку або рядка можна задати два параметри, які виконують горизонтальне ( align ) і вертикальне ( valign ) вирівнювання тексту в таблиці HTML.

Параметр align може мати такі значення:

• left - вирівнювання по лівій межі;
• right - вирівнювання по правій межі;
• center - вирівнювання по центру.

Параметр valign може мати такі значення:

• bottom - вирівнювання по нижній межі;
• top - вирівнювання по верхній межі;
• middle – вирівнювання посередині.

Як зробити таблицю по центру HTML? За допомогою цього значення center .

Вставка зображення у HTML таблицю

Вміст 2 осередки


Вміст 3 комірки
Вміст 4 осередки

Тег td використовується в HTML для створення осередків у рядках таблиці.

Додатковими атрибутами у цьому випадку є:

• width - ширина;
• height - Висота;
• alt — альтернативний текст, який відображається у браузері при відключеній функції відображення зображень;
• title - підпис до картинки;
• align - горизонтальне вирівнювання;
• valign - вертикальне вирівнювання.

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

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

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

Текст 2

Текст 2
Текст 3
Текст 4

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

Текст 1
Текст 2

Текст 3

Текст 4

Генератори HTML таблиць

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

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

Одним з найбільш поширених генераторів таблиць є сервіс http://www.2createawebsite.com/build/table_generator.html .

Це відмінний варіант для генерації найпростіших таблиць, проте для більш серйозних цілей рекомендуємо скористатися іншими сервісами:

Генератор таблиць html також має не надто багато налаштувань, проте колір для фону та межі таблиці ви можете підібрати з палітри кольорів.

Цей сервіс має досить зручний HTML редактор, у якому можна побудувати, заповнити таблицю, та був отримати її код:

Таким чином, таблиця є не лише важливим статистичним елементом у всіх сферах життя, але й невід'ємною частиною веб-дизайну та верстки.

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