Таблицы, а не Div'ы: Простой API для Настоящих Табличных Данных

Большинство JavaScript-разработчиков, создающих дашборды или административные инструменты, в какой-то момент сталкивались с рендерингом таблиц. Вы, вероятно, конкатенировали HTML-строки, боролись с innerHTML или наблюдали, как коллега пересобирает таблицы, используя вложенные div’ы и CSS Grid. Существует более простой путь, который скрывался на виду с первых дней веба: HTML table DOM API.

Интерфейс HTMLTableElement предоставляет нативные методы для создания, чтения и инкрементального изменения структур таблиц — без конкатенации строк или полного перерендеринга. Он рассматривает таблицы не как разметку для генерации, а как структурированные данные для манипуляции.

Забытый JavaScript Table API

HTML table DOM API существует на каждом элементе <table>. Он включает такие методы, как insertRow(), insertCell(), deleteRow() и createTHead(), а также живые коллекции, такие как rows и cells, которые автоматически обновляются при изменении таблицы.

Вот основной паттерн:

const table = document.createElement('table')
const row = table.insertRow()
const cell = row.insertCell()
cell.textContent = 'Hello'

Никаких шаблонных литералов. Никакого innerHTML. Только прямая манипуляция DOM с помощью специально созданных методов.

Вы можете получить доступ к любой ячейке по индексу:

console.log(table.rows[0].cells[0]) // <td>Hello</td>

Свойства rows и cells возвращают живые объекты HTMLCollection. Удалите строку — и table.rows.length обновится немедленно. Это делает инкрементальные обновления тривиальными — добавьте строку при поступлении данных, удалите её при удалении, не трогая остальную часть таблицы.

Почему Разработчики Забыли HTMLTableElement

У API есть свои особенности. Соглашение об индексе -1 для добавления в конец кажется странным. Нет метода insertHeaderCell() — вы должны создавать элементы <th> вручную с помощью createElement() и добавлять их. Эти шероховатости в сочетании с появлением фреймворков, которые полностью абстрагируют манипуляцию DOM, вытеснили API в безвестность.

Но ограничения незначительны. Обходной путь для ячеек заголовка прост:

const thead = table.createTHead()
const headerRow = thead.insertRow()
const th = document.createElement('th')
th.textContent = 'Name'
headerRow.appendChild(th)

Вы также можете использовать createTFoot(), createCaption() и обращаться к table.tBodies для нескольких секций тела таблицы. API охватывает всю структуру таблицы.

Преимущества в Безопасности и Производительности

Построение таблиц с помощью innerHTML создаёт XSS-уязвимости. Любые несанитизированные пользовательские данные становятся исполняемым HTML. Table API полностью обходит это — textContent и insertCell() не парсят HTML.

Производительность тоже имеет значение. Изменение одной ячейки с помощью API не заставляет браузер перепарсивать и перестраивать всю таблицу. Для дашбордов, обновляющихся в реальном времени, этот инкрементальный подход может снизить ненужный повторный парсинг и reflow’ы.

Семантические Таблицы и Встроенная Доступность

Вот что неправильно делают реимплементации таблиц на основе div’ов: они отбрасывают семантику. Настоящая <table> с правильными элементами <thead>, <th> и <tbody> даёт программам чтения с экрана и вспомогательным технологиям всё необходимое для навигации по табличным данным. Вы получаете доступные таблицы данных практически бесплатно.

Добавление scope="col" к ячейкам заголовка и элемента <caption> завершает картину. Не требуются ARIA grid роли — они предназначены для интерактивных виджет-гридов, а не таблиц данных. Семантические таблицы — это правильный примитив для отображения структурированной информации.

Когда Использовать Нативный API

HTML table DOM API блистает в контекстах ванильного JavaScript: внутренние инструменты, лёгкие дашборды, административные панели или везде, где вы хотите прямого контроля без накладных расходов фреймворка.

Если вы используете React или Vue, вы уже работаете с виртуальным DOM, который обрабатывает рендеринг. Библиотеки, такие как TanStack Table v8, предоставляют headless-логику таблиц, которая хорошо сочетается с рендерингом фреймворков. Но для ванильного JS или сценариев прогрессивного улучшения нативный API остаётся более чистым выбором.

Заключение

Таблицы никогда не переставали быть правильным инструментом для табличных данных. Изменилось то, как мы их создаём. Интерфейс HTMLTableElement предлагает средний путь между сырой манипуляцией строками и тяжёлыми абстракциями — нативный, инкрементальный и безопасный.

API существует. Он работает во всех браузерах. Он создаёт семантическую, доступную разметку по умолчанию. Для фронтенд-разработчиков, работающих с реальными данными в JavaScript, его стоит заново открыть.

Часто Задаваемые Вопросы

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.