要求

表格整体居中，宽度为600px
表格边框为1个像素的绿色实线条
单元格和单元格之间的间距合并
标题行背景为黑色、字体为白色、字号14px宋体
表格页脚包含四个超链接：首页、上一页、下一页、尾页
表格页脚部分背景为黑色，四个超链接右对齐，间距为15px，字体为14px，且无蓝色下划线
表格中间部分隔行显示背景色（深灰色与浅灰色交替）
鼠标移到行上高亮显示为浅黄色，鼠标移开还原为之前的颜色
单元格的字体字号为12px表格第一列为“复选框”列；
最后一列为“操作”列每行数据的第一个单元格为复选框；
最后一个单元格含三个按钮，分别为：查看、修改、删除

模板效果图

CSS模块

<style>table,td {border-width: 1px;border-style: solid; border-color: yellowgreen;}table,th,tr,td {height: 60px;}table {margin-left: 28%;width: 600px;border-collapse: collapse;/*边缘颜色*//*                 outline-style: solid;outline-color: yellowgreen;outline-width: 1px; */}td {text-align: center;font-size: 12px;}th {background-color: black;color: white;font-size: 14px;/*宋体*/font-family: "SimSun";}a:link {/*链接位置设置*/float: right;text-decoration: none;padding: 15px;font-size: 14px;}tr:nth-child(even) {background-color: #f2f2f2;}tr:hover {background-color: #FFCC66;}</style>

总体模块

<html><head><style>table,td {border-width: 1px;border-style: solid;border-color: yellowgreen;}table,th,tr,td {height: 60px;}tr,td {height: 60px;}table {margin-left: 28%;width: 600px;border-collapse: collapse;/*                 outline-style: solid;outline-color: yellowgreen;outline-width: 1px; */}td {text-align: center;font-size: 12px;}th {background-color: black;color: white;font-size: 14px;font-family: "SimSun";}a:link {float: right;text-decoration: none;padding: 15px;font-size: 14px;}tr:nth-child(even) {background-color: #f2f2f2;}tr:hover {background-color: #FFCC66;}</style><meta charset="utf-8" /></head><body><table><tr><th><input type="checkbox" /></th><th>学号</th><th>姓名</th><th>专业</th><th>操作</th></tr><tr><td><input type="checkbox" /></td><td>9527</td><td>唐伯虎</td><td>美术</td><td><button>查看</button> <button>修改</button> <button>删除</button></td></tr><tr><td><input type="checkbox" /></td><td>007</td><td>武松</td><td>体育</td><td><button>查看</button> <button>修改</button> <button>删除</button></td></tr><tr><td><input type="checkbox" /></td><td>1024</td><td>诸葛亮</td><td>心理学</td><td><button>查看</button> <button>修改</button> <button>删除</button></td></tr><tr><th colspan="6"><p><b><a href="default.asp" target="_blank">首页</a></b><a href="default.asp" target="_blank">上一页</a></b><b><a href="default.asp" target="_blank">下一页</a></b><b><a href="default.asp" target="_blank">页尾</a></b></p></th></tr></table></body>
</html>

更多参考属性

CSS+html人员信息表相关推荐

python：自定义函数，通过姓名及电话查询人员信息及添加新人员信息表（列表+字典）
python:自定义函数,通过姓名及电话查询人员信息及添加新人员信息表(列表+字典) def zmz(c):s=[{'姓名':'','电话':'','部门':'','小组':'','职务':''}] ...
详述 MIMIC护理人员信息表（十五）
本文主要介绍了护理人员信息表(CAREGIVERS).CAREGIVERS主要为患者住院期间的护理人员信息.医学数据分析中很难将护理人员作为一种特征进行分析,因此将CAREGIVERS归为非重要分 ...
pb中建立人员信息表_如何建立基础资料并维护基础资料信息？
业务数字化平台的搭建主要分为三个部分,基础资料(主数据)模板的搭建,业务模板的搭建和报表模板的搭建. 基础资料是在业务系统中被反复调用的那些数据,包括人员信息,物料信息,仓库信息,部门信息,机台信息, ...
sql语句（一）统计跟单位目录关联的人员信息表的多个数据
dwml表:dwdm层次码,dwmc单位名称, ryjbxx表,rymc人员名称,dwdm:所属单位,zc:职称:01教授,02教师,求xys:现有人数,教授人数:jshrs,教师人数:jsrs. ...
pb中建立人员信息表_根据部门名称，从Excel人员花名册表格中快速调取所有员工信息...
只写最接地气的办公干货,加入我们,组队前行. 今天我们分享一个经典案例:通过部门名称调用该部门所有员工信息,来看个效果演示. 怎么做呢? 1.制作部门名称的下拉菜单参考文章: Excel数据规范化处 ...
详述MIMIC 的ICU患者检测时间信息表(十六)
本文主要讲解MIMIC的ICU患者检测时间信息表(DATETIMEEVENTS).按照原本逻辑结构该表已被列入非重要分析表中,同护理人员信息表.但是笔者查看了相关数据后发现,该表具有一定的研究价 ...
数据字典模板_巧用单元格保护功能+字典技术，制作高大上的人员信息录入表...
小姐姐的问题一个人事小姐姐找我说她平常要录入很多人员信息,工作容易出错,主要出现录错.录重复.录入效率低下的问题,很是苦恼,问我有没有好的解决办法,那么如何快速高效的录入数据呢? 我想想了, 给她做 ...
javascript+css学生信息表综合案例（附详细代码）
本文主要实现:通过获取input框value值,并将数据渲染到表格中,自动生成对应的学生信息表,同时可以删除相应的信息. <!DOCTYPE html> <html lang=&qu ...
css设置打印样式表,[CSS] 创建打印样式表
[CSS] 创建打印样式表 Chrome浏览器有一项非常好用的功能, 就是直接将网页保存为PDF(Ctrl+P), 虽然部分人觉得没有用, 但我经常使用这个功能比如说, 有的博文写得不错, 想保存, ...

CSS+html人员信息表

要求

模板效果图

CSS模块

总体模块

CSS+html人员信息表相关推荐

最新文章

热门文章