HTML表格内div元素渲染异常 被自动移至表格前方问题

HTML表格有强制的合法嵌套规则，<tr> 行元素的直接子元素仅允许为<th>表头单元格、<td>内容单元格，不能直接放置<div>这类普通块级元素。
浏览器解析HTML时会自动对不符合规范的结构做容错修正：你写在<tr>内部、<td>外部的<div class="infos">，会被浏览器直接移出表格，排列到整个<table>元素的前方；原本放在div内部的三个<td>会被识别为tr下的合法子元素正常解析，最终就会出现你看到的效果：13个空div全部堆在表格最前面，完全没有包裹住对应的三个单元格。
渲染异常效果参考：

另外你的代码里还藏了一个笔误：输出邮箱的单元格中，循环变量名写成了$auser，和循环定义的$user不一致，就算结构修正后，这一栏也会抛出变量未定义的错误。

不要在<tr>和<td>之间插入div这类非表格专属元素，如果需要给三个单元格加统一样式或者逻辑标识，有两种合规实现方式：

• 直接给三个目标<td>添加相同的类名，把原本要写在.infos上的样式、交互逻辑绑定到这个类上
• 如果必须使用容器元素包裹内容，要把容器放到<td>的内部——普通块级元素只能放在单元格内部，永远不能作为tr的直接子节点

修正后的可正常运行代码如下：

<table>
    <thead>
        <tr>
            <td>ID</td>
            <td>Prénom</td>
            <td>Nom</td>
            <td>Email</td>
            <td>操作</td>
        </tr>
    </thead>

    <tbody>
    <!-- $allUsers is an array with a length of 13 -->
    <?php foreach($allUsers as $user):?>
        <tr>
            <td class="id-row"><?= $user['id']; ?></td>
            <td class="fn-row infos-item"><?= $user['firstname']; ?></td>
            <td class="ln-row infos-item"><?= $user['lastname']; ?></td>
            <td class="mail-row infos-item"><?= $user['email']; ?></td>
            <td class="link-row"><a href="lireUser?id=<?= $user['id']?>">Lire</a></td>
        </tr>
    <?php endforeach; ?>
    </tbody>
</table>

注意：所有表格相关元素都要严格遵循嵌套层级要求，从外到内的合法层级为 table > caption/colgroup/thead/tbody/tfoot > tr > th/td，只有th/td单元格内部可以自由放置div、p、span等其他普通HTML元素，违反嵌套规则的写法都会被浏览器自动重构DOM，最终渲染效果和你编写的代码逻辑完全不符。

内容的提问来源于stack exchange，提问作者thibaultk