HTML5制作表格样式


Posted in HTML / CSS onNovember 15, 2016

HTML5制作表格样式

废话不多说了,具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表格</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font: italic 20px Georgia, serif;
            letter-spacing: normal;
            background-color: #f0f0f0;
        }
        #content{
            width: 750px;
            padding: 40px;
            margin: 0 auto;
            background-color: #fff;
            border-left: 30px solid #1D81B6;
            border-right: 1px solid #ddd;
            box-shadow: 0px 0px 16px #aaa;
        }
        #table1{
            font: bold 16px/1.4em "Trebuchet MS", sans-serif;
        }
        #table1 thead th{
            padding: 15px;
            border: 1px solid #93CE37;
            border-bottom: 3px solid #9ED929;
            text-shadow: 1px 1px 1px #568F23;
            color: #fff;
            background-color: #9DD929;
            border-radius: 5px 5px 0px 0px;
        }
        #table1 thead th:empty{
            background-color: transparent;
            border: none;
        }
        #table1 tbody th{
            padding: 0px 10px;
            border: 1px solid #93CE37;
            border-right: 3px solid #9ED929;
            text-shadow: 1px 1px 1px #568F23;
            color: #666;
            background-color: #9DD929;
            border-radius: 5px 0px 0px 5px;
        }
        #table1 tbody td{
            padding: 10px;
            border: 2px solid #E7EFE0;
            text-align: center;
            text-shadow: 1px 1px 1px #fff;
            color: #666;
            background-color: #DEF3CA;
            border-radius: 2px;
        }
        #table1 tbody span.check::before{
            content: url(images/check0.png);
        }
        #table1 tfoot td{
            padding: 10px 0px;
            font-size: 32px;
            color: #9CD009;
            text-align: center;
            text-shadow: 1px 1px 1px #444;
        }
    </style>
</head>
<body>
<div id="content">
    <table id="table1">
        <thead>
            <tr>
                <th></th>
                <th scope="col" abbr="Starter">Smart Starter</th>
                <th scope="col" abbr="Medium">Smart Medium</th>
                <th scope="col" abbr="Business">Smart Business</th>
                <th scope="col" abbr="Deluxe">Smart Deluxe</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th scope="row">Price per month</th>
                <td>$ 2.90</td>
                <td>$ 5.90</td>
                <td>$ 9.90</td>
                <td>$ 14.90</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th scope="row">Storage Space</th>
                <td>512MB</td>
                <td>1 GB</td>
                <td>2 GB</td>
                <td>4 GB</td>
            </tr>
            <tr>
                <th scope="row">Bandwidth</th>
                <td>50 GB</td>
                <td>100 GB</td>
                <td>150 GB</td>
                <td>unlimited</td>
            </tr>
            <tr>
                <th scope="row">Mysql Databases</th>
                <td>unlimited</td>
                <td>unlimited</td>
                <td>unlimited</td>
                <td>unlimited</td>
            </tr>
            <tr>
                <th scope="row">Setup</th>
                <td>12.90 ___FCKpd___0lt;/td>
                <td>12.90 ___FCKpd___0lt;/td>
                <td>free</td>
                <td>free</td>
            </tr>
            <tr>
                <th scope="row">PHP 5</th>
                <td><span class="check"></span></td>
                <td><span class="check"></span></td>
                <td><span class="check"></span></td>
                <td><span class="check"></span></td>
            </tr>
            <tr>
                <th scope="row">Ruby on Rails</th>
                <td><span class="check"></span></td>
                <td><span class="check"></span></td>
                <td><span class="check"></span></td>
                <td><span class="check"></span></td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

好了,代码到此介绍,完美表格效果就制作出来了。

HTML / CSS 相关文章推荐
CSS3画一个阴阳八卦图
Mar 09 HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 #HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 #HTML / CSS
html5 视频播放解决方案
Nov 06 #HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 #HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 #HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 #HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 #HTML / CSS
You might like
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
php公用函数列表[正则]
2007/02/22 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
js数组的操作详解
2013/03/27 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
Python中实现三目运算的方法
2015/06/21 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
python添加菜单图文讲解
2019/06/04 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
python实现udp传输图片功能
2020/03/20 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
毕业生求职简历的自我评价
2013/10/07 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
管理失职检讨书
2014/02/12 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
学校运动会感想
2015/08/10 职场文书
九年级数学教学反思
2016/02/17 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL