卡片式列表适用于单条信息内容多、需强化主次与多端适配的场景，但整体数据展示效率低于表格；团队成员列表应避免用table，而采用flex布局实现语义正确、响应式强、对齐稳定的卡片设计。
直接用 <table> 展示团队成员信息，不是最佳选择——语义错、响应差、对齐难。除非你真在做人员名单报表（比如HR系统导出），否则别用表格。<h3>为什么表格不适合团队成员列表</h3>
<p>表格的语义是“二维数据关系”，而团队成员是“并列实体集合”。用 <code><table> 会导致：<ul>
<li>屏幕阅读器把每人读成“第1行第1列、第1行第2列…”，破坏人物完整性</li>
<li>移动端强制横向滚动或内容挤压，<code>flex-wrap 和 grid-template-columns 在 <td> 里基本失效<li>头像+文字垂直对齐必须靠 <code>vertical-align: middle，但该属性只对行内/表格单元格生效，且受 line-height 和字体度量干扰，稍一换字体就偏移
头像与文字垂直对齐用 flexbox 最稳
别碰 vertical-align 做卡片级对齐——它本质是行内对齐机制，用在块级结构上纯属硬凑。
正确做法：用 display: flex + align-items: center 控制头像和文字容器的基线对齐：
.member-card {
display: flex;
align-items: center;
gap: 1rem;
}
.member-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
}
.member-info {
line-height: 1.4; /* 统一文字呼吸感，避免 margin 不一致 */
}
- 确保
.member-avatar是正方形（宽高相等），否则border-radius: 50%会裁出椭圆 - 别给
.member-info设margin-top或margin-bottom，用gap或padding控制间距更可靠 - 如果姓名和职位分两行，用
display: flex; flex-direction: column包一层，再设统一line-height
响应式头像列表别用表格列数控制
表格的 colspan / colgroup 在人数动态变化时完全不可控。真正健壮的做法是：
- 用
<ul class="team-avatars"></ul>包裹所有<li>，每个<li>放一个<img> - CSS 写成：
display: flex; flex-wrap: wrap; gap: 0.5rem;，再配合min-width: 48px防小屏过小 - 头像统一加
aspect-ratio: 1/1（现代浏览器）或退化为width: 48px; height: 48px（IE11） - alt 文本必须写真实姓名，例如
<img src="..." alt="李明 - 前端工程师">，不能只写“头像”
需要机器可读的协作人数怎么办
HTML 没有 <team-count></team-count> 这种标签。想让 JS 或爬虫知道“共5人”，得靠结构+属性：
- 视觉上放一行：
<p aria-label="本项目由5位成员协作完成">协作成员（5人）</p> - 同时在列表容器上加
data-team-count="5"，JS 可直接读el.dataset.teamCount - 避免用
title="5人"或伪元素生成数字——它们不可编程访问，也不被读屏器识别 - 如果头像列表是动态渲染的，务必同步更新
data-team-count和aria-label，否则语义断裂
真正麻烦的不是怎么排版，而是头像尺寸不一、字体渲染差异、缩放比例切换时 line-height 和 gap 的连锁偏移——这些细节不测到真实设备上，光看桌面预览根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
