一个好看的表格CSS样式 博客分类： html/jquery htmlcsstable表格样式
程序员文章站
2024-03-25 15:32:04
...
============================================================================
原创作品，允许转载。转载时请务必以超链接形式标明原始出处、以及本声明。
请注明转自：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>
