团队成员列表不应使用table，因其本质是并列集合而非二维数据，正确结构是ul+li配合css grid/flex布局，语义清晰、响应式可控、可访问性高。
直接用 <table> 展示团队成员信息，容易让头像和文字错位、响应式失效、语义混乱——这不是表格的错，而是没按它的逻辑用。
<h3>为什么不用 table？先看常见翻车现场</h3>
<p>很多人一上来就写：<code><table>
<tr>
<td><img></td>
<td>张三</td>
</tr>，结果：
<ul>
<li>头像尺寸不一致，<code>td 高度被撑开，整行文字基线漂移
colspan 一加，后续行单元格数对不上，表格结构直接崩真正适合团队成员列表的 HTML 结构是 ul + CSS Grid/Flex
团队成员本质是「一组并列的人」，不是二维数据矩阵。<ul class="team-list"></ul> 天然语义正确，且更易控制单行/多行、换行、间距、对齐。
实操建议：
- 每个成员用
<li>包裹，内部用<figure></figure>套头像（含<img alt="张三">），再跟<figcaption></figcaption>或<div class="member-info"> 放姓名职位 <li>用 <code>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，确保姓名和职位垂直对齐不“飘” - 每行只能有一个成员：即
<tr> 对应一人，<code><td> 内部再用 <code>flex或grid排头像+文字，别把头像和姓名拆成两个<td> <li>强制统一行高：<code>tr { height: 80px; }+vertical-align: top，否则不同字号/行高的文字会错位 - 禁用过时属性：
border="1"、cellpadding全部删掉，改用 CSS 的border-collapse: collapse和padding - 必须加
<thead> 和 <code><tbody>，哪怕表头只有一行——否则打印、辅助技术解析会出问题 <h3>响应式头像+文字组合的关键细节</h3> <p>小屏下不是简单缩小头像，而是要同步缩放文字、留白和行距：</p> <ul> <li>别只写 <code>@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模拟头像
如果硬要用 table，必须满足三个前提
某些 CMS 或后台导出场景无法改结构，那得守住底线：
Claude风格HTML汇报文件
下载
生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slid
真正难的不是怎么排，而是怎么让不同设备、不同辅助工具、不同内容长度下，头像始终是正圆、文字始终对齐、人数变化时不重排错乱——这些细节堆起来，才是实际项目里最耗时间的地方。
