Атрибут class тега <table>
Описание
Атрибут class позволяет назначать один или несколько CSS-классов элементу <table>. Эти классы используются для стилизации таблицы и управления её отображением через CSS.
<table class="data-table striped-table">
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Данные</td>
<td>Данные</td>
</tr>
</table>
Основные возможности:
| Применение | Пример класса | Описание |
|---|---|---|
| Базовая стилизация | .data-table |
Основные стили таблицы |
| Модификаторы | .striped-table |
Чередование строк |
| Состояния | .hoverable |
Эффекты при наведении |
| Размеры | .compact-table |
Компактное отображение |
Пример CSS для классов таблицы:
<style>
/* Базовые стили таблицы */
.data-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1rem;
}
/* Чередование цветов строк */
.striped-table tr:nth-child(even) {
background-color: #f2f2f2;
}
/* Эффекты при наведении */
.hoverable-table tr:hover {
background-color: #e6f7ff;
}
/* Компактный вариант */
.compact-table td, .compact-table th {
padding: 4px 8px;
}
</style>
<table class="data-table striped-table hoverable-table">
<!-- Содержимое таблицы -->
</table>
Рекомендации по именованию:
- Используйте осмысленные имена классов
- Придерживайтесь методологии (BEM, SMACSS)
- Разделяйте стили на базовые и модификаторы
- Избегайте слишком общих имен (например, "table1")
Преимущества использования классов:
- Возможность повторного использования стилей
- Гибкое управление отображением
- Поддержка медиазапросов для адаптивности
- Возможность комбинировать несколько стилей
Примечание: Для сложных таблиц с динамическим контентом используйте классы в сочетании с атрибутами data-* для управления отображением через JavaScript.