欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

一个好看的表格CSS样式 博客分类: html/jquery htmlcsstable表格样式 

程序员文章站 2024-03-25 15:32:04
...

============================================================================

原创作品,允许转载。转载时请务必以超链接形式标明原始出处、以及本声明。

请注明转自:http://yunjianfei.iteye.com/blog/

 

============================================================================

 

直接上主题,首先是运行效果:


一个好看的表格CSS样式
            
    
    博客分类: html/jquery htmlcsstable表格样式 

具体的代码如下:

 

 

文件名: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样式
            
    
    博客分类: html/jquery htmlcsstable表格样式 
  • 大小: 20.4 KB