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

Описание

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

Пример использования:
<table border="1"> <tr> <th style="background-color: #f2f2f2; color: #333; padding: 10px;">Заголовок 1</th> <th style="background-color: #4CAF50; color: white; text-align: center;">Заголовок 2</th> </tr> <tr> <td>Данные 1</td> <td>Данные 2</td> </tr> </table>

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

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

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

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

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

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

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

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

Пример с JavaScript:

<table border="1"> <tr> <th id="dynamic-header">Заголовок</th> </tr> </table> <script> document.getElementById('dynamic-header').style = ` background-color: #2196F3; color: white; font-weight: bold; `; </script>

Сравнение с CSS-классами:

Критерий Атрибут style CSS-классы
Приоритет Высокий Средний
Повторное использование Нет Да
Поддержка сложных стилей Ограничена Полная

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

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