当前位置:首页 > 开发 > Web前端 > Css > 正文

漂亮CSS Tables

发表于: 2011-11-16   作者:chicony   来源:转载   浏览次数:
摘要: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"utf-8" /> <title>漂亮CSS Tables</title> </head>

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"utf-8" /> 
<title>漂亮CSS Tables</title> 
</head> 
<style type="text/css"> 
/* CSS Document */ 

body { 
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #4f6b72; 
background: #E6EAE9; 
} 

a { 
color: #c75f3e; 
} 

#mytable { 
width: 700px; 
padding: 0; 
margin: 0; 
} 

caption { 
padding: 0 0 5px 0; 
width: 700px; 
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
text-align: right; 
} 

th { 
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #4f6b72; 
border-right: 1px solid #C1DAD7; 
border-bottom: 1px solid #C1DAD7; 
border-top: 1px solid #C1DAD7; 
letter-spacing: 2px; 
text-transform: uppercase; 
text-align: left; 
padding: 6px 6px 6px 12px; 
background: #CAE8EA no-repeat; 
} 
/*power by www.winshell.cn*/ 
th.nobg { 
border-top: 0; 
border-left: 0; 
border-right: 1px solid #C1DAD7; 
background: none; 
} 

td { 
border-right: 1px solid #C1DAD7; 
border-bottom: 1px solid #C1DAD7; 
background: #fff; 
font-size:11px; 
padding: 6px 6px 6px 12px; 
color: #4f6b72; 
} 
/*power by www.winshell.cn*/ 

td.alt { 
background: #F5FAFA; 
color: #797268; 
} 

th.spec { 
border-left: 1px solid #C1DAD7; 
border-top: 0; 
background: #fff no-repeat; 
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
} 

th.specalt { 
border-left: 1px solid #C1DAD7; 
border-top: 0; 
background: #f5fafa no-repeat; 
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #797268; 
} 
/*---------for IE 5.x bug*/ 
html>body td{ font-size:11px;} 
body,td,th { 
font-family: 宋体, Arial; 
font-size: 12px; 
} 
</style> 
<body> 
<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple 

PowerMac G5 series"> 
<caption> </caption> 
<tr> 
<th scope="col">姓名</th> 
<th scope="col">年龄</th> 
<th scope="col">电话</th> 
<th scope="col">居住地点</th> 
</tr> 
<tr> 
<td class="row">badwolf</td> 
<td class="row">100</td> 
<td class="row">010-110</td> 
<td class="row">中国北京</td> 
</tr> 
</table> 

</body> 
</html>
 

漂亮CSS Tables

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4
本篇文章搜集整理的是CSS页面布局的一个很长的列表。如果你时间很少,那么可以下载已经准备好的CSS
<html> <head> <link rel="stylesheet" type="text/css" href="http://fonts.google
1.demo.html HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://ww
<html> <head> <style type="text/css"> #customers { font-family:"Trebuchet MS
一、网址:http://www.csszengarden.com/?cssfile=213/213.css 二、效果 三、CSS body { background
Chrome下效果理想,Firefox,IE9下没有动画效果。 CSS代码片段 .button, .button:visited{ backgrou
导航效果预览图: 1.demo.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "htt
Chrome下效果理想,Firefox,IE9下没有动画效果。 CSS代码片段 .button, .button:visited{ backgrou
Chrome下效果理想,Firefox,IE9下没有动画效果。 CSS代码片段 .button, .button:visited{ backgrou
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号