Атрибут class тега <caption>
Описание
Атрибут class для элемента <caption> позволяет назначать один или несколько CSS-классов для стилизации заголовка таблицы. Этот атрибут используется для:
- Применения CSS-стилей к заголовку таблицы
- Группировки элементов с общим стилем
- Обращения к элементу через JavaScript
<table>
<caption class="table-caption highlight">Результаты продаж за 2023 год</caption>
<!-- Содержимое таблицы -->
</table>
<style>
.table-caption {
font-size: 1.2em;
font-weight: bold;
padding: 10px;
text-align: center;
}
.highlight {
background-color: #f8f9fa;
border-bottom: 2px solid #dee2e6;
}
</style>
| Аспект | Описание | Особенности |
|---|---|---|
| Синтаксис | Пробел-разделенный список классов | class="class1 class2" |
| Наследование | Не наследует стили от таблицы | Стили применяются только к caption |
| Специфичность | Работает с CSS-селекторами | .table-caption { ... } |
Практические примеры:
1. Стилизация нескольких заголовков:
<style>
.report-title {
color: #2c3e50;
font-family: 'Arial', sans-serif;
margin-bottom: 15px;
}
</style>
<table>
<caption class="report-title">Финансовый отчет Q1</caption>
<!-- ... -->
</table>
<table>
<caption class="report-title">Финансовый отчет Q2</caption>
<!-- ... -->
</table>
2. Динамическое изменение через JavaScript:
<table>
<caption id="data-caption" class="data-caption">Загрузка данных...</caption>
<!-- ... -->
</table>
<script>
// Добавляем класс при загрузке данных
document.getElementById('data-caption').classList.add('loaded');
// Стиль для загруженных данных
.data-caption.loaded {
color: green;
font-weight: bold;
}
</script>
Рекомендации:
- Используйте семантичные имена классов (например, "report-title")
- Избегайте избыточного количества классов
- Для сложной стилизации сочетайте с другими селекторами
- Придерживайтесь единого стиля именования в проекте
Ограничения:
- Не влияет на положение caption (управляется через caption-side)
- Стили не применяются к содержимому таблицы
- Некоторые свойства (например, width) могут вести себя неожиданно
Примечание: Хотя элемент <caption> поддерживает атрибут class, для сложных таблиц рекомендуется использовать современные подходы к стилизации, такие как CSS Grid или Flexbox.