Атрибут style тега <thead>

Описание

Атрибут style в теге <thead> позволяет задавать CSS-стили непосредственно для группы заголовков таблицы. Это инлайновое (встроенное) применение стилей с наивысшим приоритетом.

Пример использования:
<table border="1"> <thead style="background-color: #f8f9fa; font-weight: bold; border-bottom: 2px solid #dee2e6;"> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> </tr> </thead> <tbody> <tr> <td>Данные 1</td> <td>Данные 2</td> </tr> </tbody> </table>

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

Элемент Пример Описание
Разделение свойств ; Точка с запятой между свойствами
Формат значений свойство: значение Как в обычном CSS
Кавычки style="..." Обязательны для HTML-атрибута

Особенности работы:

  • Имеет наивысший приоритет (кроме !important в CSS)
  • Применяется ко всем заголовкам внутри <thead>
  • Не поддерживает селекторы и медиазапросы
  • Может переопределять стили из внешних CSS-файлов

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

  • Используйте для разовых стилевых правок
  • Избегайте для сложного оформления
  • Для повторяющихся стилей применяйте CSS-классы
  • Сохраняйте читаемость (пробелы, переносы строк)

Ограничения:

  • Усложняет поддержку кода
  • Невозможно повторное использование
  • Нет поддержки псевдоклассов (:hover)
  • Может конфликтовать с CSS-методологиями

Пример с JavaScript:

<table id="dynamic-table"> <thead> <tr> <th>Динамические стили</th> </tr> </thead> </table> <script> document.querySelector('#dynamic-table thead').style = ` background: linear-gradient(to right, #6a11cb, #2575fc); color: white; font-size: 1.2em; `; </script>

Примечание: Для профессиональной разработки:

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