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

Описание

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

Пример использования:
<table> <tr> <td tabindex="0">Фокусируемая ячейка</td> <td>Обычная ячейка</td> </tr> </table>

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

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

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

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

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

<style> td:focus { outline: 2px solid #0066cc; box-shadow: 0 0 5px rgba(0,102,204,0.3); } </style> <table> <tr> <td tabindex="0">Нажмите Tab</td> </tr> </table>

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

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

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

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

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