废话不多说了、具体代码如下所示:
<!doctype html> <html> <head> <head> charset = utf-8> <title> </title> <style type = text/css> *{margin:0;パディング:0; } body {font:Italic 20px Georgia、serif;文字間隔:正常;バックグラウンドカラー:#f0f0f0; } #content {width:750px;パディング:40px;マージン:0 Auto;バックグラウンドカラー:#fff;国境左:30pxソリッド#1D81B6;国境右:1PX SOLID #DDD; Box-Shadow:0px 0px 16px #aaa; }#table1 {font:bold 16px/1.4em trebuchet ms、sans-serif; }#table1 thead th {padding:15px;国境:1pxソリッド#93ce37;国境圏:3px Solid#9ed929; Text-Shadow:1PX 1PX 1PX#568F23;色:#fff;バックグラウンドカラー:#9DD929; Border-Radius:5px 5px 0px 0px; }#table1 thead th:empty {background-color:透過;国境:なし; }#table1 tbody th {padding:0px 10px; border: 1px solid #93CE37;国境右:3px Solid#9ed929; Text-Shadow:1PX 1PX 1PX#568F23;色:#666;バックグラウンドカラー:#9DD929; Border-Radius:5px 0px 0px 5px; }#table1 tbody td {padding:10px;境界線:2px solid#e7efe0;テキストアライグ:センター;テキストシャドウ:1px 1px 1px #fff;色:#666;バックグラウンドカラー:#def3ca;ボーダーラジウス:2px; }#table1 tbody span.check :: before {content:url(images/check0.png); }#table1 tfoot td {padding:10px 0px;フォントサイズ:32px;色:#9CD009;テキストアライグ:センター;テキストシャドウ:1px 1px 1px#444; } </style> </head> <body> <div id = content> <table id = table1> <thead> <tr> <th> </th> <th scope = col abbr = 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>月額価格</th> <td> $ 2.90 </td> <td> $ 5.90 </td> <td> $ 9.90 </td > <td> $ 14.90 </td> </tr> </tfoot> <tbody> <tr> <th scope = row>ストレージスペース</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> linmiTed </td> </tr> <tr> <th scope = row> mysqlデータベース</th> <td> linmited </td > <td> linmited </td> <td> linmited </td> <td>無制限</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> <ths 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>好了、代码到此介绍、完美表格效果就制作出来了。