<!DOCTYPE html> <html> <head> <title>日歷</title> <meta charset="utf-8"> <style type="text/css"> table{ margin:0; padding: 0; border-collapse: collapse; color: #333; } table td,table th{ margin:0; padding:0.3em; } table caption{ font-weight: bold; font-size: 1.25em; padding-top: 0.2em; padding-bottom: 0.2em; background-color: #d4dde6; } table caption[rel="prev"]{ float: left; margin-left: 0.2em; } table caption[rel="next"]{ float: right; margin-right: 0.2em; } table caption a:link,table caption a:visited{ text-decoration: none; color: #333; padding: 0 0.2em; } table caption a:hover,table caption a:active,table caption a:focus{ background-color: #6d8ab7; } table thead th{ background-color: #d4dde6; border-bottom: 1px solid #a9bacd; font-size: 0.873em; } table tbody{ background-color: #d0d9e2; text-shadow: 1px 1px 1px white; color: #a4a4a4; } table tbody td{ background-color:#a7afb2; color: #000; border-top: 1px solid #e0e0e1; border-right: 1px solid #9f9fa1; border-bottom: 1px solid #acacad; border-left: 1px solid #dfdfe0; text-align: center; } table tbody td:hover,table tbody td.selected{ background-color: #464b4d; } .no-effect{ background-color: #d4dde6; text-shadow: 1px 1px 1px white; color: #a4a4a4; } </style> </head> <body> <table cellspacing="0"> <caption><a href="#" rel="prev"><</a>January 2008<a href="#" rel="next">></a></caption> <thead> <tr> <th scope="col">Sun</th> <th scope="col">Mon</th> <th scope="col">Tue</th> <th scope="col">Wed</th> <th scope="col">Tur</th> <th scope="col">Fri</th> <th scope="col">Sat</th> </tr> </thead> <tbody> <tr> <td class="no-effect">30</td> <td class="no-effect">31</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> </tr> <tr> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> </tr> <tr> <td>20</td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> </tr> <tr> <td>27</td> <td>28</td> <td>29</td> <td>30</td> <td>31</td> <td class="no-effect">1</td> <td class="no-effect">2</td> </tr> </tbody> </table> </body> </html>
1.caption用於添加表格標題，summary屬性用於描述表格的內容，和img標簽的alt作用類似
2.用thead，tbody，tfoot可以把表格划分為幾個邏輯部分，一個表格中只能使用一個thead和tfoot元素，但是可以使用多個tbody元素將復雜的表格划分
3.scope屬性，定義將表頭單元與數據單元相關聯的方法（http://www.w3school.com.cn/tags/att_td_scope.asp）
4.col和colgroup標簽用於管理列（col：http://www.w3school.com.cn/tags/tag_col.asp，colgroup：http://www.w3school.com.cn/tags/tag_colgroup.asp）
5.css規范中有兩個表格邊盒模型：單獨的和疊加的。在單獨模型中，各個單元格周圍都有邊框，在疊加模型中，單元格共享邊框。用屬性border-collapse（http://www.w3school.com.cn/cssref/pr_tab_border-collapse.asp）