表格必须用分区，表头用并设scope="col"，图片需alt属性和显式宽高，小屏转卡片布局，导出excel时头像需特殊处理。
表格结构必须用 <thead> 和 <code><tbody> 明确分区
<p>直接写一长串 <code><tr><td> 容易让语义混乱，尤其当团队人数变化或需要排序、筛选时，浏览器和辅助工具（如屏幕阅读器）无法识别“哪行是标题”。<code><thead> 只放一次表头，<code><tbody> 包裹所有人员数据——这不是可选项，是可访问性和后续 JS 操作的基础。
<p>常见错误：把姓名、头像、职位全塞进一个 <code><td> 里硬排版，导致响应式失效、打印错乱、无法单独选中某列内容。
<ul><li>表头单元格一律用 <code><th>，别用 <code><td> + <code>style="font-weight:bold"
<th> 上加 <code>scope="col"
alt 属性，哪怕只是 alt="张三头像"，否则 WCAG 会报错
<img> 在表格里不能靠 vertical-align 硬调位置
很多人给 <img> 加 vertical-align: middle 或 top，结果在不同字号、行高下表现不一致，尤其搭配中文文字时经常上下偏移。真正稳定的方式是把图片和文字放进同一个 <div> 做 flex 布局，再把这个 <code><div> 放进 <code><td>。
<p>示例结构：</p>
<pre class="brush:php;toolbar:false;"><td>
<div style="display:flex;align-items:center;gap:8px">
@@##@@
<span>李四</span>
</div>
</td></pre>
<ul>
<li>
<code>width 和 height 必须显式声明，避免布局抖动
max-width: 100% 让图片自适应——表格单元格宽度不确定时，它可能被拉伸变形flex 对齐会失效响应式断点要针对表格本身设，不是只改字体大小
小屏下强行横向滚动表格（overflow-x: auto）体验极差，用户得反复拖拽才能看全一行。更合理的做法是在 768px 下把每行转成卡片式布局：用 @media 把 <tr> 设为 <code>display: block，每个 <td> 变成 <code>display: flex 并添加标签前缀（如“姓名：”、“职位：”）。
- 不要只给
<table> 加 <code>font-size: 0.8em——字小了，但单元格还是挤在一起 - 移动端隐藏非关键列（如“入职日期”），用
class="hide-on-mobile"配合 CSS 控制，别删 HTML - 测试真机横屏时的宽度，有些安卓浏览器对
vw单位解析异常，优先用rem或固定像素 - 服务端生成 Excel 时，用真实图片 URL + Base64 编码嵌入单元格（注意文件体积爆炸风险）
- 前端导出前，用
canvas把头像和文字合成一张图，再插入隐藏列供导出逻辑读取 - 最务实的做法：导出纯文本版本，另附一个「头像文件夹」压缩包，命名规则与姓名字段严格对应（如
张三.jpg）
导出 Excel 时 <img src="avatar.jpg" alt="李四头像" style="max-width:90%" style="max-width:90%"> 会变成乱码或空白
HTML 表格转 Excel（比如用 SheetJS）时，<img> 标签不会自动渲染为图片，多数库只提取 textContent。如果业务需要导出带头像的名单，得提前处理：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
表格里放再多 fancy 的 hover 效果、渐变边框，只要导出需求存在，就得为纯文本场景留退路。
