应使用 <section> + <article> + CSS Grid 布局团队成员，而非 <table>；因团队成员是独立语义单元，非二维关系数据，用表格会导致语义错误、响应式失效、无障碍支持缺失及交互扩展困难。
不能用 <table> 布局展示团队成员。
语义上错、响应式崩、无障碍失效、后续加交互困难——这不是表格该干的事。
为什么 <table> 会破坏团队页结构
表格标签的语义是「二维关系型数据」，比如花名册（姓名/工号/部门/入职时间），行列交叉可索引。团队成员是独立内容单元，每人有头像、姓名、职位、简介等多个非结构化字段，强行塞进表格会导致：
-
<th>不知该标哪一列：头像是标题？职位是标题？还是整行是标题？ - 响应式时固定列数 +
colspan/rowspan混用，小屏极易错位或溢出 - 屏幕阅读器按“行→列”顺序朗读，可能把张三的头像、李四的职位连读成一句
- 后续加 hover 动效、懒加载、筛选排序时，DOM 结构和逻辑完全不匹配
替代方案：用 <section> + <article> + Grid
每个成员是一个独立信息块，<article> 是最贴切的语义标签；整个区域用 <section> 包裹，既表明主题区块，也方便 CSS 和 JS 操作。
立即学习“前端免费学习笔记（深入）”；
正确结构示例（关键点已标注）：
<section aria-labelledby="team-heading">
<h2 id="team-heading">我们的团队</h2>
<article>
<img src="zhang-wei.jpg" alt="张伟 - 技术总监" width="120" height="120">
<h3>张伟</h3>
<p class="role">技术总监</p>
<p class="bio">专注分布式系统架构设计</p>
</article>
<article>
<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>的主标题 - 职位和简介用
<p class="role">和<p class="bio">，避免用<h4>（它不是层级标题） - 每个
<article>应带唯一id（如id="member-zhang-wei"），方便锚点跳转或 JS 查询
Grid 布局实现响应式卡片排列
别用 float 或 inline-block —— 容易因字体渲染差异导致基线错位，移动端换行不可控。直接用 display: grid 更稳：
.team-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}-
minmax(280px, 1fr)：确保每项最小 280px（适配手机横屏），又能自动撑满容器宽度 -
auto-fill而非auto-fit：前者保留空列占位，避免最后一行卡片突然变宽失衡 -
gap统一控制间距，比给每个卡片加margin更干净，且不会在网格边缘多出空白 - 若团队人数少（如仅 3–4 人），想居中显示，加
justify-content: center即可，无需额外包裹容器
头像变形、错位、加载失败的常见坑
很多团队页头像歪斜、切掉一半脸、加载失败后留白，问题不在图片本身，而在 CSS 控制缺失：
- 删掉
<img>标签里的width和height属性（HTML 属性），改用 CSS 控制：width: 100%; height: 100%; border-radius: 50%; object-fit: cover; -
object-fit: cover是核心：保持比例裁剪显示；fill会拉伸，contain会留白 - 加载失败时，用 background-image 兜底：
<div class="avatar-placeholder" style="background-image: url(/img/default-avatar.svg)"><img src="/img/team/alice.jpg" alt="Alice Chen"></div>，再配 CSS：.avatar-placeholder { width: 140px; height: 140px; background-size: cover; }和.avatar-placeholder img { width: 100%; height: 100%; } - 别用
background: url() no-repeat center / cover简写——某些老浏览器解析有差异，分开写更稳
真正麻烦的不是写几行 HTML，而是让头像不拉伸、文字不溢出、小屏不堆叠、盲人用户能听懂、SEO 能抓到姓名、加第 5 个人不用改三处代码——这些都依赖语义结构 + Grid + 可访问性细节，而不是表格。
