废话不多说了 , : :
<! Doctype html> <html> <head> <meta charset = utf-8> <itement> 表格 </itement> <style type = text/css> *{margin: 0; Padding: 0; } body {font: Italic 20px Georgia, serif; spasi surat: normal; Latar Belakang-Color: #F0F0F0; } #content {width: 750px; padding: 40px; margin: 0 otomatis; Latar Belakang-Color: #FFF; Border-Left: 30px Solid #1D81B6; Border-Right: 1px solid #ddd; Kotak-Shadow: 0px 0px 16px #AAA; } #table1 {font: bold 16px/1.4em trebuchet ms, sans-serif; } #table1 thead th {padding: 15px; Perbatasan: 1px solid #93ce37; Border-Bottom: 3px Solid #9ED929; Text-Shadow: 1px 1px 1px #568f23; Warna: #fff; Latar Belakang-Color: #9DD929; Border-Radius: 5px 5px 0px 0px; } #table1 thead th: emplem {background-color: transparent; Perbatasan: Tidak Ada; } #table1 tbody th {padding: 0px 10px; Perbatasan: 1px solid #93ce37; Border-Right: 3px Solid #9ED929; Text-Shadow: 1px 1px 1px #568f23; Warna: #666; Latar Belakang-Color: #9DD929; Border-Radius: 5px 0px 0px 5px; } #table1 tbody td {padding: 10px; Perbatasan: 2px Solid #E7EFE0; Teks-Align: tengah; Text-Shadow: 1px 1px 1px #FFF; Warna: #666; Latar Belakang-Color: #DEF3CA; Border-Radius: 2px; } #table1 tbody span.check :: sebelum {content: url (gambar/check0.png); } #table1 tfoot td {padding: 10px 0px; font-size: 32px; Warna: #9CD009; Teks-Align: tengah; Teks-Shadow: 1px 1px 1px #444; } </tyle> </head> <body> <Div ID = Content> <Table ID = Table1> <Thead> <tr> <t th> </th> <tH scope = col abbr = starter> starter pintar </ th> <tH scope = col abbr = medium> medium pintar </th> <tH scope = col abbr = bisnis> bisnis pintar </th> <tH scope = col abbr = deluxe> smart deluxe </th> </tr> > </thead> <tfoot> <tr> <th scope = row> harga per bulan </t th> <td> $ 2,90 </td> <td> $ 5,90 </td> <td> $ 9,90 </td > <td> $ 14,90 </td> </tr> </tfoot> <tbody> <tr> <tH scope = row> ruang penyimpanan </th> <td> 512mb </td> <td> 1 gb < /td> <td> 2 gb </td> <td> 4 gb </td> </tr> <tr> <tH scope = row> bandwidth </t> <td> 50 gb </td> <td > 100 gb </td> <td> 150 gb </td> <td> tidak terbatas </td> </tr> <tr> <tH scope = row> database mysql </t> <td> tidak terbatas </td > <td> tidak terbatas </td> <td> tidak terbatas </td> <td> tak terbatas </td> </tr> <tr> <tH scope = row> setup </t> <td> 12.90 ___ fckpd ___ 0lt;/ td> <td> 12.90 ___ fckpd ___ 0lt;/td> <td> gratis </td> <td> gratis </td> </tr> <tr> <tH scope = row> php 5 </t> <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> </spule td> </tr> </tbody> </able> </div> </body> </html>好了 , 代码到此介绍 , 完美表格效果就制作出来了。