应使用语义化HTML表格结构并配合border-collapse: collapse等CSS控制样式，避免行内样式和div模拟，响应式场景优先删减列或转卡片流，JS操作仅替换tbody内容。
直接在 index.html 里写 <table> 标签就能插入表格，但样式不加默认丑且难读——关键不是“能不能加”，而是“怎么加才不踩坑”。
<h3>用原生 HTML 写表格结构，别绕弯</h3>
<p>别用 div 模拟表格，也别一上来就套 CSS 框架。先确保语义正确、结构清晰：</p>
<pre class="brush:php;toolbar:false;"><table>
<thead>
<tr>
<th>姓名</th>
<th>城市</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>北京</td>
<td>28</td>
</tr>
</tbody>
</table></pre>
<ul><li><code><thead> 和 <code><tbody> 必须配对，否则某些浏览器（尤其是 Safari）滚动时表头会错位
<li>避免只用 <code><tr><td> 堆砌，没有 <code><thead> 的表格在可访问性（如屏幕阅读器）中会被当成纯布局表，语义丢失
<li>不要给 <code><th> 或 <code><td> 直接设 <code>width 行内样式，优先用 CSS 类控制
用 CSS 控制表格边框和间距，避开 collapse 陷阱
最常见的错误是直接写 border: 1px solid #ccc 到 <table> 上，结果边框双倍粗、单元格间隙失控。真正可控的方式是：
<ul>
<li>用 <code>border-collapse: collapse 让相邻边框合并，这是大多数数据表格的起点
border-collapse: separate + border-spacing: 0，再单独给 <td> 加 <code>padding
<th> 默认是粗体+居中，如需左对齐或去粗体，必须显式写 <code>text-align: left 和 font-weight: normal
推荐最小可用样式：
立即学习“前端免费学习笔记（深入）”；
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px 12px;
border: 1px solid #e0e0e0;
text-align: left;
}
th {
background-color: #f5f5f5;
font-weight: 600;
}
响应式表格在小屏上别强行横滚
手机上看宽表格横向滚动体验极差，overflow-x: auto 是下策。更实际的解法是：
- 优先删减列（比如隐藏“创建时间”这类非核心字段）
- 用
@media (max-width: 768px)把表格转成卡片流：<tr> 变 <code><div class="row">，<code><td> 变 <code><div class="cell">，靠 CSS Grid 或 Flex 控制堆叠顺序 <li>如果必须保留表格结构，至少给 <code><table> 加 <code>display: block+overflow-x: auto，并确保父容器有明确宽度限制，否则 iOS Safari 会忽略overflowJavaScript 动态渲染表格时注意 tbody 替换范围
用 JS（比如
fetch后插入数据）时，别整个重写<table>，只替换 <code><tbody> 内容即可： <ul><li>错误做法：<code>table.innerHTML = '<tr>...</tr>'—— 会清空<thead>，破坏结构 <li>正确做法：<code>document.querySelector('tbody').innerHTML = '<tr>...</tr>' - 如果用
insertRow()/insertCell()，注意它们返回的是 DOM 节点，需手动填textContent或innerHTML，且 IE 不支持insertRow(-1)插入末尾
表格的复杂度不在标签多，而在结构松动后带来的样式断裂和 JS 行为异常——哪怕只是少了一个 <tbody>，都可能让后续所有 CSS 选择器失效或 JS 查询不到目标节点。</tbody>
