用户列表应使用语义化<table>而非<div>，必须包含<thead><th>和<tbody>，操作按钮须为<button>，小屏需响应式转卡片布局，确保可访问性与结构完整性。
用户列表页面不是表格的堆砌现场，而是结构、语义和交互的交汇点。用 <table> 展示用户数据本身没问题，但把它当布局工具、忽略可访问性、漏掉关键属性，页面就只剩“能看”，而没有“能用”“能搜”“能读”。
为什么不能直接用 <div> 套列表项做用户列表
很多人图省事写一串 <div class="user-item">，视觉上整齐，但问题藏在底层：
- 屏幕阅读器无法识别这是“用户列表”，会把每条当作孤立段落朗读，丢失上下文
- 搜索引擎抓不到“这是 27 个用户”，
class名对爬虫毫无意义 - 排序、筛选、导出等后续功能需要 DOM 结构支撑，纯
<div>没有行/列/头/体概念，JS 处理成本翻倍 - 键盘导航（Tab 键）会把每个子
<div>当作独立焦点，体验碎片化
<table> 的正确打开方式：必须带 <thead> 和 <tbody>
用户列表本质是二维结构化数据（姓名、邮箱、状态、操作），<table> 是语义最匹配的标签。但只写 <tr><td> 是半残废——缺了 <thead> 和 <tbody>，就等于没告诉浏览器“哪些是标题、哪些是数据”。
-
<thead>必须包裹表头行（<tr>），里面用<th>而非<td>；它让辅助工具知道“这列叫‘注册时间’” -
<tbody>包裹所有用户数据行，是 JS 批量操作（如删除、选中）的天然作用域 - 别用
border="1"这种过时属性，用 CSS 控制边框；但border-collapse: collapse要保留，避免单元格缝隙错位 - 如果列表支持排序，给
<th>加scope="col"，明确它是列标题，方便屏幕阅读器关联数据行
操作列按钮必须是 <button> 或带 role="button" 的元素
“编辑”“禁用”“删除”这类操作不是装饰文字，是可触发行为的控件。写成 <span class="btn">删除</span> + JS 绑定，等于主动放弃可访问性：
立即学习“前端免费学习笔记（深入）”；
- 键盘用户按 Tab 键跳不过去，无法聚焦
- 屏幕阅读器不会提示“这是一个按钮”，只会读“删除”两个字，缺少动词语境
- 移动端触摸目标太小，
<span>默认无padding，易误触
正确写法是：<button type="button" data-user-id="123">删除</button>。注意 type="button" 防止表单意外提交；data-user-id 存 ID 比从文本里 parse 更可靠。
响应式断点下，<table> 别硬撑，该转卡片就转卡片
小屏上强行横向滚动 <table> 是反人类设计。CSS Grid 或 Flex 可以优雅降级：
- 桌面端保持
<table>，用媒体查询在max-width: 768px下隐藏<thead>并设display: block于<tbody> - 每行
<tr>改为display: flex; flex-direction: column，内部<td>变成带标签的块：<div class="field"><span class="label">邮箱：</span><span class="value">user@x.com</span></div> - 或者更彻底：用
display: grid配grid-template-areas，让每条用户数据自成一个区域（"name email status action"），不依赖表格 DOM - 切记：不要用
overflow-x: auto包裹整个<table>，那只是把问题藏起来，不是解决
真正难的不是怎么让列表“显示出来”，而是让每一条用户数据，在任何设备、任何辅助工具、任何网络条件下，都保有它本该有的含义和操作能力。标签选错，后面补 JS、加 ARIA、调样式，都是在修漏水的桶。
