HTML实现学生信息表布局

最新推荐文章于 2024-05-26 21:23:06 发布
最新推荐文章于 2024-05-26 21:23:06 发布
阅读量2.4k 收藏 8
点赞数 1
文章标签： 开发工具
原文链接：http://www.cnblogs.com/wanneng/p/10257359.html
版权 
  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>学生信息</title>
  6     </head>
  7     <body>
  8         <table  align="center" cellpadding="0" cellspacing="0" border="1" width="560">
  9             <caption><h2>学生基本情况登记表</h2></caption>
 10             <tr align="center">
 11                 <td width="80" height="40" >姓名</td>
 12                 <td width="80" height="40"></td>
 13                 <td width="80" height="40">曾用名</td>
 14                 <td width="80" height="40"></td>
 15                 <td width="80" height="40">出生年月</td>
 16                 <td width="80" height="40"></td>
 17                 <td width="80" height="40" rowspan="5">照片</td>
 18             </tr>
 19             <tr align="center">
 20                 <td width="80" height="40" >性别</td>
 21                 <td width="80" height="40" ></td>
 22                 <td width="80" height="40" >民族</td>
 23                 <td width="80" height="40" ></td>
 24                 <td width="80" height="40" >政治面貌</td>
 25                 <td width="80" height="40" ></td>
 26                 
 27             </tr>
 28             <tr align="center">
 29                 <td width="80" height="40" >年龄</td>
 30                 <td width="80" height="40" ></td>
 31                 <td width="80" height="40" >籍贯</td>
 32                 <td width="80" height="40" ></td>
 33                 <td width="80" height="40" >政治面貌</td>
 34                 <td width="80" height="40" ></td>
 35                 
 36             </tr>
 37             <tr align="center">
 38                 <td width="80" height="40"  colspan="2" rowspan="2">基本情况</td>
 39                 
 40                 <td width="80" height="40"  >毕业院校</td>
 41                 
 42                 
 43                 <td width="80" height="40"  colspan="3"></td>
 44                 
 45             </tr>
 46             <tr align="center">
 47                 
 48                 
 49                 <td width="80" height="40" >家庭住址</td>
 50                 <td width="80" height="40"  colspan="3"></td>
 51                 
 52                 
 53             </tr>
 54         </table>
 55         <table align="center" cellpadding="0" cellspacing="0" border="1" width="560">
 56             <tr align="center">
 57                 <td width="40" height="40" rowspan="6">成绩</td>
 58                 <td width="40" height="40" colspan="2">第一学期</td>
 59                 
 60                 <td width="40" height="40" colspan="2">第二学期</td>
 61                 
 62                 <td width="40" height="40" colspan="2">第三学期</td>
 63                 
 64                 <td width="40" height="40" colspan="2">第四学期</td>
 65                 
 66                 <td width="40" height="40" colspan="2">第五学期</td>
 67                 
 68                 <td width="40" height="40" colspan="2">第六学期</td>
 69                 
 70                 <td width="40" height="40" rowspan="4">毕业设计</td>
 71             </tr>
 72             <tr align="center">
 73                 
 74                 <td width="40" height="40"></td>
 75                 <td width="40" height="40"></td>
 76                 <td width="40" height="40"></td>
 77                 <td width="40" height="40"></td>
 78                 <td width="40" height="40"></td>
 79                 <td width="40" height="40"></td>
 80                 <td width="40" height="40"></td>
 81                 <td width="40" height="40"></td>
 82                 <td width="40" height="40"></td>
 83                 <td width="40" height="40"></td>
 84                 <td width="40" height="40"></td>
 85                 <td width="40" height="40"></td>
 86             </tr>
 87             <tr align="center">
 88                 <td width="40" height="40"></td>
 89                 <td width="40" height="40"></td>
 90                 <td width="40" height="40"></td>
 91                 <td width="40" height="40"></td>
 92                 <td width="40" height="40"></td>
 93                 <td width="40" height="40"></td>
 94                 <td width="40" height="40"></td>
 95                 <td width="40" height="40"></td>
 96                 <td width="40" height="40"></td>
 97                 <td width="40" height="40"></td>
 98                 <td width="40" height="40"></td>
 99                 <td width="40" height="40"></td>
