html-优秀学生信息表格

优秀学生信息表格

如何用html实现下图所示的优秀学生信息表：

首先，观察该表的表格的结构标签：
1、表标题：优秀学生信息表格，用caption
2、表头单元格：年纪，姓名，学号，班级，加粗表示,用 th
3、高三年级跨行合并，rowspan
4、班级这一列，表宽度大于其他三列，width
5、评语跨列合并,colspan

思路：首先搭建表的整体结构，table确定表的范围：
对于表头用thead确定范围，接着tr确定行，td或者th确定表头单元格（td确定表头，要用strong或b标签将文字加粗）
对于表主体，用tbody确定，tr确定行，td确定单元格
对于表尾，用tfoot确定范围，tr确定行，td确定单元格
然后细化内容：
1、表格之间的线条显示，在table标签里添加border属性，比如border="1"
2、跨行跨列合并，跨行合并rowspan='数字‘，跨列合并colspan=’数字'

主体部分高一的跨2行合并<td rowspan="2" >高一</td> ，添加下一行数据时不用再重复添加<td>高一</td>,否则会多出来一列，同理跨列合并评语，也不需要再添加其他内容。


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1"><caption>优秀学生信息表</caption><!-- 表头 --><thead><tr><th >年级</th><th>姓名</th><th>学号</th><th>班级</th></tr>    </thead><!-- 主体 --><tbody><tr><td rowspan="2" >高一</td><td height="100" >张三</td><td height="100" >110</td><td width="100">三年二班</td></tr>        <tr><!-- <td>高一</td> -->  <!-- 因为上面高一已经跨行了，如果这一回高一没有注释的化，会增加一列 --><td height="100">赵四</td><td>120</td><td>三年三班</td></tr></tbody><!-- 表尾 --><tfoot><tr><td>评语</td><td colspan="3">你们都很优秀啦</td></tr></tfoot></table></body>
</html>

结果展示：

html-优秀学生信息表格相关推荐

html制作一张学生信息表格,HTML的嵌入式精美学生表格代码
HTML的嵌入式精美学生表格代码 Contributor:国民老公45 Type:代码 Date time:2019-11-06 20:35:07 Favorite:4 Score:2 返回上页 Re ...
vue-element之学生信息表格（详细代码）
效果图如下: 删除添加修改模糊查询表格样式代码如下: <template><div><el-card class="box-card"& ...
【java毕业设计】基于javaEE+SSH+SQL Server的学生信息管理系统设计与实现（毕业论文+程序源码）——学生信息管理系统
基于javaEE+SSH+SQL Server的学生信息管理系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于javaEE+SSH+SQL Server的学生信息管理系统设计与实现,文章 ...
C语言涉及数组的大作业,c语言大作业_基于数组的学生信息管理系统.doc
. . word完美格式 <C语言程序设计实训1>报告设计题目: 基于数组的学生信息管理系统学院名称: 科学技术学院专业: 软件工程班级: 108班姓名: 大神 ...
Javaweb学生信息管理系统（Mysql+JSP+MVC+CSS）
项目源码及数据库: 链接:https://pan.baidu.com/s/1ktUyxbOI9lljWr-HRTRIiQ?pwd=1024 提取码:1024 目录一.项目介绍二.运行效果 1.登录 ...
html表格引用bootcss样式，vue,渲染学生信息
html表格引用bootcss样式,vue,渲染学生信息,优秀学生背景色为蓝色 <!DOCTYPE html> <html lang="en"><he ...
制作一个表格，显示班级的学生信息。
编程练习制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点 ...
动态生成表格之新增学生信息
动态生成表格之新增学生信息: 功能需求: 当点击新增按钮时弹出模态框不允许其中一项为空点击"保存"时,数据保存并添加成功后关闭模态框前期准备工作: 1.引入bootstrap ...
js实现学生信息输入表格
样式 <style>table {width: 100%;border-collapse: collapse;}th,td {border: 1px solid black;}</s ...

html-优秀学生信息表格

html-优秀学生信息表格相关推荐

最新文章

热门文章