Атрибут tabindex тега <tbody>

Описание

Атрибут tabindex для элемента <tbody> позволяет управлять порядком фокусировки группы строк таблицы при навигации с клавиатуры (Tab/Shift+Tab). В обычных условиях элементы таблицы не получают фокус.

Пример использования:
<table> <tbody tabindex="0"> <tr> <td>Фокус на группе строк</td> <td>Нажмите Tab</td> </tr> </tbody> </table>

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

Значение Описание Когда использовать
-1 Позволяет фокусироваться программно, но исключает из последовательной навигации Для динамических таблиц с управлением через JS
0 Включает в естественный порядок навигации Для интерактивных табличных блоков
положительное число Определяет явный порядок перехода (1 → 2 → 3) Не рекомендуется (нарушает естественный поток)

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

  • По умолчанию элементы таблицы не фокусируемы
  • Фокус применяется ко всей группе строк (<tbody>)
  • Можно стилизовать состояние :focus через CSS
  • Поддерживается современными браузерами

Пример с CSS-стилизацией:

<style> tbody:focus { outline: 2px solid #0066cc; box-shadow: 0 0 5px rgba(0,102,204,0.3); } </style> <table> <tbody tabindex="0"> <tr><td>Фокусируемая группа строк</td></tr> </tbody> </table>

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

  • Используйте tabindex="0" для интерактивных табличных блоков
  • Избегайте положительных значений (нарушают логику навигации)
  • Всегда добавляйте визуальные стили для состояния фокуса
  • Тестируйте навигацию с клавиатуры

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

  • Не делает фокусируемыми отдельные ячейки
  • Может нарушить логику навигации при неправильном использовании
  • Требует дополнительных ARIA-атрибутов для полной доступности

Примечание: Для сложных интерактивных таблиц лучше использовать специализированные библиотеки с полной поддержкой доступности.