正心全栈编程

列表与数据表格 ​

管理后台经常需要展示操作步骤、功能清单和学员数据。本节先根据内容关系选择有序列表、无序列表或定义列表，再搭建带标题、表头和汇总区域的数据表格。

使用列表组织内容 ​

有序列表 ​

在 HTML 中，有序列表中的各个列表项是有顺序的。有序列表从 <ol> 开始，到 </ol> 结束。有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序。

步骤有明确顺序时使用 ol：

html

<div>登记步骤</div>
<ol>
    <li>填写基本信息</li>
    <li>选择班级</li>
    <li>核对手机号</li>
    <li>提交表单</li>
</ol>

预览效果如下所示：

登记步骤
  1. 填写基本信息
  2. 选择班级
  3. 核对手机号
  4. 提交表单

说明：

ol，即 ordered list（有序列表）；li，即 list（列表项）。

有序列表可以从指定编号开始：

html

<ol start="3">
    <li>核对手机号</li>
    <li>提交表单</li>
</ol>

预览效果如下所示：

  1. 核对手机号
  2. 提交表单

无序列表 ​

项目没有先后顺序时使用 ul：

html

<div>学员管理功能</div>
<ul>
    <li>查询学员</li>
    <li>新增学员</li>
    <li>编辑学员</li>
    <li>删除学员</li>
</ul>

预览效果如下所示：

学员管理功能
  • 查询学员
  • 新增学员
  • 编辑学员
  • 删除学员

ul 内部直接放 li。项目符号样式以后使用 CSS 的 list-style 调整，不使用旧式 type 属性。

术语与说明列表 ​

术语和解释适合使用 dl、dt、dd：

html

<dl>
    <dt>正常</dt>
    <dd>学员可以继续参加课程。</dd>

    <dt>已停用</dt>
    <dd>学员暂时不能进入后续学习流程。</dd>
</dl>

预览效果如下所示：

正常
学员可以继续参加课程。
已停用
学员暂时不能进入后续学习流程。
  • dl：definition list，定义列表。
  • dt：definition term，术语。
  • dd：definition description，说明。

搭建数据表格 ​

表格在实际开发中用得非常多，因为使用表格可以更清晰地排列数据，如下表所示。

支出项目单价（元）数目金额（元）
垃圾箱3012360
垃圾牌100121200
宣传单0.0840032
宣传小册子3250750
合计——2342

在 HTML 中，一个表格一般会由以下 3 个部分组成。

  1. 表格：table 标签
  2. 行：tr 标签
  3. 单元格：td 标签
html

<table>
    <caption>学员名单</caption>
    <thead>
    <tr>
        <th scope="col">姓名</th>
        <th scope="col">班级</th>
        <th scope="col">手机号</th>
        <th scope="col">状态</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>张三</td>
        <td>Python 1 班</td>
        <td>13800000001</td>
        <td>正常</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>Web 全栈班</td>
        <td>13800000002</td>
        <td>已停用</td>
    </tr>
    </tbody>
</table>

预览效果如下所示：

学员名单
姓名班级手机号状态
张三Python 1 班13800000001正常
李四Web 全栈班13800000002已停用

认识表格元素 ​

元素作用
table表格整体
caption表格标题
thead表头区域
tbody表格主体
tfoot表格汇总区域
tr一行
th表头单元格
td普通数据单元格

scope="col" 表示当前表头描述一列。行表头使用 scope="row"：

html

<tr>
    <th scope="row">张三</th>
    <td>Python 1 班</td>
    <td>正常</td>
</tr>

放进表格后的预览效果：

姓名班级状态
张三Python 1 班正常

完善表格结构 ​

添加汇总区域 ​

需要汇总时使用 tfoot：

html

<tfoot>
<tr>
    <th scope="row" colspan="3">学员总数</th>
    <td>2</td>
</tr>
</tfoot>

放进表格后的预览效果：

姓名班级手机号状态
学员总数2

thead、tbody、tfoot 表达表格区域，不是为了自动添加样式。

横向合并 ​

colspan 表示单元格横跨几列：

html
<tr>
    <th ></th>
    <td >xx</td>
    <td >yy</td>
    <td >zz</td>
</tr>
<tr>
    <th scope="row">备注</th>
    <td colspan="3">周末班学员</td>
</tr>

预览效果如下所示：

xxyyzz
备注周末班学员

纵向合并 ​

rowspan 表示单元格纵跨几行：

html

<tbody>
<tr>
    <th scope="row" rowspan="2">Python 1 班</th>
    <td>张三</td>
    <td>正常</td>
</tr>
<tr>
    <td>王五</td>
    <td>正常</td>
</tr>
</tbody>

预览效果如下所示：

Python 1 班张三正常
王五正常

合并后要重新计算每行实际占用的列数。初学阶段只在确实能提升数据理解时使用，不要为了视觉效果大量合并。

完成课程与学员概览 ​

html

<main>
    <h1>学员信息管理</h1>

    <section>
        <h2>管理流程</h2>
        <ol>
            <li>输入查询条件</li>
            <li>核对列表数据</li>
            <li>执行新增或编辑</li>
        </ol>
    </section>

    <section>
        <h2>学员列表</h2>
        <table>
            <caption>当前班级学员</caption>
            <thead>
            <tr>
                <th scope="col">姓名</th>
                <th scope="col">班级</th>
                <th scope="col">状态</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">张三</th>
                <td>Python 1 班</td>
                <td>正常</td>
            </tr>
            <tr>
                <th scope="row">李四</th>
                <td>Web 全栈班</td>
                <td>已停用</td>
            </tr>
            </tbody>
        </table>
    </section>
</main>

预览效果如下所示：

学员信息管理

管理流程

  1. 输入查询条件
  2. 核对列表数据
  3. 执行新增或编辑

学员列表

当前班级学员
姓名班级状态
张三Python 1 班正常
李四Web 全栈班已停用

小结 ​

  1. ul 表示无顺序项目，ol 表示有顺序步骤。
  2. dl 适合术语与解释。
  3. 表格用于二维数据，不用于页面布局。
  4. caption、th 和 scope 能让表格含义更清楚。
  5. colspan 横向合并，rowspan 纵向合并。