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