标签：
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
table { border: 1px solid #ccc; border-collapse: collapse; //用collspae来取消cellpacing 而且使两线合一 } td,th { border: 1px solid #ccc; padding: 50px; //用padding来扩大单元格 text-align: center; } td { text-align: center; //实现td中的文字居中 }
一个经典表格代码
1 <html> 2 <head> 3 <title>财政报表</title> 4 <style type="text/css"> 5 <!-- 6 .datalist{ 7 border:1px solid #429fff; /* 表格边框 */ 8 font-family:Arial; 9 border-collapse:collapse; /* 边框重叠 */ 10 } 11 .datalist tr:hover{ 12 background-color:#c4e4ff; /* 动态变色,IE6下无效！*/ 13 } 14 .datalist caption{ 15 padding-top:3px; 16 padding-bottom:2px; 17 font:bold 1.1em; 18 background-color:#f0f7ff; 19 border:1px solid #429fff; /* 表格标题边框 */ 20 } 21 .datalist th{ 22 border:1px solid #429fff; /* 行、列名称边框 */ 23 background-color:#d2e8ff; 24 font-weight:bold; 25 padding-top:4px; padding-bottom:4px; 26 padding-left:10px; padding-right:10px; 27 text-align:center; 28 } 29 .datalist td{ 30 border:1px solid #429fff; /* 单元格边框 */ 31 text-align:right; 32 padding:4px; 33 } 34 --> 35 </style> 36 </head> 37 <body> 38 <table class="datalist" summary="财政报表"> 39 <caption>财政报表 2005 - 2008</caption> 40 <thead> 41 <tr> 42 <th> </th> 43 <th scope="col">2005</th> 44 <th scope="col">2006</th> 45 <th scope="col">2007</th> 46 <th scope="col">2008</th> 47 </tr> 48 </thead> 49 <tbody> 50 <tr> 51 <th scope="row">拨款</th> 52 <td>11,980</td> 53 <td>12,650</td> 54 <td>9,700</td> 55 <td>10,600</td> 56 </tr> 57 <tr> 58 <th scope="row">捐款</th> 59 <td>4,780</td> 60 <td>4,989</td> 61 <td>6,700</td> 62 <td>6,590</td> 63 </tr> 64 <tr> 65 <th scope="row">投资</th> 66 <td>8,000</td> 67 <td>8,100</td> 68 <td>8,760</td> 69 <td>8,490</td> 70 </tr> 71 <tr> 72 <th scope="row">募捐</th> 73 <td>3,200</td> 74 <td>3,120</td> 75 <td>3,700</td> 76 <td>4,210</td> 77 </tr> 78 </tbody> 79 <tfoot> 80 <tr> 81 <td colspan="5">2008 年统计</td> 82 </tr> 83 </tfoot> 84 </table> 85 </body> 86 </html>
标签：
原文地址：http://www.cnblogs.com/loveyunk/p/5881338.html
