Что браузер покажет в DOM-дереве, если в <table> указать только вложенный <tr>?

HTML-парсер браузера не просто читает теги подряд, а применяет правила построения DOM, описанные в спецификации HTML. Для таблиц эти правила особенно строгие: элементы tr, td, th не могут быть прямыми потомками table — между ними обязательно должен находиться tbody, thead или tfoot.

Что происходит при парсинге

Если разработчик напишет такую разметку:

<table>
  <tr><td>Ячейка</td></tr>
</table>

Браузер при построении DOM автоматически вставит неявный <tbody>. Итоговое дерево будет выглядеть так:

table
  └── tbody
        └── tr
              └── td

Почему так сделано

• Спецификация HTML жёстко регламентирует модель содержимого таблиц, чтобы обеспечить единообразный рендеринг.
• Автокоррекция позволяет старым страницам с неполной разметкой отображаться корректно.
• Аналогично браузер добавляет <html>, <head> и <body>, если их нет в исходнике.

Практические последствия

Это важно учитывать при работе с DOM через JavaScript. Например, если попытаться получить первого потомка таблицы:

const table = document.querySelector('table');
console.log(table.firstElementChild.tagName); // "TBODY", а не "TR"
console.log(table.children.length);            // 1, а не 0
console.log(table.querySelector('tr'));       // найдётся, но через tbody

Также это влияет на CSS-селекторы: table > tr не сработает, а table > tbody > tr — сработает. Аналогичное поведение наблюдается с thead и tfoot, если они идут в неверном порядке.

Итог: браузер всегда нормализует таблицы, добавляя неявный tbody, поэтому при работе с DOM и CSS стоит либо явно указывать tbody в разметке, либо учитывать его автоматическое появление.