html中table美化,漂亮的css table样式
工作中发邮件通知人员样式总是一个麻烦事,工作的严肃性不能让邮件样式太花哨,但是又不能太简陋, 所以找了下面的table样式和大家分享。
效果如下图所示:
漂亮CSS Tables-幸凡学习网
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;
}
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;
}
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;
}
姓名 | 年龄 | 电话 | 居住地点 |
---|---|---|---|
ok22.org | 100 | 010-110 | 中国北京 |
大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0
如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)
html中table美化,漂亮的css table样式相关推荐
- 二十款漂亮的CSS字体样式,让你受用非浅
二十款漂亮的CSS字体样式,让你受用非浅 平时对于网站整站的字体风格常常很纠结,纠结到底用什么样式才行,才好看,后来在网上搜集收到二十种我认为很漂亮的字体样式并使用,感觉很美观,解决了我以前的纠结.具 ...
- html中正方形列表标签属性,CSS 列表样式
我们知道在 HTML 中列表可以分为无序列表.有序列表.定义列表.在网页中经常可以看到无序列表的使用,例如像导航栏菜单.新闻列表.商品分类.图片展示等,基本都是通过无序列表来实现的. 无序列表中每个列 ...
- php好看的控件,漂亮的css button样式汇总
在网页设计过程中,程序员们常常需要配合美工来设计页面的美观效果,当然大部分页面风格都是美工的工作.但是按钮button样式,是我们程序员最常用的. 下面我们就给大家介绍一些好看的button样式,大家 ...
- (收藏)漂亮的css button样式汇总
在网页设计过程中,程序员们常常需要配合美工来设计页面的美观效果,当然大部分页面风格都是美工的工作.但是按钮button样式,是我们程序员最常用的. 下面我们就给大家介绍一些好看的button样式,大家 ...
- html中怎么设置滚动条效果,css滚动条样式怎么设置
为了做出更好的视觉效果,有时候需要用css改变浏览器或版块中滚动条的样式,那么应该怎么实现自定义滚动条样式呢? 一.设置css滚动条的7个属性说明(附参考图). 1 ::-webkit-scroll ...
- html中怎么改变鼠标形状,css鼠标样式语法及20种可选值(属性)
我们对Windows各种各样的鼠标样式都不陌生,当鼠标移动到不同的地方时,当鼠标执行不同的功能时,当系统处于不同的状态时,都会使鼠标的形状发生变化.而在网页上往往只有当鼠标在超级链接上时才出现一个手形 ...
- 92款超级漂亮的css按钮样式 复制即用
样式如图,代码已在结尾,按照序号复制粘贴便可直接用了: 代码: <ul><li><div class="button-wrapper" data-ti ...
- html 字体形状,二十款漂亮的CSS字体样式
样式一:body { margin: 0; padding: 0; line-height: 1.5em; font-family: 'Times New Roman', Times, serif; ...
- 二十款漂亮的CSS字体样式
样式一: body {margin: 0; padding: 0; line-height: 1.5em;font-family: "Times New Roman", Times ...
- css Table布局:基于display:table的CSS布局
两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...
最新文章
- 待飞日记(第四天和第五天)
- 计算机硬件的基本组成
- Linux 进程管理器 supervixor
- 操作系统:Linux 环境变量配置的 6 种方法!
- 全网最全Spring面试题之高级篇整理总结(二)(共16题,附超详细解答)
- json同一个参数不同类型_js基础之变量类型
- 第九届蓝桥杯省赛C++A组第二题 ---星期一
- App Store审核标准
- Linux下php导出excel失败且浏览器报错500
- 如何检索综述类文献?
- python生成中文字符画_python制作字符画
- Excel 2010 VBA 入门 033 批量合并相同的单元格
- 微信小程序RSA非对称加密。
- pyecharts绘制省级地图(Map地图、Geo动态涟漪散点图、Geo动态轨迹图)
- Android项目必备技术
- 通往古埃及文明的钥匙 ———— 罗塞塔石碑
- 谷歌SEO排名受哪些因素的影响?(二)
- bim 模型web页面展示_一种基于BIM模型的Web端轻量化展示方法与流程
- 场效应管及其放大电路
- 555定时器的原理与应用(1.1)