不应使用展示团队成员，因其核心语义是二维关系型数据，而团队成员属于独立内容单元集合；应改用包裹多个语义明确的，配合grid布局与健壮的图片降级方案。
直接用 <table> 展示团队成员，语义错、维护难、响应式崩——这不是表格该干的事。<h3>为什么不用 <code><table> 放团队成员<p>表格的核心语义是「二维关系型数据」，比如人员花名册（姓名/工号/部门/入职时间）这类可被行列交叉索引的信息。团队成员介绍页本质是「独立内容单元集合」，每个成员有头像、姓名、职位、简介等多个非结构化字段，强行塞进表格会导致：</p>
<ul><li><code><th> 和 <code><td> 无法准确表达语义（谁是标题？哪列是数据？）<li>响应式时列数固定，<code>colspan/rowspan 混用极易错位
用 <section></section> + <article></article> 替代表格
每个成员是一个独立信息块，<article></article> 是最贴切的语义标签；整个团队区域用 <section></section> 包裹，既表明主题区块，又方便 CSS 选择器和 JS 查询。
正确结构示例：
<section aria-labelledby="team-heading"><h2 id="team-heading">我们的团队</h2>
<article id="member-zhang-wei">
@@##@@
<h3>张伟</h3>
<p class="role">技术总监</p>
<p class="bio">专注分布式系统架构设计，开源项目 maintainer。</p>
</article><article id="member-li-mei">
@@##@@
<h3>李梅</h3>
<p class="role">产品负责人</p>
<p class="bio">从 0 到 1 打造过 3 款百万级用户产品。</p>
</article></section>
关键点：
-
alt必须写真实姓名+职位，不能是“头像”或空字符串 -
<h3></h3>是成员主标题，不是<p></p>或<div> <li>每个 <code><article></article>带唯一id，方便锚点跳转或 JS 定位 - 避免用
role="figure"或role="group"替代原生语义标签
用 CSS Grid 实现头像+资料横向对齐
别用 float 或 inline-block 做“头像左、文字右”的排列——容易因字体渲染差异导致基线错位。直接用 Flex 或 Grid 更稳：
article {
display: grid;
grid-template-columns: 120px 1fr;
gap: 16px;
align-items: start;
}
article img {
border-radius: 50%;
object-fit: cover;
}
article h3,
article .role,
article .bio {
margin: 0;
}
注意：
- 显式设
align-items: start，防止文字默认居中对齐导致头像“飘”起来 -
gap控制间距，比margin更可靠（不受外边距折叠影响） - 移动端可改
grid-template-columns: 1fr让头像居上、文字居下 - 如果要兼容 Safari 15 及更早，避免在
repeat(auto-fill, minmax())中嵌套此布局
头像加载失败时必须降级处理
网络波动或路径错误时，<img src="zhang-wei.jpg" alt="张伟 - 技术总监" style="max-width:90%" style="max-width:90%"> 默认显示断链图标，破坏整体排版。必须用 onerror 降级为占位图或 initials：
@@##@@
或者更健壮的方案（避免重复触发）：
@@##@@
补充建议：
- 占位图 SVG 尺寸需与真实头像一致，否则 layout shift 明显
- 禁用 CSS background-image 实现头像——丢失
alt，不可访问 - 不要依赖 JS 动态生成 initials 文字，首次渲染空白期影响体验
真正麻烦的不是怎么排版，而是把“每个成员是独立语义单元”这个前提刻进 HTML 结构里——一旦用 <table> 开头，后面所有样式、JS、无障碍适配都在补漏洞。
<img src="li-mei.jpg" alt="李梅 - 产品负责人" style="max-width:90%" style="max-width:90%"><img><img src="zhang-wei.jpg" alt="张伟 - 技术总监" onerror="this.src='/img/avatar-placeholder.svg'" style="max-width:90%" style="max-width:90%"><img src="zhang-wei.jpg" alt="张伟 - 技术总监" onerror="if (!this.src.includes('placeholder')) this.src='/img/avatar-placeholder.svg'" style="max-width:90%" style="max-width:90%">
</table>
