废话不多说了,具体代码如下所示::
<!doctype html> <html> <head> <meta charset = utf-8> <title> </title> </title> </title> <style type = text/css> * *{margin:0;填充:0; } Body {Font:斜体20px Georgia,Serif;字母间隔:正常;背景色:#f0f0f0; } #content {width:750px;填充:40px;保证金:0自动;背景色:#FFF;边界左:30px实心#1D81B6;边框权利:1px实心#DDD;盒子阴影:0px 0px 16px #aaa; }#table1 {font:bold 16px/1.4em trebuchet MS,sans-serif; }#table1 thead th {填充:15px;边界:1PX实心#93CE37;边界底:3PX固体#9ED929;文字阴影:1PX 1PX 1PX#568F23;颜色:#fff;背景色:#9DD929;边界 - 拉迪乌斯:5px 5px 0px 0px; }#table1 thead th:空{背景色:透明;边界:无; }#table1 tbody th {padding:0px 10px;边界:1PX实心#93CE37;边境权利:3PX实心#9ED929;文字阴影:1PX 1PX 1PX#568F23;颜色:#666;背景色:#9DD929;边界 - 拉迪乌斯:5px 0px 0px 5px; }#table1 tbody td {填充:10px;边界:2PX固体#e7efe0;文字平衡:中心;文本阴影:1px 1px 1px #fff;颜色:#666;背景色:#def3ca;边界拉迪乌斯:2px; }#table1 tbody span.check :: {content:url(images/check0.png); }#table1 tfoot td {填充:10px 0px;字体大小:32px;颜色:#9CD009;文字平衡:中心;文字阴影:1PX 1PX 1PX#444; } </style> </head> <body> <div id = content> <table id = table1> <thead> <tr> <tr> <th> </th> <th scope = col abbr = abbr = starter> smart启动器</ th> <th scope = col abbr =中>智能中等</th> <th scope = col abbr = business>智能企业</th> <th scope = col abbr = deluxe> smart deluxe </th> </th> </tr > </thead> <tfoot> <tr> <th scope = row>每月价格</th> <td> $ 2.90 </td> <td> $ 5.90 </td> <td> <td> $ 9.90 </td > <td> $ 14.90 </td> </tr> </tfoot> <tbody> <try> <tr> <th scope = row>存储空间</th> <td> 512MB </td> <td> <td> 1 GB < /td> <td> 2 gb </td> <td> 4 GB </td> </tr> <tr> <tr> <th scope = row> bandWidth </th> <td> 50 GB </td> <td> <td> <td > 100 GB </td> <td> 150 GB </td> <td>无限</td> </td> </tr> <tr> <tr> <th scope = row> mysql databases </th> <td> unlimited </td > <td>无限</td> <td> unlimited </td> <td>无限</td> </td> </tr> <tr> <tr> <th scope = row> setup </th> <td> 12.90 ______________________________________________________________________________________________________________________________ 0LT;// td> <td> 12.90 ___ fckpd ___ 0lt;/td> <td> free </td> <td> free </td> </td> </tr> <tr> <tr> <th scope = row> row> php 5 </th> <tp> <td> <td> <td> < SPAN class = check> </span> </td> <td> <span class = check> </span> </td> <td> <td> <span class = check> </span> </span> </td> <td> <td> <span class = check> </span> </td> </tr> <tr> <th scope = row> rails on rails </th> <td> <td> <span class = check> </span> </span> </span> </td > <td> <span class = check> </span> </td> <td> <td> <span class = check> </span> </td> <td> <td> <td> <span class = check> </span> </span> </span> </ TD> </tr> </tbody> </table> </div> </body> </html>好了,代码到此介绍,完美表格效果就制作出来了。,完美表格效果就制作出来了。