Skip to content

列表与表格

无序列表 ul

项目并列、无顺序:ul 内仅宜直接嵌套 lili 内可再放其它块级内容。

html
<ul>
  <li>第一项</li>
  <li>第二项</li>
</ul>

列表样式由 CSS 控制(list-stylepadding 等)。


有序列表 ol

带顺序或排名:ol + li,可用 startreversedtype(仍推荐以 CSS 控制编号样式)。


自定义列表 dl

术语与描述:dt + dd,适合 FAQ、名词解释。


表格 table

基本结构:tablecaption(标题)→ thead / tbody / tfoottrth/td

html
<table>
  <caption>成绩表</caption>
  <thead>
    <tr><th>姓名</th><th>分数</th></tr>
  </thead>
  <tbody>
    <tr><td>张三</td><td>90</td></tr>
  </tbody>
</table>

合并单元格rowspancolspan,先规划行列再合并。

现代实践:布局少用表格做整页排版(应交给 Flex/Grid);表格专注 tabular data。样式优先用 CSS,尽量少用表格标签上的遗留布局属性。


小结

列表区分 有序/无序/定义;表格专注 数据网格,注意 表头 th 与可访问性(必要时 scope)。