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

Описание

Атрибут dir в теге <thead> определяет направление текста для всех заголовков таблицы. Особенно полезен для языков с написанием справа налево (RTL), таких как арабский или иврит.

Пример использования:
<table border="1"> <thead dir="rtl"> <tr> <th>اسم المنتج</th> <th>السعر</th> </tr> </thead> <tbody dir="ltr"> <tr> <td>Product A</td> <td>100$</td> </tr> </tbody> </table>

Значения атрибута:

Значение Описание Когда использовать
ltr Слева направо (Left-to-right) Для языков с LTR-направлением (английский, русский)
rtl Справа налево (Right-to-left) Для языков с RTL-направлением (арабский, иврит)
auto Автоматическое определение Когда направление неизвестно заранее

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

  • Автоматически меняет выравнивание текста (для RTL - справа)
  • Влияет на порядок столбцов в RTL-режиме
  • Работает в сочетании с атрибутом lang
  • Наследуется всеми ячейками внутри <thead>

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

  • Для RTL-языков указывайте dir="rtl" в <html>
  • Сочетайте с lang для правильной семантики
  • Тестируйте таблицы в обоих направлениях
  • Используйте CSS для тонкой настройки отображения

Пример с CSS:

<style> .rtl-headers th { font-family: 'Arial Arabic', Tahoma; padding: 10px 15px; } </style> <table> <thead dir="rtl" lang="ar" class="rtl-headers"> <tr> <th>العمود الأول</th> <th>العمود الثاني</th> </tr> </thead> </table>

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

  • Не все браузеры полностью поддерживают RTL-таблицы
  • Сложности с выравниванием чисел в RTL-режиме
  • Может потребоваться дополнительная CSS-настройка
  • Ограниченная поддержка auto в старых браузерах

Примечание: Для профессиональной RTL-поддержки:

  • Используйте CSS-свойство direction
  • Применяйте <bdi> для смешанного контента
  • Тестируйте с реальными RTL-языками