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

Описание

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

Пример использования:
<table border="1"> <tr> <th dir="ltr">Left-to-Right (English)</th> <th dir="rtl">يمين إلى يسار (Arabic)</th> <th dir="auto">混合文本 Mixed Text</th> </tr> <tr> <td>Data</td> <td>بيانات</td> <td>数据</td> </tr> </table>

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

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

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

  • Влияет на направление текста и положение полосы прокрутки
  • Автоматически меняет выравнивание текста (для RTL - справа)
  • Может наследоваться от родительских элементов
  • Поддерживается всеми современными браузерами

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

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

Пример с CSS:

<style> th[dir="rtl"] { background-color: #f0f0f0; font-family: 'Arial Arabic', sans-serif; } </style> <table border="1"> <tr> <th dir="rtl" lang="ar">اسم المنتج</th> <th dir="rtl" lang="ar">السعر</th> </tr> </table>

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

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

Примечание: Для сложных RTL-интерфейсов:

  • Используйте CSS-свойство direction
  • Применяйте <bdi> для изолированного текста
  • Рассмотрите специализированные библиотеки (например, для арабского)