HTML-тег <table>

Характеристики

• Тип: блочный, статичный, семантический
• Назначение: Представляет таблицу данных.
• Родители: Любые HTML-теги, которые могут содержать блочные элементы.
• Потомки: <caption>, <colgroup>, <thead>, <tbody>, <tfoot>, <tr>
• Глобальные атрибуты: все
• Атрибуты событий: все

Атрибуты

• border — определяет ширину границы таблицы.
• cellpadding — определяет отступы внутри ячеек таблицы.
• cellspacing — определяет расстояние между ячейками таблицы.
• summary — предоставляет краткое описание структуры таблицы для вспомогательных технологий.

Пример использования

<table id="myTable">
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
</table>

Использование в JavaScript

// Получение таблицы по ID
const table = document.getElementById('myTable');

// Создание новой строки
const newRow = table.insertRow();

// Добавление ячеек в строку
const newCell1 = newRow.insertCell();
const newCell2 = newRow.insertCell();
newCell1.innerHTML = 'Новая ячейка 1';
newCell2.innerHTML = 'Новая ячейка 2';

// Удаление строки
table.deleteRow(0);

Рекомендации по обеспечению доступности (a11y)

• Используйте <table> для представления табличных данных, чтобы улучшить структуру и доступность документа.
• Для сложных таблиц используйте ARIA-атрибуты, такие как aria-labelledby и aria-describedby.

Полезные ссылки