HTML5制作表格样式-HTML5教程

本文由 文梅画史 于 2016-12-29 9:25 发布在  HTML5教程    

TX4HTML5中文学习网 - HTML5先行者学习网

废话不多说了,具体代码如下所示:TX4HTML5中文学习网 - 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>

好了,代码到此介绍,完美表格效果就制作出来了。TX4HTML5中文学习网 - HTML5先行者学习网

标签: HTML5教程

<<HTML5不支持frameset的两种解决方法-HTML5教程

纯HTML5+CSS3制作生日蛋糕(代码易懂)-HTML5教程>>

分享本文至:

发表评论:

热门内容
最新评论
网站管理  |  HTML5之家-国内最大的HTML5学习平台-HTML5教程-HTML5学习-HTML5资料  |  手机版  |  RSS  |  留言建议  |  关于本站  |  联系方式

All Rights Reserved. Powered by emlog Themes by 易玩稀有

在线客服系统
京ICP备15004106号-2
sitemap 网站地图