Атрибут class тега <td>
Описание
Атрибут class для элемента <td> позволяет назначать один или несколько CSS-классов для стилизации ячейки таблицы. Это стандартный способ применения стилей к табличным данным.
<table>
<tr>
<td class="highlight numeric">150.00</td>
<td class="text-left warning">Превышение</td>
</tr>
</table>
Основные возможности:
| Применение | Преимущества | Пример CSS |
|---|---|---|
| Стилизация ячеек | Гибкое управление внешним видом | .highlight { background: #ffeb3b; } |
| Типы данных | Семантическая разметка содержимого | .numeric { text-align: right; } |
| Состояния | Визуальное отображение статусов | .warning { color: #f44336; } |
Особенности работы:
- Можно назначать несколько классов через пробел
- Классы наследуют CSS-правила по каскаду
- Поддерживаются всеми браузерами
- Работают с псевдоклассами (:hover, :nth-child)
Пример с CSS:
<style>
.data-cell {
padding: 8px;
border: 1px solid #ddd;
}
.important {
font-weight: bold;
background-color: #fff8e1;
}
.negative {
color: #d32f2f;
}
</style>
<table>
<tr>
<td class="data-cell important">Итого:</td>
<td class="data-cell important negative">-15%</td>
</tr>
</table>
Рекомендации:
- Используйте семантические имена классов
- Разделяйте стили по разным классам (принцип единственной ответственности)
- Применяйте методологии именования (БЭМ, OOCSS)
- Избегайте избыточного количества классов
Ограничения:
- Могут возникать конфликты специфичности CSS
- Избыточное количество классов усложняет поддержку
- Требуется аккуратность при каскадном наследовании
Примечание: Для сложных проектов рассмотрите использование CSS-модулей или CSS-in-JS для изоляции стилей ячеек таблицы.