Атрибут class тега <th>

Описание

Атрибут class в теге <th> позволяет назначать один или несколько CSS-классов для заголовочной ячейки таблицы. Это стандартный способ применения стилей и JavaScript-селекторов к элементам таблицы.

Пример использования:
<table> <tr> <th class="header-main highlight">Основной заголовок</th> <th class="header-secondary">Дополнительный</th> </tr> <tr> <td>Данные</td> <td>Данные</td> </tr> </table>

Синтаксис и правила:

Параметр Описание Пример
Разделение классов Пробел между именами классов class="class1 class2"
Именование Латинские буквы, цифры, дефисы, подчёркивания class="table-header"
Регистр букв Чувствителен к регистру class="Header" ≠ class="header"

Основные применения:

  • Стилизация: CSS-оформление заголовков таблицы
  • JavaScript: Выбор элементов через querySelector
  • Доступность: Семантическая разметка для ARIA
  • Фреймворки: Интеграция с Bootstrap и другими библиотеками

Пример с CSS-стилями:

<style> .financial-header { background-color: #f8f9fa; font-weight: bold; text-align: center; } .highlight { color: #dc3545; border-bottom: 2px solid #dc3545; } </style> <table border="1"> <tr> <th class="financial-header highlight">Важные данные</th> <th class="financial-header">Обычные данные</th> </tr> </table>

Рекомендации:

  • Используйте осмысленные имена классов
  • Придерживайтесь единого стиля именования (BEM, kebab-case)
  • Разделяйте классы по функциональности
  • Избегайте избыточного количества классов

Ограничения и предупреждения:

  • Не используйте классы как замену семантической разметки
  • Избегайте слишком общих имен (например, "header")
  • Не злоупотребляйте !important в CSS-правилах
  • Учитывайте специфичность селекторов

Пример с JavaScript:

<table id="data-table"> <tr> <th class="sortable">Имя</th> <th class="sortable active">Дата</th> </tr> </table> <script> document.querySelectorAll('.sortable').forEach(header => { header.addEventListener('click', () => { console.log('Сортировка по', header.textContent); }); }); </script>

Примечание: Для сложных таблиц рекомендуется:

  • Использовать CSS-методологии (BEM, SMACSS)
  • Применять data-атрибуты для дополнительной информации
  • Разделять стили и логику через модульные классы