废话不多说了 , : :
<! Doctype html> <html> <head> <meta charset = utf-8> <title> 表格 </title> <style type = text/css> *{margin: 0; Заполнение: 0; } body {font: italic 20px Georgia, Serif; СКАЖИ САМЕТ: НОРМАЛЬНО; фоновый цвет: #f0f0f0; } #content {width: 750px; Заполнение: 40px; Поле: 0 Авто; фоновый цвет: #fff; РЕШЕНЬ-ЛЕРДА: 30px SOLID #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 SOLID #93CE37; Пограничный подъем: 3PX SOLID #9ED929; Текстовая тень: 1px 1px 1px #568f23; Цвет: #fff; фоновый цвет: #9dd929; граница-радий: 5px 5px 0px 0px; } #table1 thead th: empty {foangy-color: прозрачный; граница: нет; } #table1 tbody th {padding: 0px 10px; Граница: 1PX SOLID #93CE37; граница правая: 3PX Solid #9ED929; Текстовая тень: 1px 1px 1px #568f23; Цвет: #666; фоновый цвет: #9dd929; граница-радий: 5px 0px 0px 5px; } #table1 tbody td {padding: 10px; Граница: 2px solid #e7efe0; Текст-альбом: Центр; Текстовая тень: 1px 1px 1px #fff; Цвет: #666; фоновый цвет: #def3ca; граница радий: 2PX; } #table1 tbody span.check :: перед {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> 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 > </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 ГБ < /td> <td> 2 Gb </td> <td> 4 Gb </td> </tr> <tr> <th Scope = row> Bandwidth </th> <Td> 50 ГБ </td> <td > 100 ГБ </td> <td> 150 ГБ </td> <td> Unlimited </td> </tr> <tr> <th Scope = row> базы данных MySQL </th> <td> Unlimited </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> free </td> <td> свободный </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 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>好了 , 代码到此介绍 完美表格效果就制作出来了。