效果
代碼
<html> <head> <title>Calendar</title> <style> <!-- .month { border-collapse: collapse; table-layout:fixed; width:780; } .month caption { text-align: left; font-family: normal 120% 宋體, arial; font-size:12px; font-weight:normal; padding-bottom: 6px; } .month caption .date{ font-size:150%; font-weight:bold; } .month th { border: 1px solid #999; border-bottom: none; padding: 3px 2px 2px; margin:0; background-color: #ADD; color: #333; font: 80% 宋體; } .month td { border: 1px solid #AAA; font: 12px 宋體; line-height:16px; padding: 2px 2px; margin:0; vertical-align: top; } .month td.previous, .month td.next { background-color: #eee; color: #A6A6A6; } .month td.active { background-color: #B1CBE1; border: 2px solid #4682B4; } .month ul { list-style-type: none; margin: 3px; padding:0; } .month li { color:#fff; background:transparent url(level-2.gif) no-repeat; padding:2px; margin-bottom: 6px; height:34px; overflow:hidden; width:100px; } .month td li.important{ background:transparent url(level-1.gif) no-repeat; } --> </style> </head> <body> <table class="month" summary="Calendar for 2007.10"> <caption><span class="date">2007年10月 </span></caption> <tr> <th scope="col"><span>星期</span>一</th> <th scope="col"><span>星期</span>二</th> <th scope="col"><span>星期</span>三</th> <th scope="col"><span>星期</span>四</th> <th scope="col"><span>星期</span>五</th> <th scope="col"><span>星期</span>六</th> <th scope="col"><span>星期</span>日</th> </tr> <tr> <td class="previous">31</td> <td>1</td> <td class="active">2 <ul> <li class="important">完成書稿第2部分</li> <li>查Javascript相關資料相關資料</li> </ul> </td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td class="active">7 <ul> <li>檢查案例實施進度</li> </ul> </td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td class="active">13 <ul> <li class="important">CSS禪意花園案例分析</li> <li>給Dave回復郵件</li> </ul> </td> </tr> <tr> <td>14</td> <td>15</td> <td>16</td> <td class="active">17 <ul> <li>artech.cn網站改版策划</li> </ul> </td> <td class="active">18 <ul> <li>錄制CSS視頻教程</li> <li>其他視頻教程策划</li> </ul> </td> <td>19</td> <td>20</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td class="active">26 <ul> <li>中關村圖書大廈調研</li> </ul> </td> <td class="active">27 <ul> <li>西單圖書大廈調研</li> <li>北京圖書大廈調研</li> </ul> </td> </tr> <tr> <td>28</td> <td>29</td> <td >30 </td> <td class="active">31 <ul> <li class="important">准備出差資料</li> <li>整理硬盤文件資料</li> </ul> </td> <td class="next">1</td> <td class="next">2</td> <td class="next">3</td> </tr> </table> </body> </html>
說明：
巧妙的布局
巧妙的樣式
scope定義和用法
scope 屬性定義將表頭單元與數據單元相關聯的方法。
scope 屬性標識某個單元是否是列、行、列組或行組的表頭。
scope 屬性不會在普通瀏覽器中產生任何視覺變化。
屏幕閱讀器可以利用該屬性。
詳細解釋
使用 scope 屬性，可以將數據單元格與表頭單元格聯系起來。
通過屬性值 row，表頭行包括的所有表格都將和表頭單元格聯系起來。指定 col，會將當前列的所有單元格和表頭單元格綁定起來。