前端开发 \ CSS \ html表格美化css

html表格美化css

总点击1707
简介:分享三种笔者常用的html表格美化css:  (效果如上图) <html> <head> <metahttp-equiv=\"Content-Type\"content=\"text/html;charset=utf-8\"/>

分享三种笔者常用的html表格美化css:


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>


意见反馈 常见问题 官方微信 返回顶部