废话不多说了， 具体代码如下所示：
<! doctype html> <html> <head> <meta charset = utf-8> <title> 表格 </title> <style type = text/css> *{margin: 0; Padding: 0; } Body {Font: italic 20px Georgia, serif; ระยะห่างของตัวอักษร: ปกติ; พื้นหลังสี: #f0f0f0; } #CONTENT {WIDTH: 750PX; Padding: 40px; มาร์จิ้น: 0 อัตโนมัติ; พื้นหลังสี: #FFF; ชายแดนซ้าย: 30px Solid #1D81B6; ชายแดนขวา: 1px Solid #DDD; Box-shadow: 0px 0px 16px #aaa; } #table1 {ตัวอักษร: ตัวหนา 16px/1.4em Trebuchet MS, Sans-Serif; } #table1 thead th {padding: 15px; ชายแดน: 1px Solid #93CE37; ขอบด้านล่าง: 3PX Solid #9ED929; Text-Shadow: 1PX 1PX 1PX #568F23; สี: #FFF; พื้นหลังสี: #9DD929; แนวชายแดน: 5px 5px 0px 0px; } #table1 thead th: ว่าง {พื้นหลังสี: โปร่งใส; ชายแดน: ไม่มี; } #table1 tbody th {padding: 0px 10px; ชายแดน: 1px Solid #93CE37; ชายแดนขวา: 3PX Solid #9ED929; Text-Shadow: 1PX 1PX 1PX #568F23; สี: #666; พื้นหลังสี: #9DD929; แนวชายแดน: 5px 0px 0px 5px; } #table1 tbody td {padding: 10px; ชายแดน: 2px Solid #e7efe0; TEXT-ALIGN: CENTER; Text-Shadow: 1px 1px 1px #FFF; สี: #666; พื้นหลังสี: #def3ca; แนวชายแดน: 2px; } #table1 tbody span.check :: ก่อน {เนื้อหา: url (images/check0.png); } #table1 tfoot td {padding: 10px 0px; ขนาดตัวอักษร: 32px; สี: #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> starter อัจฉริยะ </ th> <th scope = col abbr = medium> smart medium </th> <th scope = col abbr = ธุรกิจ> ธุรกิจอัจฉริยะ </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> ไม่ จำกัด </td> </tr> <tr> <th scope = row> ฐานข้อมูล mysql </th> <td> ไม่ จำกัด </td > <td> ไม่ จำกัด </td> <td> ไม่ จำกัด </td> <td> ไม่ จำกัด </td> </tr> <tr> <th scope = row> การตั้งค่า </th> <td> 12.90 ___ fckpd ___ 0lt;/th> td> <td> 12.90 ___ fckpd ___ 0lt;/td> <td> ฟรี </td> <td> ฟรี </td> </tr> <tr> <th scope = row> php 5 </th> <td> <td> span class = ตรวจสอบ> </span> </td> <td> <span class = ตรวจสอบ> </span> </td> <td> <span class = ตรวจสอบ> </span> </td> <td> <span class = ตรวจสอบ> </span> </td> </tr> <tr> <th scope = row> ruby on Rails </th> <td> <span class = ตรวจสอบ> </span> </td > <td> <span class = ตรวจสอบ> </span> </td> <td> <span class = ตรวจสอบ> </span> </td> <td> <span class = ตรวจสอบ> </span> <//</ td> </tr> </tbody> </table> </div> </body> </html>好了， 代码到此介绍， 完美表格效果就制作出来了。