Атрибут id тега <td>
Описание
Атрибут id для элемента <td> задаёт уникальный идентификатор ячейки таблицы, который может использоваться для CSS-стилизации, JavaScript-обработки или якорных ссылок.
<table>
<tr>
<td id="total-price">150.00 руб.</td>
<td id="discount-cell">15%</td>
</tr>
</table>
Основные возможности:
| Применение | Преимущества | Пример |
|---|---|---|
| CSS-стилизация | Уникальное оформление ячейки | #total-price { font-weight: bold; } |
| JavaScript доступ | Точечное управление содержимым | document.getElementById('total-price') |
| Якорные ссылки | Быстрая навигация к ячейке | <a href="#discount-cell">Скидка</a> |
Особенности работы:
- Должен быть уникальным в пределах документа
- Чувствителен к регистру
- Не должен содержать пробелов (используйте дефисы или подчёркивания)
- Поддерживается всеми браузерами
Пример с JavaScript:
<table>
<tr>
<td id="price-cell">100.00</td>
</tr>
</table>
<script>
const priceCell = document.getElementById('price-cell');
priceCell.style.color = 'green';
priceCell.textContent += ' руб.';
</script>
Пример с CSS:
<style>
#special-cell {
background-color: #ffe0b2;
border: 2px solid #ff9800;
}
</style>
<table>
<tr>
<td id="special-cell">Особое предложение</td>
</tr>
</table>
Рекомендации:
- Используйте семантические имена (например,
user-email) - Избегайте общих имён (
cell1,data) - Для стилизации нескольких ячеек используйте классы
- Придерживайтесь единого стиля именования
Ограничения:
- Дублирование ID вызывает ошибки валидации
- Менее гибкий, чем классы, для CSS-стилизации
- Сложно поддерживать уникальность в больших приложениях
Примечание: В современных веб-приложениях предпочтительнее использовать data-* атрибуты для хранения информации, оставляя ID для действительно уникальных случаев.