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