HTML第六课：表格展示
学生花名册
- 效果示列
- 代码展示
html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>个人信息列表</title>
</head>
<body>
<h1>个人信息列表</h1>
<!-- 创建表格，border 属性设置边框宽度 -->
<table border="1" width="90%">
<!-- 表格表头 -->
<thead>
<tr>
<th><input type="checkbox" id="selectAll"></th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>职业</th>
<th>手机号码</th>
<th>邮箱</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>刘一</td>
<td>22</td>
<td>男</td>
<td>学生</td>
<td>13800138001</td>
<td>liuyi@example.com</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>陈二</td>
<td>28</td>
<td>女</td>
<td>设计师</td>
<td>13800138002</td>
<td>chener@example.com</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>张三</td>
<td>30</td>
<td>男</td>
<td>程序员</td>
<td>13800138003</td>
<td>zhangsan@example.com</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>李四</td>
<td>25</td>
<td>女</td>
<td>教师</td>
<td>13800138004</td>
<td>lisi@example.com</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>王五</td>
<td>35</td>
<td>男</td>
<td>医生</td>
<td>13800138005</td>
<td>wangwu@example.com</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>赵六</td>
<td>27</td>
<td>女</td>
<td>律师</td>
<td>13800138006</td>
<td>zhaoliu@example.com</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>孙七</td>
<td>40</td>
<td>男</td>
<td>工程师</td>
<td>13800138007</td>
<td>sunqi@example.com</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>周八</td>
<td>23</td>
<td>女</td>
<td>编辑</td>
<td>13800138008</td>
<td>zhouba@example.com</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>吴九</td>
<td>32</td>
<td>男</td>
<td>销售</td>
<td>13800138009</td>
<td>wujiu@example.com</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>郑十</td>
<td>29</td>
<td>女</td>
<td>会计</td>
<td>13800138010</td>
<td>zhengshi@example.com</td>
</tr>
</tbody>
</table>
</body>
</html>