好看的table 样式一

来源：互联网发布：php posix mkfifo 编辑：程序博客网时间：2024/04/28 19:36

收集好看的table 样式,报表经常用的到.

效果图

源代码:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"utf-8" /> <title>css tables</title> <mce:style type="text/css"></mce:style><mce:style type="text/css" mce_bogus="1"></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1"> /* 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> </head><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">cwt123</td> <td class="row">99</td> <td class="row">0755-88886666</td> <td class="row">中国深圳</td> </tr> </table> </body> </html>