Skip to content

列表与表格 ​

无序列表 ul ​

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

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

列表样式由 CSS 控制(list-style、padding 等)。


有序列表 ol ​

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


自定义列表 dl ​

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


表格 table ​

基本结构:table → caption(标题)→ thead / tbody / tfoot → tr → th/td。

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

合并单元格:rowspan、colspan,先规划行列再合并。

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


小结 ​

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