HTML第六课:表格展示

发布于:2025-09-03 ⋅ 阅读:(19) ⋅ 点赞:(0)

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>


网站公告

今日签到

点亮在社区的每一天
去签到