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

Описание

Атрибут id для элемента <tbody> задает уникальный идентификатор группы строк таблицы. Этот идентификатор может использоваться для CSS-стилизации, JavaScript-обработки или якорных ссылок.

Пример использования:
<table> <tbody id="financial-data-q2"> <tr> <td>Апрель</td> <td>150 000 руб.</td> </tr> <tr> <td>Май</td> <td>180 000 руб.</td> </tr> </tbody> </table>

Основные возможности:

Применение Преимущества Пример
CSS-стилизация Уникальное оформление группы строк #financial-data-q2 { background: #f8f9fa; }
JavaScript-доступ Точечное управление содержимым document.getElementById('financial-data-q2')
Якорные ссылки Быстрая навигация к таблице <a href="#financial-data-q2">Квартал 2</a>

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

  • Должен быть уникальным в пределах документа
  • Чувствителен к регистру
  • Не должен содержать пробелов и специальных символов (кроме дефиса и подчеркивания)
  • Поддерживается всеми браузерами

Пример с JavaScript:

<table> <tbody id="user-data"> <tr><td>Иван Иванов</td></tr> </tbody> </table> <script> const userTableBody = document.getElementById('user-data'); userTableBody.style.fontWeight = 'bold'; </script>

Пример с CSS:

<style> #summary-data { background-color: #e6f7ff; font-weight: bold; } </style> <table> <tbody id="summary-data"> <tr><td>Итого:</td><td>500 000 руб.</td></tr> </tbody> </table>

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

  • Используйте семантические имена (например, invoice-items)
  • Избегайте общих имен (data, table)
  • Для стилизации нескольких элементов используйте классы
  • Придерживайтесь единого стиля именования (kebab-case рекомендуется)

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

  • Дублирование ID вызывает ошибки валидации
  • Сложно поддерживать уникальность в больших приложениях
  • Менее гибкий, чем классы, для CSS-стилизации

Примечание: В современных веб-приложениях предпочтительнее использовать data-* атрибуты или классы для управления элементами, оставляя ID для действительно уникальных случаев.