Тег <caption>
Тег <caption> (укр. – “підпис”) використовується для надання підпису до таблиці. Він є єдиним елементом, який можна використовувати безпосередньо всередині тегу <table> для пояснення або заголовка таблиці. Тег <caption> допомагає поліпшити доступність і робить таблицю більш зрозумілою для користувачів і пошукових систем.
Атрибути
Специфічні атрибути
Тег <caption> не має специфічних атрибутів.
Глобальні атрибути
- id — унікальний ідентифікатор для елемента, який можна використовувати для стилізації або маніпуляцій за допомогою JavaScript. Наприклад:
<caption id="table-caption">Підпис до таблиці</caption>- class — задає клас для застосування стилів через CSS. Наприклад:
<caption class="table-title">Підпис до таблиці</caption>- style — дозволяє додавати інлайн-стилі до елемента. Наприклад:
<caption style="font-size: 1.2em; color: #333;">Підпис до таблиці</caption>- title — надає текстовий опис елемента, який відображається при наведенні курсора. Наприклад:
<caption title="Основна інформація таблиці">Підпис до таблиці</caption>
Приклад використання
<table>
<caption>Статистика продажів за 2024 рік</caption>
<thead>
<tr>
<th>Місяць</th>
<th>Продажі</th>
</tr>
</thead>
<tbody>
<tr>
<td>Січень</td>
<td>1200</td>
</tr>
<tr>
<td>Лютий</td>
<td>1300</td>
</tr>
</tbody>
</table>Додаткові моменти
- Для кожної таблиці використовуйте лише один тег
<caption>. Рекомендується не використовувати кілька підписів для однієї таблиці, оскільки це може викликати плутанину. - Якщо таблиця не має важливого опису або підпису, можна не використовувати його зовсім.
- Підпис таблиці важливий для доступності, особливо для користувачів, які використовують екранні читалки. Це допомагає зрозуміти, про що йде мова в таблиці без необхідності аналізувати всі її дані.
- Якщо таблиця має складну структуру або велике число стовпців, підпис може допомогти пояснити, як слід інтерпретувати інформацію.
- Підписи таблиць також допомагають пошуковим системам краще розуміти зміст таблиць на сторінці. Це може покращити видимість вашої таблиці в результатах пошуку.
- Тег
<caption>можна використовувати з CSS для створення адаптивних таблиць. Наприклад, ви можете змінювати розмір шрифтів або колір підпису в залежності від пристрою чи ширини екрану.
