废话不多说了 ， 具体代码如下所示:
<! Doctype html> <html> <head> <meta charset = utf-8> <title> 表格 </title> <style type = text/css> *{margem: 0; preenchimento: 0; } corpo {font: itálico 20px Georgia, serif; Espactação de letras: Normal; Background-Color: #f0f0f0; } #content {width: 750px; preenchimento: 40px; margem: 0 automático; Background-Color: #FFF; Border-Ift: 30px Solid #1D81B6; Fronteira: 1px Solid #DDD; Box-Shadow: 0px 0px 16px #AAA; } #Tabela1 {Fonte: Bold 16px/1.4em Trebuchet MS, sem serrif; } #Tabela1 THEAD TH {Padding: 15px; fronteira: 1px Solid #93CE37; fundo de borda: 3px Solid #9Ed929; Shadow de texto: 1px 1px 1px #568F23; Cor: #FFF; Background-Color: #9DD929; Radio de fronteira: 5px 5px 0px 0px; } #tabela1 thead th: vazio {background-color: transparent; fronteira: nenhuma; } #tabela1 tbody th {preenchimento: 0px 10px; fronteira: 1px Solid #93CE37; Right-Right: 3px Solid #9Ed929; Shadow de texto: 1px 1px 1px #568F23; Cor: #666; Background-Color: #9DD929; Radio de fronteira: 5px 0px 0px 5px; } #tabela1 tbody td {preenchimento: 10px; Fronteira: 2px sólido #e7efe0; Alinhamento de texto: centro; Shadow de texto: 1px 1px 1px #fff; Cor: #666; Background-Color: #DEF3CA; Radio de fronteira: 2px; } #tabela1 tbody span.check :: antes {content: url (imagens/check0.png); } #tabela1 tfoot td {preenchimento: 10px 0px; Size da fonte: 32px; Cor: #9CD009; Alinhamento de texto: centro; Shadow de texto: 1px 1px 1px #444; } </style> </ad Head> <body> <div id = content> <tabela id = tabela1> <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 > </sead> <tfoot> <tr> <th scope = linha> Preço por mês </th> <td> $ 2,90 </td> <td> $ 5,90 </td> <td> $ 9,90 </td > <td> $ 14.90 </td> </tr> </tfoot> <tbody> <tr> <th Scope = Row> Espaço de armazenamento </th> <td> 512mb </td> <td> 1 gb < /td> <td> 2 gb </td> <td> 4 gb </td> </tr> <tr> <th scope = linha> > 100 gb </td> <td> 150 gb </td> <td> ilimitado </td> </tr> <tr> <th scope = row> bancos de dados mysql </th> <td> ilimitados </td > <td> ilimitado </td> <td> ilimitado </td> <td> ilimitado </td> </tr> <tr> <th scope = Row> configuração </th> <td> 12.90 ___ fckpd ___ 0lt; td> <td> 12.90 ___ fckpd ___ 0lt;/td> <td> grátis </td> <td> grátis </td> </tr> <tr> <th scope = linha> php 5 </td> <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 = line> ruby nos trilhos </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>好了 ， 代码到此介绍 ， 完美表格效果就制作出来了。