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>
相关推荐
六月的可乐1 天前
探索AI在线前端html编辑器IDE
前端·html·ai编程
এ᭄请你吃糖℘2 天前
html原生表格,实现左侧列固定
前端·html
熙凝2 天前
svg图标在react项目中的使用
html
Never_Satisfied2 天前
在JavaScript / HTML中,让<audio>元素中的多个<source>标签连续播放
开发语言·javascript·html
Paddy哥2 天前
html调起exe程序
前端·html
患得患失9492 天前
【ThreeJs】【HTML载入】Three.js 中的 CSS2DRenderer 与 CSS3DRenderer 全面解析
javascript·html·css3
折翼的恶魔2 天前
HTML基本标签二:
前端·html
Metaphor6922 天前
Java 将 PDF 转换为 HTML:高效解决方案与实践
java·经验分享·pdf·html
mengyoufengyu2 天前
Flask模板中使用Vue、ant-design-vue、@ant-design/icons-vue示例模板
vue.js·flask·html·ant-design-vue·antd-icons-vue
OEC小胖胖2 天前
SEO 优化:元数据 (Metadata) API 和站点地图 (Sitemap) 生成
前端·javascript·前端框架·html·web·next.js