不应使用<table>展示团队成员，因其核心语义是二维关系型数据，而团队成员属于独立内容单元集合；应改用<section>包裹多个语义明确的<article>，配合Grid布局与健壮的图片降级方案。
直接用 <table> 展示团队成员，语义错、维护难、响应式崩——这不是表格该干的事。
为什么不用 <table> 放团队成员
表格的核心语义是「二维关系型数据」，比如人员花名册（姓名/工号/部门/入职时间）这类可被行列交叉索引的信息。团队成员介绍页本质是「独立内容单元集合」，每个成员有头像、姓名、职位、简介等多个非结构化字段，强行塞进表格会导致：
-
<th>和<td>无法准确表达语义（谁是标题？哪列是数据？） - 响应式时列数固定，
colspan/rowspan混用极易错位 - 屏幕阅读器会按“行→列”顺序朗读，把张三的头像、李四的职位连着读
- 后续加 hover 动效、懒加载、筛选排序等交互时，DOM 结构不匹配逻辑
用 <section> + <article> 替代表格
每个成员是一个独立信息块，<article> 是最贴切的语义标签；整个团队区域用 <section> 包裹，既表明主题区块，又方便 CSS 选择器和 JS 查询。
正确结构示例：
立即学习“前端免费学习笔记（深入）”；
<section aria-labelledby="team-heading">
<h2 id="team-heading">我们的团队</h2>
<article id="member-zhang-wei">
<img src="zhang-wei.jpg" alt="张伟 - 技术总监" width="120" height="120">
<h3>张伟</h3>
<p class="role">技术总监</p>
<p class="bio">专注分布式系统架构设计，开源项目 maintainer。</p>
</article>
<article id="member-li-mei">
<img src="li-mei.jpg" alt="李梅 - 产品负责人" width="120" height="120">
<h3>李梅</h3>
<p class="role">产品负责人</p>
<p class="bio">从 0 到 1 打造过 3 款百万级用户产品。</p>
</article>
</section>关键点：
-
alt必须写真实姓名+职位，不能是“头像”或空字符串 -
<h3>是成员主标题，不是<p>或<div> - 每个
<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> 默认显示断链图标，破坏整体排版。必须用 onerror 降级为占位图或 initials：
<img src="zhang-wei.jpg"
alt="张伟 - 技术总监"
onerror="this.src='/img/avatar-placeholder.svg'"
width="120" height="120">或者更健壮的方案（避免重复触发）：
<img src="zhang-wei.jpg"
alt="张伟 - 技术总监"
onerror="if (!this.src.includes('placeholder')) this.src='/img/avatar-placeholder.svg'"
width="120" height="120">补充建议：
- 占位图 SVG 尺寸需与真实头像一致，否则 layout shift 明显
- 禁用 CSS background-image 实现头像——丢失
alt，不可访问 - 不要依赖 JS 动态生成 initials 文字，首次渲染空白期影响体验
真正麻烦的不是怎么排版，而是把“每个成员是独立语义单元”这个前提刻进 HTML 结构里——一旦用 <table> 开头，后面所有样式、JS、无障碍适配都在补漏洞。
