分享三种笔者常用的html表格美化css:
(效果如上图)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格美化</title>
<style type="text/css">
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article,section { display: block; }
body { line-height: 1; }
ol,ul { list-style: none; }
blockquote,q { quotes: none; }
blockquote:before,blockquote:after,q:before,q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
body,input,textarea,select,button { font: 12px/1.6em '5FAE8F6F96C59ED1',arial,'5b8b4f53'; color: #232323; outline: 0; }
a { color: #232323; }
.cb10 { height: 20px; }
/* m-tb */
.m-tb { width: 100%; }
.m-tb th { background-color: #CCCCCC; border: 1px solid #AAA; padding: 8px; }
.m-tb td { background-color: #EFEFEF; border: 1px solid #AAA; padding: 8px; }
.m-tb2 { width: 100%; }
.m-tb2 th { background-color: #dedede; border: 1px solid #666; padding: 8px; }
.m-tb2 td { background-color: #ffffff; border: 1px solid #666; padding: 8px; }
.m-tb3 { width: 100%; }
.m-tb3 th { background-color: #c3dde0; border: 1px solid #a9c6c9; padding: 8px; }
.m-tb3 td { background-color: #d4e3e5; border: 1px solid #a9c6c9; padding: 8px; }
</style>
</head>
<body width:600px; margin:0 auto;">
<div class="cb10"></div>
<table class="m-tb">
<tr>
<th>标题1</th>
<th>标题1</th>
<th>标题1</th>
<th>标题1</th>
<th>标题1</th>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<th colspan="5">分页代码</th>
</tr>
</table>
<div class="cb10"></div>
<table class="m-tb2">
<tr>
<th>Info Header 1</th>
<th>Info Header 2</th>
<th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td>
<td>Text 1B</td>
<td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td>
<td>Text 2B</td>
<td>Text 2C</td>
</tr>
</table>
<div class="cb10"></div>
<table class="m-tb3">
<tr>
<th>Info Header 1</th>
<th>Info Header 2</th>
<th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td>
<td>Text 1B</td>
<td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td>
<td>Text 2B</td>
<td>Text 2C</td>
</tr>
<tr>
<td>Text 3A</td>
<td>Text 3B</td>
<td>Text 3C</td>
</tr>
<tr>
<td>Text 4A</td>
<td>Text 4B</td>
<td>Text 4C</td>
</tr>
<tr>
<td>Text 5A</td>
<td>Text 5B</td>
<td>Text 5C</td>
</tr>
</table>
</body>
</html>