100                 
101             </tr>
102             <tr align="center">
103             
104                 <td width="40" height="40"></td>
105                 <td width="40" height="40"></td>
106                 <td width="40" height="40"></td>
107                 <td width="40" height="40"></td>
108                 <td width="40" height="40"></td>
109                 <td width="40" height="40"></td>
110                 <td width="40" height="40"></td>
111                 <td width="40" height="40"></td>
112                 <td width="40" height="40"></td>
113                 <td width="40" height="40"></td>
114                 <td width="40" height="40"></td>
115                 <td width="40" height="40"></td>
116             </tr>
117             <tr align="center">
118                 
119                 <td width="40" height="40"></td>
120                 <td width="40" height="40"></td>
121                 <td width="40" height="40"></td>
122                 <td width="40" height="40"></td>
123                 <td width="40" height="40"></td>
124                 <td width="40" height="40"></td>
125                 <td width="40" height="40"></td>
126                 <td width="40" height="40"></td>
127                 <td width="40" height="40"></td>
128                 <td width="40" height="40"></td>
129                 <td width="40" height="40"></td>
130                 <td width="40" height="40"></td>
131                 <td width="40" height="40" rowspan="2"></td>
132             </tr>
133             <tr align="center">
134                 
135                 <td width="40" height="40"></td>
136                 <td width="40" height="40"></td>
137                 <td width="40" height="40"></td>
138                 <td width="40" height="40"></td>
139                 <td width="40" height="40"></td>
140                 <td width="40" height="40"></td>
141                 <td width="40" height="40"></td>
142                 <td width="40" height="40"></td>
143                 <td width="40" height="40"></td>
144                 <td width="40" height="40"></td>
145                 <td width="40" height="40"></td>
146                 <td width="40" height="40"></td>
147             </tr>
148             <tr align="center">
149                 <td width="40" height="60">何时何地受过何种惩罚</td>
150                 <td width="40" height="60" colspan="6"></td>
151             
152                 <td width="40" height="60">何时何地受过何种奖励</td>
153                 <td width="40" height="60" colspan="6"></td>
154                 
155             </tr>
156             <tr align="center">
157                 <td width="40" height="60" colspan="2">备注</td>
158                 <td colspan="12"></td>
159                 
160             </tr>
161         </table>
162     </body>
163 </html>

 

转载于:https://www.cnblogs.com/wanneng/p/10257359.html

