废话不多说了 , 具体代码如下所示 :
<! DocType html> <html> <kopf> <meta charset = utf-8> <title> 表格 </title> <style type = text/csS> *{Margin: 0; Polsterung: 0; } body {font: italic 20px Georgia, Serif; Buchstabenabteilung: normal; Hintergrundfarbe: #f0f0f0; } #Content {width: 750px; Polsterung: 40px; Rand: 0 Auto; Hintergrundfarbe: #fff; Border-Links: 30px Solid #1D81B6; Grenzrechte: 1PX Solid #ddd; Box-Shadow: 0PX 0PX 16PX #AAA; } #Tabelle1 {Schrift: BOLD 16PX/1.4EM Trebuchet MS, sans-serif; } #Tabelle1 th {padding: 15px; Grenze: 1PX Solid #93ce37; Grenzboden: 3px Festkörper #9ed929; Text-Shadow: 1PX 1PX 1PX #568F23; Farbe: #fff; Hintergrundfarbe: #9dd929; Border-Radius: 5px 5px 0px 0px; } #Tabelle1 Thead th: leer {Hintergrundfarbe: transparent; Grenze: Keine; } #Tabelle1 tbody the {padding: 0px 10px; Grenze: 1PX Solid #93ce37; Grenzrechte: 3px Solid #9ed929; Text-Shadow: 1PX 1PX 1PX #568F23; Farbe: #666; Hintergrundfarbe: #9dd929; Border-Radius: 5px 0px 0px 5px; } #Tabelle1 Tbody TD {Padding: 10px; Grenze: 2PX Solid #e7efe0; Text-Align: Mitte; Text-Shadow: 1px 1px 1px #fff; Farbe: #666; Hintergrundfarbe: #def3ca; Border-Radius: 2PX; } #Tabelle1 tbody span.check :: vor {Inhalt: URL (Bilder/check0.png); } #Tabelle1 tfoot td {padding: 10px 0px; Schriftgröße: 32px; Farbe: #9CD009; Text-Align: Mitte; Text-Shadow: 1PX 1PX 1PX #444; } </style> </head> <body> <div id = content> <table id = Tabelle1> <thead> <tr> <Th> </th> <th Scope = col abbr = Starter> Smart Starter </ th> <th scope = col abbr = medium> intelligentes 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> Preis pro Monat </th> <td> $ 2,90 </td> <td> 5,90 $ </td> <td> $ 9.90 </td > <td> $ 14.90 </td> </tr> </tfoot> <tbody> <tr> <Th Scope = row> Speicherplatz </th> <td> 512MB </td> <td> 1 GB < /td> <td> 2 gb </td> <td> 4 gb </td> </tr> <tr> <Th Scope = Row> Bandbreite </th> <td> 50 gb </td> <td > 100 gb </td> <td> 150 GB </td> <td> Unbegrenzt </td> </tr> <tr> <Th Scope = row> Mysql -Datenbanken </th> <td> Unbegrenzt </td </td </td </td </td </td > <td> Unbegrenzt </td> <td> Unbegrenzt </td> <td> unbegrenzt </td> </tr> <tr> <Th Scope = row> setup </th> <td> 12.90 ___ fckpd ___ 0LT;///// td> <td> 12.90 ___ fckpd ___ 0lt;/td> <td> kostenlos </td> <td> kostenlos </td> </tr> <tr> <Th Scope = row> php 5 </th> <td> <Td> <Td> <tr> <Th Scope = row> php 5 </th> <td> <Td> <Td> <tr> <TH. span class = check> </span> </td> <td> <span class = check> </span> </td> <td> <span class = prüche> </span> </td> <td> <span class = check> </span> </td> </tr> <tr> <Th Scope = Row> Ruby on Rails </th> <td> <span class = prüft> </span> </td > <td> <span class = prüft> </span> </td> <td> <span class = prüft> </span> </td> <td> <span class = prüft> </span> </ td> </tr> </tbody> </table> </div> </body> </html>好了 , 代码到此介绍 , 完美表格效果就制作出来了。 完美表格效果就制作出来了。