HTML Таблиці

Якщо ви не вкажете межу для таблиці, вона відображатиметься без меж. Кордон встановлюється за допомогою CSS властивості border:

приклад

HTML Таблиця - Згорнуті межі - border-collapse

приклад

HTML Таблиця - Додавання відступу в осередках - padding

Відступ (padding) в комірці визначає простір між вмістом комірки та її межами. Якщо ви не вкажете відступ (padding), осередки таблиці будуть відображатися без відступу. Щоб встановити відступ, використовуйте CSS властивість padding :

приклад

HTML Таблиця - Заголовки з лівого краю - text-align

За замовчуванням заголовки таблиці виділені жирним шрифтом та вирівняні по центру. Щоб вирівняти заголовки таблиці лівим краєм, використовуйте CSS властивість text-align :

приклад

HTML Таблиця - Додавання інтервалу кордону - border-spacing

Інтервал кордону (border spacing) визначає простір між осередками. Щоб встановити інтервал кордонів для таблиці, використовуйте властивість CSS border-spacing :

приклад

Примітка: Якщо таблиця має згорнуті межі (тобто значення border-collapse), то border-spacing не діє.

HTML Таблиця - Осередки, які охоплюють багато стовпців - colspan

приклад

HTML Таблиця - Осередки, які охоплюють багато рядків - rowspan

приклад

HTML Таблиця - Додавання підпису - caption

приклад

Спеціальний стиль для однієї таблиці – атрибут Id

приклад

Тепер ви можете визначити спеціальний стиль для цієї таблиці:

І додати більше стилів:

table#t01 tr:nth-child(even) <
background-color: #eee;
>
table#t01 tr:nth-child(odd) <
background-color: #fff;
>
table#t01 th <
color: white;
background-color: black;
>

Резюме розділу

HTML Вправи

HTML Теги таблиці

Щоб отримати повний список всіх доступних тегів HTML, відвідайте HTML Довідник тегів на нашому сайті W3Schools російською.

Запитання для самоконтролю

• Навіщо потрібні HTML-таблиці?
• Який тег визначає HTML-таблицю?
• Яким тегом визначається кожен рядок HTML-таблиці?
• Яким тегом визначається кожен заголовок HTML-таблиці?
• Яким тегом визначається кожен осередок з даними HTML-таблиці?
• Які елементи можуть містити осередки з даними HTML-таблиці?
• За допомогою якої CSS-властивості можна додати кордон до HTML таблиці?
• За допомогою якого CSS-властивості можна згорнути межі HTML-таблиці в одну лінію?
• Як додати внутрішній відступ у осередках HTML-таблиці?
• Як вирівняти заголовки HTML-таблиці з лівого краю?
• Як додати інтервал між межами HTML-таблиці?
• Як зробити комірку, яка охоплює більше одного стовпця HTML-таблиці?
• Як зробити комірку, яка охоплює більше одного рядка HTML-таблиці?
• Як додати підпис до HTML-таблиці?
• Де потрібно вставити тег HTML-таблиці?
• Як визначити спеціальний стиль для однієї конкретної HTML таблиці?

ПАЛІТРА КОЛЬОРІВ

ПРИЄДНУЙТЕСЯ!

Зв'язок з адміном

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

Топ Підручники

Топ Довідники

Топ Приклади

Веб Сертифікати

Цей сайт оптимізовано для навчання та тестування. Приклади можуть бути спрощені для покращення читання та базового розуміння. Навчальні посібники, посилання та приклади постійно переглядаються, щоб уникнути помилок, але ми не можемо гарантувати повну правильність та працездатність всього контенту. Використовуючи цей сайт, ви погоджуєтесь з тим, що прочитали та прийняли умови використання, cookie та політику конфіденційності.
Також ви можете абсолютно безкоштовно скачати офлайн версію сайту W3Schools російською архівом з GitHub та користуватися локально на своєму комп'ютері.
Також доступна версія сайту W3Schools українською мовою.
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.
Сайт працює на фреймворку W3.CSS.

Таблиці¶

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

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

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



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

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

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



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

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

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



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

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

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

Завдання

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

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

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

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

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

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

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

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