当前位置：首页 > web >正文

HTML第六课：表格展示

web 2025/9/4 18:16:39

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>