用做名单表最稳妥，因其语义清晰、浏览器支持好、可访问性强；需正确使用，配合table-layout:fixed和overflow-x:auto确保布局稳定与响应式。
用 <table> 做名单表最稳妥，别用 <code><div> 模拟表格<p>浏览器对 <code><table> 的语义支持和默认对齐逻辑是现成的，硬用 <code><div> + CSS 模拟表格不仅代码量翻倍，还容易在缩放、打印、屏幕阅读器下错行或丢失结构。名单类数据天然符合“行-列”关系，<code><table> 就是标准解法。<p>关键点：</p>
<ul><li><code><thead> 包住表头行，<code><tbody> 包住人员数据，语义清晰且方便后续 JS 操作<li>每行用 <code><tr>，每格用 <code><td>（内容单元格）或 <code><th>（表头单元格），别混用 <code><td> 代替 <code><th>
<li>避免写 <code>width="200" 这类过时属性，用 CSS 控制列宽更可控
表头用 <th> 而不是 <code><td>，否则语义丢失且可能影响可访问性<p>很多新手复制粘贴时把表头也写成 <code><td>，看起来一样，但实际问题不少：屏幕阅读器不会把 <code><td> 当标题读，CSS 中 <code>th 默认加粗居中，而 td 默认左对齐——这会导致“姓名”“部门”“工号”看起来像普通数据，排版松散。
<th> 而不是 <code><td>，否则语义丢失且可能影响可访问性<p>很多新手复制粘贴时把表头也写成 <code><td>，看起来一样，但实际问题不少：屏幕阅读器不会把 <code><td> 当标题读，CSS 中 <code>th 默认加粗居中，而 td 默认左对齐——这会导致“姓名”“部门”“工号”看起来像普通数据，排版松散。正确写法示例：
<thead><tr>
<th>姓名</th>
<th>部门</th>
<th>工号</th>
<th>入职日期</th>
</tr></thead>
控制列宽用 CSS 的 table-layout: fixed，别靠内容撑开
默认表格是自动布局（auto），一旦某个人名特别长（比如“欧阳修远”+职称），整列就会被拉宽，其他列挤压变形，名单看起来歪斜。固定布局能强制按设定宽度分配空间。
推荐样式写法：
table {
table-layout: fixed;
width: 100%;
}
th, td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
th:nth-child(1) { width: 120px; } /* 姓名列 */
th:nth-child(2) { width: 100px; } /* 部门列 */
th:nth-child(3) { width: 80px; } /* 工号列 */
th:nth-child(4) { width: 90px; } /* 入职日期列 */
注意：table-layout: fixed 必须配合明确的 width（如 100% 或像素值），否则无效。
移动端窄屏下横向滚动比强行换行更可靠
名单表列数稍多（比如加了电话、邮箱、岗位），在手机上硬让文字换行会破坏对齐，而且 word-break: break-all 容易把“张三”断成“张
三”。更稳的做法是给 <table> 外层套个容器，设 <code>overflow-x: auto，让用户左右滑动看全列。
HTML 结构示例：
<div style="overflow-x: auto;"> <table>...</table> </div>
这样既保住了表格结构，又避免了断词、错位、缩放后文字叠在一起等问题。
真正麻烦的是合并单元格（rowspan/colspan）和跨页打印——那得另加逻辑，普通名单表先别碰。
