废话不多说了 具体代码如下所示.
<! DOCTYPE HTML> <html> <HEAD> <meta charset = utf-8> <title> 表格 </title> <style type = text/css> *{margin: 0; relleno: 0; } cuerpo {fuente: cursiva 20px georgia, serif; espaciado de letras: normal; Color de fondo: #F0F0F0; } #content {ancho: 750px; relleno: 40px; margen: 0 auto; Color de fondo: #fff; Border-izquierda: 30px Solid #1D81B6; Border-Right: 1px Solid #DDD; shadow de caja: 0px 0px 16px #AAA; } #table1 {Font: Bold 16px/1.4em Trebuchet MS, sans-serif; } #tabla1 thead th {relleno: 15px; borde: 1px Solid #93CE37; Border-Bottom: 3px Solid #9ED929; Shadow de texto: 1PX 1PX 1PX #568F23; Color: #fff; Color de fondo: #9DD929; border-radio: 5px 5px 0px 0px; } #tabla1 thead th: vacía {color de fondo: transparente; borde: ninguno; } #table1 tbody th {relleno: 0px 10px; borde: 1px Solid #93CE37; Border-Right: 3px Solid #9ED929; Shadow de texto: 1PX 1PX 1PX #568F23; Color: #666; Color de fondo: #9DD929; border-radio: 5px 0px 0px 5px; } #table1 tbody td {padding: 10px; borde: 2px sólido #e7efe0; Text-Align: Center; Shadow de texto: 1px 1px 1px #fff; Color: #666; Color de fondo: #DEF3CA; Border-Radius: 2px; } #table1 tbody span.eck :: antes {contenido: url (imágenes/check0.png); } #table1 tfoot td {relleno: 10px 0px; tamaño de fuente: 32px; Color: #9CD009; Text-Align: Center; Shadow de texto: 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> inteligente luxe </th> <TR > </thead> <tfoot> <tr> <th scope = fila> precio por mes </th> <td> $ 2.90 </td> <td> $ 5.90 </td> <td> $ 9.90 </td > <td> $ 14.90 </td> </tr> </tfoot> <tbody> <tr> <th scope = fila> espacio de almacenamiento </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 = fila> bases de datos mysql </th> <td> ilimitada </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> libre </td> <td> libre </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 en rieles </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>好了 ， 代码到此介绍 完美表格效果就制作出来了。 完美表格效果就制作出来了。