首页 > 分享 > css表格梅花,html表格美化css

css表格梅花,html表格美化css

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

e0e0d17de65cc1efae42bc99864a3e7f.png

(效果如上图)

表格美化

/* 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; }

标题1标题1标题1标题1标题1内容内容内容内容内容内容内容内容内容内容分页代码 Info Header 1Info Header 2Info Header 3Text 1AText 1BText 1CText 2AText 2BText 2C Info Header 1Info Header 2Info Header 3Text 1AText 1BText 1CText 2AText 2BText 2CText 3AText 3BText 3CText 4AText 4BText 4CText 5AText 5BText 5C

相关知识

使用HTML和CSS制作网页的全面指南
HTML + CSS + JavaScript 两小时快速入门教程
前端开发学习笔记(三)HeadFirst HTML 与 CSS (第二版)
CSS中文说明及字体颜色代码
前端开发综合指南:HTML、CSS和JavaScript详解
花卉市场CSS模板下载:简洁干净的HTML设计
CSS 禅意花园: CSS 设计之美
作为一个网页前端编程专家,如何使用CSS3来设计和样式化一个无框表格?
花店CSS网页模板
前端基础知识HTML,css,js入门(超详细)

网址: css表格梅花,html表格美化css https://m.huajiangbk.com/newsview1545081.html

所属分类:花卉
上一篇: 用DataFocus将Excel
下一篇: wps表格如何美化图表 wps表