团队成员列表不应使用table，因其本质是并列集合而非二维数据，正确结构是ul+li配合CSS Grid/Flex布局，语义清晰、响应式可控、可访问性高。
直接用 <table> 展示团队成员信息，容易让头像和文字错位、响应式失效、语义混乱——这不是表格的错，而是没按它的逻辑用。
为什么不用 table？先看常见翻车现场
很多人一上来就写：<table><tr><td><img></td><td>张三</td></tr>，结果：
- 头像尺寸不一致，
td高度被撑开，整行文字基线漂移 - 小屏下表格横向溢出，用户被迫左右滑动
- 屏幕阅读器读不出“这是张三的头像”，只读到“图片”“张三”，上下文断裂
-
colspan一加，后续行单元格数对不上，表格结构直接崩
真正适合团队成员列表的 HTML 结构是 ul + CSS Grid/Flex
团队成员本质是「一组并列的人」，不是二维数据矩阵。<ul class="team-list"> 天然语义正确，且更易控制单行/多行、换行、间距、对齐。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个成员用
<li>包裹，内部用<figure>套头像（含<img alt="张三">），再跟<figcaption>或<div class="member-info">放姓名职位 - 用
display: grid控制整体布局，比如grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))，自动适应容器宽度 - 头像统一设
aspect-ratio: 1/1+object-fit: cover，避免拉伸或留白 - 文字区域用
display: flex; flex-direction: column+line-height: 1.3，确保姓名和职位垂直对齐不“飘”
如果硬要用 table，必须满足三个前提
某些 CMS 或后台导出场景无法改结构，那得守住底线：
- 每行只能有一个成员：即
<tr>对应一人，<td>内部再用flex或grid排头像+文字，别把头像和姓名拆成两个<td> - 强制统一行高：
tr { height: 80px; }+vertical-align: top，否则不同字号/行高的文字会错位 - 禁用过时属性：
border="1"、cellpadding全部删掉，改用 CSS 的border-collapse: collapse和padding - 必须加
<thead>和<tbody>，哪怕表头只有一行——否则打印、辅助技术解析会出问题
响应式头像+文字组合的关键细节
小屏下不是简单缩小头像，而是要同步缩放文字、留白和行距：
- 别只写
@media (max-width: 768px) { .team-avatar { width: 48px; } }—— 文字还卡在 16px，比例失调 - 用
clamp(1rem, 2.5vw, 1.125rem)控制姓名字号，让文字随视口等比缩放 - 头像尺寸也用
clamp()，比如width: clamp(48px, 8vw, 64px)，保证最小可识别性 - IE11 不支持
clamp()和aspect-ratio，得降级为固定宽高 +background-image模拟头像
真正难的不是怎么排，而是怎么让不同设备、不同辅助工具、不同内容长度下，头像始终是正圆、文字始终对齐、人数变化时不重排错乱——这些细节堆起来，才是实际项目里最耗时间的地方。
