Атрибут id тега <table>
Описание
Атрибут id задаёт уникальный идентификатор для элемента <table>. Этот идентификатор используется для:
- Связи таблицы с CSS и JavaScript
- Создания якорных ссылок внутри документа
- Обращения к конкретной таблице в скриптах
<table id="user-data-table">
<tr>
Имя
Email
</tr>
<tr>
Алексей
alex@example.com
</tr>
</table>
Правила именования:
| Правило | Пример | Некорректный пример |
|---|---|---|
| Уникальность | id="data-table" |
Повторение id в документе |
| Допустимые символы | id="user-table" |
id="user table" (пробелы) |
| Регистр букв | id="mainTable" |
id="MAINTABLE" (чувствительность) |
Пример использования в CSS и JavaScript:
<style>
#pricing-table {
border-collapse: collapse;
width: 100%;
}
#pricing-table th {
background-color: #f8f9fa;
}
</style>
<table id="pricing-table">
<!-- Содержимое таблицы -->
</table>
<script>
document.getElementById('pricing-table')
.addEventListener('click', function() {
console.log('Таблица кликнута');
});
</script>
Рекомендации:
- Используйте осмысленные имена (не "table1", "table2")
- Придерживайтесь единого стиля именования (kebab-case рекомендуется)
- Для стилизации предпочитайте классы, оставляя id для JavaScript
- Избегайте изменения id динамически
Ограничения:
- Дублирование id нарушает стандарты HTML
- Изменение id может сломать существующие ссылки и скрипты
- Слишком общие имена могут конфликтовать
Примечание: Для сложных табличных компонентов с динамическим контентом используйте id в сочетании с data-атрибутами для хранения дополнительной информации.