HTML第六课:表格展示

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>
相关推荐
蔗理苦3 小时前
2025-09-04 HTML3——区块布局与表单
前端·css·html
BUG创建者11 小时前
uniapp vue页面传参到webview.nvue页面的html或者另一vue中
vue.js·uni-app·html
小小菜鸡ing13 小时前
简单爬一个小说页面 HTML 的title和内容
前端·html
dreams_dream15 小时前
vue2头部布局示例
前端·html
前端与小赵16 小时前
渐变背景色和渐变字体颜色的实现方法
css·html·css3
@HNUSTer18 小时前
基于 HTML、CSS 和 JavaScript 的智能图像虚化系统
开发语言·前端·javascript·css·html
主宰者1 天前
WPF外部打开html文件
前端·html·wpf
YUJIANYUE1 天前
纯前端html英文字帖图片生成器自动段落和换行
前端·html
learning_tom2 天前
HTML5 标题标签、段落、换行和水平线
前端·html·html5