html表格填充0,html表格美化css

分享三种笔者常用的html表格美化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; }

标题１	标题１	标题１	标题１	标题１
内容	内容	内容	内容	内容
内容	内容	内容	内容	内容
分页代码

Info Header 1	Info Header 2	Info Header 3
Text 1A	Text 1B	Text 1C
Text 2A	Text 2B	Text 2C

Info Header 1	Info Header 2	Info Header 3
Text 1A	Text 1B	Text 1C
Text 2A	Text 2B	Text 2C
Text 3A	Text 3B	Text 3C
Text 4A	Text 4B	Text 4C
Text 5A	Text 5B	Text 5C