============================================================================
原创作品,允许转载。转载时请务必以超链接形式标明原始出处、以及本声明。
请注明转自:http://yunjianfei.iteye.com/blog/
============================================================================
直接上主题,首先是运行效果:
具体的代码如下:
文件名:test.css
table.t1 { margin-top:10px; margin-left:20px; margin-right:20px; margin-bottom:5px; #background-color: #FFF; #background:#EEF4F9; #border: none; border: 1; #color:#003755; border-collapse:collapse; font: 14px "宋体"; } table.t1 th{ background:#7CB8E2; color:#fff; padding:6px 4px; text-align:center; } table.t1 td{ background:#C7DDEE none repeat-x scroll center left; color:#000; padding:4px 2px; } table.t1 a{ text-decoration:none; height:1em; } table.t1 a:link, table.t1 a:visited{ color:#3366CC; } table.t1 a:hover{ /* 鼠标经过时 */ color:#B50000; text-decoration:underline; }
测试文件名:test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link rel="stylesheet" type="text/css" href="./test.css"/> <script> function test() { var a = confirm("是否删除?"); if(a) alert("删除成功!"); else alert("操作失败!"); } </script> <script> function selectall() { var a = document.all; for(var i = 0;i<a.length;i++) { if(typeof a[i]!="undefind" && a[i].type=='checkbox') { a[i].checked=true; } } } function unselectall() { var a = document.all; for(var i = 0;i<a.length;i++) { if(typeof a[i]!="undefind" && a[i].type=='checkbox') { a[i].checked=false; } } } </script> </head> <body> <hr> <center> <form action="" name="form1"> <table border="1" class="t1"> <tr><th>编号</th><th>姓名</th><th>性别</th><th>电话号码</th><th>邮箱</th><th>删除</th><th>修改</th></tr> <tr> <td>123</td><td>王五</td><td>男</td><td>123456</td><td>123</td><td><input type="checkbox" ></td><td><a href="updataEmp.html">修改</a></td></tr> <td>123</td><td>王五</td><td>男</td><td>123456</td><td>123</td><td><input type="checkbox" ></td><td><a href="updataEmp.html">修改</a></td></tr> <td>123</td><td>王五</td><td>男</td><td>123456</td><td>123</td><td><input type="checkbox" ></td><td><a href="updataEmp.html">修改</a></td></tr> </table> <input type="button" name="" value="全选" onClick="selectall()"> <input type="button" name="" value="反选" onClick="unselectall()"> <input type="button" name = "shanchu"value="删除" onClick="test()"> </form> </center> </body> </html>
相关推荐
一些非常漂亮实用的CSS表格样式,使用方便.页面简洁!
网络上收集的css table样式 好看table样式 好看的CSS——Table样式表
很多经典web表格设计样式分享给大家,希望对初学web开发的朋友用的上
十个多种样式表格边框,代码完全呈现,而且颜色不一样可以根据自己的网站布局设计改变。
NULL 博文链接:https://lwyingdao.iteye.com/blog/602713
国外人写的,8款非常好看的css表格,纯英文 国外人写的,8款非常好看的css表格,纯英文 国外人写的,8款非常好看的css表格,纯英文
漂亮表格CSS样式,下载直接可以用。简单方便,简洁!
网页特效用CSS样式定义的圆角表格......................
css弄的一个样式表格,希望对需要的人有帮助。
精美的css控制表格样式,可以选择不同的css控制表格的展现形式。
用示例方式展示如何用CSS进行表格样式设计
我搜集的网页css表格样式.直接拿来用就可以了
一个很好的表格html代码,里面包含了大量的css表格类型,界面清晰、清爽、相当的漂亮!
国外人写的,8款非常好看的css表格,纯英文
css3表格样式产品价格页面表格样式
几种表格的css效果设置,可以来学习一下
效果描述: 你是否还在为你的网页中复杂而又丑陋的表格而烦恼? 往往很多默认的表格都不好看,而样式又比较难以控制 ... 今天懒人站长特意整理了... 1、head中的css样式复制到你的样式表中即可实现漂亮的table效果
CSS(Cascading Style Sheets)它是一种制作网页的新技术。与传统的html语言相比,CSS技术为网页设计提供了更丰富、更...结合几个实例详细介绍如何利用CSS来美化网页表格,使得网页增光添彩,从而能够吸引更多的浏览者
漂亮的表格样式漂亮的表格样式漂亮的表格样式漂亮的表格样式漂亮的表格样式
21个新奇漂亮的AjaxCSS表格设计