： ： ： ：
<! doctype html> <html> <head> <meta charset = utf-8> <title> 表格 </itlem> <type type = text/css> *{margin: 0 ؛ الحشو: 0 ؛ } body {font: italic 20px georgia ، serif ؛ تباعد الرسائل: طبيعي ؛ لون الخلفية: #f0f0f0 ؛ } #content {width: 750px ؛ الحشو: 40 بكسل ؛ الهامش: 0 Auto ؛ خلفية اللون: #fff ؛ الحدود اليسرى: 30 بكسل Solid #1d81b6 ؛ اليمين الحدودي: 1 بكسل Solid #DDD ؛ box-shadow: 0px 0px 16px #AAA ؛ } #table1 {font: Bold 16px/1.4em trebuchet ms ، sans-serif ؛ } #table1 thead th {padding: 15px ؛ الحدود: 1 بكسل Solid #93CE37 ؛ Border-Bottom: 3px Solid #9ed929 ؛ النص الشادو: 1px 1px 1px #568f23 ؛ اللون: #fff ؛ خلفية اللون: #9dd929 ؛ الحدود الحدودية: 5px 5px 0px 0px ؛ } #table1 thead th: فارغة {background-color: شفاف ؛ الحدود: لا شيء ؛ } #table1 tbody th {padding: 0px 10px ؛ الحدود: 1 بكسل Solid #93CE37 ؛ اليمين الحدودي: 3px Solid #9ed929 ؛ النص الشادو: 1px 1px 1px #568f23 ؛ اللون: #666 ؛ خلفية اللون: #9dd929 ؛ الحدود الحدودية: 5px 0px 0px 5px ؛ } #table1 tbody td {padding: 10px ؛ الحدود: 2px الصلبة #e7efe0 ؛ محاذاة النص: المركز ؛ النص الشادو: 1px 1px 1px #fff ؛ اللون: #666 ؛ خلفية اللون: #def3ca ؛ الحدود الراديوس: 2px ؛ } #table1 tbody span.check :: قبل {content: url (الصور/check0.png) ؛ } #table1 tfoot td {padding: 10px 0px ؛ حجم الخط: 32 بكسل ؛ اللون: #9CD009 ؛ محاذاة النص: المركز ؛ النص الشادو: 1px 1px 1px #444 ؛ } </style> </head> <body> <div id = content> <table id = table1> <thead> <tr> <th> </h> <th scope = col abbr = starter> smart starter </ th> <th scope = col abbr = medium> smart medium </h> <th scope = col abbr = business> Smart Business </th> <th scop > </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> عرض نطاق النطاق > 100 جيجا بايت </td> <td> 150 جيجابايت </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 ؛ td> <td> 12.90 ___ fckpd ___ 0lt ؛/td> <td> مجانًا </td> <td> مجاني </td> </tr> <tr> <th scope = row> php 5 </h> <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 = 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> </r> </tbody> </table> </viv> </body> </html>好了 ， 代码到此介绍 ， 完美表格效果就制作出来了。