应使用语义清晰的<table>实现排行榜，含<thead>定义表头、CSS计数器生成动态排名、响应式列裁剪，并为多维排序预留JS扩展接口。
用 <table> 写排行榜，核心是语义清晰 + 样式可控
纯 HTML 表格本身不带样式，但能准确表达“排名、名称、分数”这类行列结构数据。只要结构写对，后续加 CSS 或 JS 扩展都方便；反过来，如果用 <div> 堆出“看起来像表格”的东西，后期排序、导出、屏幕阅读器支持都会出问题。
<thead> 必须有，且只包一行表头
排行榜的列名（如“排名”“选手”“得分”）属于结构性元信息，必须放在 <thead> 里。浏览器和辅助工具靠这个识别表格意图。常见错误是直接用 <tr><td> 写表头，或把多行标题塞进 <thead> —— 这会让排序脚本误判列数，也影响可访问性。
正确写法示例：
<thead>
<tr>
<th>排名</th>
<th>选手</th>
<th>得分</th>
</tr>
</thead>
排名列用 <ol> 或 CSS 计数器更可靠
手动写 <td>1</td><td>2</td> 看似简单，但插入/删除行时极易错位。推荐两种方式：
立即学习“前端免费学习笔记（深入）”；
- 在
<tbody>外套一层<ol>，每行用<li>包裹<tr>，再用 CSS 隐藏默认序号并重置（需配合counter-reset） - 更轻量的做法：用 CSS
counter-increment给<tr>自增，::before插入数字 —— 不依赖 HTML 内容，拖拽重排后自动更新 - 注意：不要用 JavaScript 动态写死数字到
<td>里，否则服务端渲染或 SEO 场景下数字会丢失
移动端适配的关键不是缩放，而是列裁剪逻辑
小屏下“选手”列文字常超长，强行缩放字体反而降低可读性。更务实的做法是：
- 给
<th>和<td>加white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 用
min-width保住所必需的列（如“排名”），对次要列（如“得分详情”）设max-width: 120px - 避免在
<table>上设width: 100%后又用table-layout: fixed—— 这会让文字截断不可预测，尤其中英文混排时
真正难处理的是“多维排序”需求——比如点击“得分”列重新排序。这已超出纯 HTML 范畴，得靠 JS 绑定事件和重排 <tbody>，HTML 表格只负责提供干净的数据骨架。
