联系人列表必须用语义化HTML结构和CSS规范实现可访问性、响应式与维护性：需包含、、border-collapse: collapse，辅以hover高亮、斑马纹、vertical-align及响应式折叠，并添加提升可访问性。

直接用

做联系人列表，不加语义分组和 CSS 控制，基本等于放弃可访问性、响应式和维护性——哪怕只是 5 行数据，也得按现代标准来搭结构。

必须用

+ 区分表头和数据

很多教程还教人把

里完事，这会导致屏幕阅读器无法识别列关系，打印时表头也不会跨页重复。联系人列表的字段（如“姓名”“电话”“邮箱”）是强语义列标题，必须包裹在 中。

只放一行 ，里面全是 包裹所有联系人行，每行 里用 ：即使没写，浏览器会自动补上，但显式写出能避免 JS 操作时 DOM 查询错乱（比如 document.querySelector('tbody tr') 比 document.querySelectorAll('tr') 更精准）

border-collapse: collapse 是消除双线边框的唯一可靠方式

老式写法

直接塞进
，scope="col" 是关键，它明确告诉辅助技术“这一列下面所有	都属于这个标题”
，不要混用	别省略

会触发浏览器默认的 border-spacing，单元格之间出现 2px 缝隙，看起来像双线边框。这不是 bug，是规范行为——但没人想要它。

• 必须用 CSS 设置 table { border-collapse: collapse; }，这是 W3C 标准方案，兼容所有现代浏览器（包括 IE8+）
• 不要依赖 cellspacing="0"：这个 HTML 属性已废弃，且在某些移动端 WebView 中失效
• 如果要保留轻微间隔（比如 1px 分割线），改用 border-bottom 单独控制

或

，而不是靠 cellspacing

让联系人列表真正可用：hover、斑马纹、文字对齐与垂直居中

联系人列表不是静态报表，用户会扫视、点击、复制电话或邮箱。基础样式缺失会让体验断层。

• 表头

必须设 text-align: center 和 background-color，否则视觉权重不够；数据列

用 text-align: left（姓名/地址）或 text-align: center（状态图标）区分信息类型

加 tbody tr:hover { background-color: #f5f7fa; }，鼠标悬停时整行高亮，比只高亮单元格更易定位

斑马纹用 tbody tr:nth-child(even) { background-color: #fafafa; }，避免奇偶行混淆；注意 :nth-child 是按 DOM 顺序，不是数据序号

所有

和

加 vertical-align: middle，否则图标、多行文本、按钮会和文字上下错位

响应式断点下表格不能简单隐藏列，要用

折叠详情

手机屏宽不足时，硬塞“姓名｜电话｜邮箱｜部门｜职位”五列必然溢出。用 display: none 隐藏列会丢失语义和可访问性，且无法回溯查看。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 移动端优先方案：用
  +
  把次要字段（如“部门”“职位”）折叠进每行末尾，主列只留“姓名”和“电话”，点击展开详情
• 不要用 JS 模拟折叠：原生
  支持键盘操作（Enter 展开）、屏幕阅读器通告，且无 JS 也能降级为普通内容
• 若必须横向滚动，用
  ...
  包裹，并确保 有 min-width，否则窄屏下表格被压缩变形

  最常被跳过的其实是

  —— 它不显示在页面上，但决定了整个表格的可访问性上下文。联系人列表没它，屏幕阅读器只会说“一个表格”，而不会说“技术支持团队联系人列表”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！