联系人列表必须用语义化html结构和css规范实现可访问性、响应式与维护性：需包含、、border-collapse: collapse，辅以hover高亮、斑马纹、vertical-align及响应式折叠，并添加提升可访问性。
直接用 <table> 做联系人列表，不加语义分组和 CSS 控制，基本等于放弃可访问性、响应式和维护性——哪怕只是 5 行数据，也得按现代标准来搭结构。
<h3>必须用 <code><thead> + <code><tbody> 区分表头和数据
<p>很多教程还教人把 <code><th> 直接塞进 <code><tr> 里完事，这会导致屏幕阅读器无法识别列关系，打印时表头也不会跨页重复。联系人列表的字段（如“姓名”“电话”“邮箱”）是强语义列标题，必须包裹在 <code><thead> 中。
<ul><li><code><thead> 只放一行 <code><tr>，里面全是 <code><th scope="col">，<code>scope="col" 是关键，它明确告诉辅助技术“这一列下面所有 <td> 都属于这个标题”
<li><code><tbody> 包裹所有联系人行，每行 <code><tr> 里用 <code><td>，不要混用 <code><th>
<li>别省略 <code><tbody>：即使没写，浏览器会自动补上，但显式写出能避免 JS 操作时 DOM 查询错乱（比如 <code>document.querySelector('tbody tr') 比 document.querySelectorAll('tr') 更精准）
border-collapse: collapse 是消除双线边框的唯一可靠方式
老式写法 <table border="1"> 会触发浏览器默认的 <code>border-spacing，单元格之间出现 2px 缝隙，看起来像双线边框。这不是 bug，是规范行为——但没人想要它。
- 必须用 CSS 设置
table { border-collapse: collapse; }，这是 W3C 标准方案，兼容所有现代浏览器（包括 IE8+） - 不要依赖
cellspacing="0"：这个 HTML 属性已废弃，且在某些移动端 WebView 中失效 - 如果要保留轻微间隔（比如 1px 分割线），改用
border-bottom单独控制<tr> 或 <code><td>，而不是靠 cellspacing <h3>让联系人列表真正可用：hover、斑马纹、文字对齐与垂直居中</h3> <p>联系人列表不是静态报表，用户会扫视、点击、复制电话或邮箱。基础样式缺失会让体验断层。</p> <ul><li>表头 <code><th> 必须设 <code>text-align: center和background-color，否则视觉权重不够；数据列<td> 用 <code>text-align: left（姓名/地址）或text-align: center（状态图标）区分信息类型 - 加
tbody tr:hover { background-color: #f5f7fa; }，鼠标悬停时整行高亮，比只高亮单元格更易定位 - 斑马纹用
tbody tr:nth-child(even) { background-color: #fafafa; }，避免奇偶行混淆；注意:nth-child是按 DOM 顺序，不是数据序号 - 所有
<td> 和 <code><th> 加 <code>vertical-align: middle，否则图标、多行文本、按钮会和文字上下错位响应式断点下表格不能简单隐藏列，要用
<details></details>折叠详情手机屏宽不足时，硬塞“姓名｜电话｜邮箱｜部门｜职位”五列必然溢出。用
display: none隐藏列会丢失语义和可访问性，且无法回溯查看。- 移动端优先方案：用
<details></details>+<summary></summary>把次要字段（如“部门”“职位”）折叠进每行末尾，主列只留“姓名”和“电话”，点击展开详情 - 不要用 JS 模拟折叠：原生
<details></details>支持键盘操作（Enter 展开）、屏幕阅读器通告，且无 JS 也能降级为普通内容 - 若必须横向滚动，用
<div style="overflow-x: auto"><table>...</table></div>包裹，并确保<table> 有 <code>min-width，否则窄屏下表格被压缩变形最常被跳过的其实是
<caption></caption>—— 它不显示在页面上，但决定了整个表格的可访问性上下文。联系人列表没它，屏幕阅读器只会说“一个表格”，而不会说“技术支持团队联系人列表”。
- 移动端优先方案：用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