weixin_33755557
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用html做一个学生信息表,制作一个表格，显示班级的学生信息。
weixin_39791322的博客
06-03 2298
new document window.onload = function(){var tr = document.getElementsByTagName("tr");for(var i =0;i<=tr.length-1;i++){changeBC(tr[i]);}}function changeBC(obj){console.log("1234");obj.onmouseover =...
jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)
12-11
表格大家都十分熟悉，如今的CSS也使得表格的布局越来越光彩耀人。但是，无论如何，都掩饰不了那些包装下的死板。 那么如何让那些死板的数据 更具有可读性、可用性，能够让我们那些数据在“动”呢？ 下面我们使用jquery+ajax 来为表格注入些活力。主要实现的目的就是：将表格的列标题转化为按钮，点击不同的列标题，便按相应的列对数据进行排序。比如学生信息表，我点击“生日”列，这张表便按生日排序将结果呈现在我们面前。使用ajax来调用本页也避免了刷新页面所带来的折磨。 下面我给出最基本的jsp页面  详细代码如下 代码如下: <%@ page language=”java” import=”java
基于html+css的音乐网站网页设计，共9个页面
06-05
题目：请同学们以音乐为主题完成一网站设计。（共100分） 综合运用所学习的知识设计音乐网站，网页布局主要包括网站顶部信息，banner，导航，轮播图，主要内容，footer等基本模块。要求学生能灵活使用标准流、浮动和定位等知识利用div+css进行盒子布局。要求同学对HTML的基本元素，如文字、图片、链接、表格、列表、表单和转换效果等进行综合利用，完成网页内容的建设。具体要求如下： （一）题目要求 1、整体设计：网站设计要求主题鲜明，内容积极向上，页面布局美观紧凑，颜色搭配和谐，图文搭配合理，并能充分表现主题的风格特点。（15分） 2、站点结构：（10分） 1.网站结构合理。所有的文件夹与网页资源必须用以英文小写字母来命名； 2.除首页外，其他页面的网页文件应放在html文件夹中； 3.使用外部CSS样式表时，请放在css文件夹中； 4.所有的图片必须放在images文件夹里，可根据实际需要再建立子文件夹存放各类图片； 3、内容规范：链接设计合理，界面友好。所设计的网页便于浏览，网页能在当前主流浏览器Chrome、Firefox等正常打开，无空链接，无乱码。（5分） 4、技术要求
学生个人简介html网页
11-17
简单学生个人简介网页，适合新手学习，交作业参考。采用div+css布局。
se3-web-lab1
05-01
se3-web-lab1 开发一个PHP脚本来确定坐标平面上的点是否落入给定区域，并创建一个HTML页面来生成数据以将其发送到此脚本进行处理。 R参数和点的坐标必须通过HTTP请求传递到脚本。 该脚本应执行数据验证，并返回一个HTML页，其中包含一个表，该表包含所获取的参数和计算结果-达到或未达到该区域中某个点的事实。 以前的结果应在查询之间保留并显示在表中。 此外，响应中应包含有关脚本的当前时间和时间的信息。 开发HTML页面必须满足以下要求： 要排列文本和图形元素，必须使用块布局。 表单数据必须通过POST请求提交以进行处理。 样式表应位于单独的文件中。 在使用CSS时，应证明使用标识符选择器，伪类选择器，属性选择器，伪元素选择器以及CSS样式属性（例如继承和级联）。 HTML页面必须具有包含学生的全名，组号和版本号的标头。 在设置标题样式时，必须在级联样式表中显式设置字
java-shoppingcart
03-19
项目购物车 完成该项目的学生表明他们可以： 了解Spring Security和OAuth2为项目提供身份验证的流程和实现 从访问令牌中读取用户信息 了解与CORS相关的问题，并为这些问题实施解决方案 了解如何实施新用户和注销端点 使用Postman使用身份验证手动测试Web API 介绍 购物车是一种非常常见的应用程序，因此让我们看一看。该Java Spring REST API应用程序将为客户端提供端点，以对应用程序数据中包含的数据集执行各种CRUD操作。使用OAuth2身份验证可确保对这些端点的访问安全。 数据库布局 您正在创建一个Java Spring REST API服务器，该服务器将数据存储在H2数据库中。最终的表格布局应为 所有表均包含以下审核字段 createdby-创建行的用户名。应该默认为SYSTEM createddate-创建行的日期字段 lastmodified
学生信息管理页面
03-19
学生信息管理系统界面，才有html编写，供大家参考交流使用
学生信息管理系统源代码
12-12
数据库：mysql jdk：1.7 tomcat：7.0 部署方式： 1.把项目导入eclipse,jdk版本和tomcat版本不一致请修改。 2.在mysql中新建名为Student的数据库，导入sql.
html+css实战43-综合案例-学生信息表
geyaoisnice的博客
06-04 175
<!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>...
html制作一张学生信息表格,HTML的嵌入式精美学生表格代码
weixin_36164462的博客
06-15 1471
HTML的嵌入式精美学生表格代码Contributor：国民老公45 Type：代码 Date time：2019-11-06 20:35:07 Favorite：4 Score：2返回上页Report请选择举报理由：AdvertisingPoliticallyPornographicGarbage articleOtherCollectionModify the typolegend{text-...
原生html编写学上信息表格
weixin_40922551的博客
12-17 230
<table border="1" width="400" height="400"> <!-- 表格整体的大标题 --> <caption><h3>优秀学生信息表格</h3></caption> <!-- 表格的头部 --> <thead> <tr> <th>年级</th> <th>姓名&
表格模板-学生个人信息登记表.xls
09-09
表格模板-学生个人信息登记表.xls
基于Python Django框架的学生信息管理系统源码
03-25
项目概述：基于Python Django框架的学生信息管理系统 本项目采用Python作为主要开发语言，整合了HTML, JavaScript和CSS等前端技术，构建了一个功能全面的学生信息管理系统。该系统包含60个文件，具体分布如下： - Python源文件（py）：19个，涵盖了系统的后端逻辑和业务处理。 - HTML模板文件（html）：8个，定义了系统的前端页面结构。 - 配置文件（xml）：5个，用于配置系统相关参数和设置。 - 图片资源（png）：5个，提供了必要的视觉元素。 - JavaScript脚本（js）：5个，实现了页面的动态交互效果。 - 样式表（css）：4个，负责系统的视觉呈现和布局。 - 地图文件（map）：4个，用于前端资源的定位。 - 字体文件（ttf）：2个，保证了系统界面的字体风格一致性。 - 图片文件（jpg）：2个，丰富了系统的视觉内容。 - 版本控制忽略配置（gitignore）：1个，用于版本控制的文件过滤。 本项目是一个基于Django的学生信息管理系统，旨在为教育机构提供一个高效、易用的学生信息管理解决方案。
HTML5制作信息登记表
热门推荐
码云仓库地址：https://gitee.com/lance-gyq
12-04 1万+
# 制作信息登记表# 样式需求分析: 一、 通过最外层的大盒子对页面进行整体控制，设置宽高、背景图片及相对定位。 二、 通过标记对表单进行整体控制，对其设置宽高、边距、边框样式及绝对定位。 三、 通过标记控制标题的文本样式，对其设置对齐、外边距样式。 四、 通过标记控制每一行的学员信息模块，对其设置外边距样式。 五、 通过标记控制提示信息，将其转为行内块元素，对其设置宽度、又内边距及右对齐。 六、 通过标记控制输入框的宽高、内边距和边宽样式。 成品样式主要代码： 效果图： 这...
html-优秀学生信息表格
m0_46688827的博客
12-15 2223
如何用html实现下图所示的优秀学生信息表： 首先，观察该表的表格的结构标签： 1、表标题：优秀学生信息表格，用`caption` 2、表头单元格：年纪，姓名，学号，班级，加粗表示,用 `th` 3、高三年级跨行合并，`rowspan` 4、班级这一列，表宽度大于其他三列，`width` 5、评语跨列合并,`colspan`
html+css3 学生信息表
老段的CSDN的博客
08-22 2320
【代码】html+css3 学生信息表。
HTML基础-综合案例1-学生信息表
m0_67278228的博客
09-03 740
运用了表格的相关知识
HTML 基础之 学生信息表
陈三一的博客
07-29 1万+
 主要是表格属性的级别，这个可以很轻易的在网上查询得到。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;学员信息表&lt;/title&gt; &lt;!-- 作者：三一 时间：2018-0
Linux防火墙之iptables（二）
最新发布
lxplxplike的博客
05-26 957
在Internet中发布位于局域网内的服务器。
html学生信息管理系统只用前端
01-07
HTML学生信息管理系统只用前端的实现是完全可行的。前端主要负责展示数据和用户交互，通过HTML、CSS和JavaScript来完成页面设计、样式美化和功能实现。 首先，利用HTML标签和属性可以构建学生信息管理系统的各个页面。例如，使用<div>、<table>、<form>等标签来创建页面的整体结构和布局，使用<input>、<select>、<textarea>等标签来实现输入框、下拉列表和文本域等表单元素。这样，可以通过HTML语法将学生的个人信息和相关操作展示在页面上。 其次，使用CSS可以美化学生信息管理系统的界面。通过定义样式表，我们可以设置页面的颜色、字体、大小、边距等属性，从而使系统界面看起来更加美观。同时，利用CSS的选择器可以实现表格的斑马线效果、按钮的悬停和点击效果等，增强用户的视觉体验。 最后，通过编写JavaScript代码可以实现学生信息管理系统的各种交互功能。例如，可以利用DOM操作获取用户输入的信息并进行表单验证，确保数据的正确性。同时，可以使用事件处理函数来响应用户的操作，比如添加学生信息、删除学生信息和修改学生信息等。此外，还可以通过JavaScript发送Ajax请求与后台进行数据交互，实现学生信息的增删改查等功能。 综上所述，利用HTML、CSS和JavaScript可以实现一个基本的学生信息管理系统的前端部分。当然，这只是一个简单的例子，实际项目中可能还需要其他技术的配合，如数据库和服务器端编程等。但在只用前端的情况下，我们可以通过这些前端技术来搭建一个简单、可交互的学生信息管理系统。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值