废话不多说了 废话不多说了, 具体代码如下所示 :
<! doctype html> <html> <head> <메타 charset = utf-8> <title> </title> <스타일 유형 = text/css> *{margin : 0; 패딩 : 0; } Body {font : Itatic 20px Georgia, Serif; 문자 스페이스 : 정상; 배경색 : #f0f0f0; } #content {너비 : 750px; 패딩 : 40px; 여백 : 0 Auto; 배경색 : #fff; 왼쪽 경계 : 30px 솔리드 #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 고체 #9ED929; Text-Shadow : 1px 1px 1px #568f23; 색상 : #fff; 배경색 : #9DD929; Border-Radius : 5px 5px 0px 0px; } #table1 THEAD TH : 빈 {배경색 : 투명; 국경 : 없음; } #table1 tbody th {패딩 : 0px 10px; 테두리 : 1px Solid #93CE37; 경계 오른쪽 : 3px Solid #9ED929; Text-Shadow : 1px 1px 1px #568f23; 색상 : #666; 배경색 : #9DD929; Border-Radius : 5px 0px 0px 5px; } #table1 tbody td {패딩 : 10px; 테두리 : 2px 고체 #e7efe0; 텍스트 정렬 : 센터; Text-Shadow : 1px 1px 1px #fff; 색상 : #666; 배경색 : #def3ca; Border-Radius : 2px; } #table1 tbody span.check :: 이전 {content : url (images/check0.png); } #table1 tfoot td {패딩 : 10px 0px; 글꼴 크기 : 32px; 색상 : #9CD009; 텍스트 정렬 : 센터; Text-Shadow : 1px 1px 1px #444; . Th> <th scope = col abbr = medium> smart medium </th> <th scope = col abbr = business> smart business </th> <th scope = col abbr = 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;/ td> <td> 12.90 ___ fckpd ___ 0lt;/td> <td> free </td> <td> free </td> </tr> <tt> <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>好了 好了, 代码到此介绍, 完美表格效果就制作出来了。