table表格標籤的屬性
table標籤目前前端主流推薦HTML、CSS、JS三者分離，實際使用table標籤的CSS樣式程式碼還是採用table的style的屬性和值來進行外觀樣式控制。
習慣樣式：
1 table { 2 display: table; 3 border-collapse: separate; 4 border-spacing: 2px; 5 border-color: gray; 6 }
table的style重要屬性：
border-spacing：規定表格單元格與單元格、外邊框的間距;
table-layout：規定表格的佈局演算法;
border-collapse：設定表格的邊框是否被合併為一個單一的邊框;
empty-cells：在 collapsed-borders模型中，該屬性無效; 在 separated-borders模型中，當該屬性值為hide時，空的表格單元將沒有邊框和背景。
table表格程式設計練習
小夥伴，編寫程式碼設定表格相應屬性，按照效果圖，實現相應效果。
效果圖：
任務
1、設定第一列的北京顏色為orange，表格邊框寬度為1，單元格(不包括插入的小表格內單元格)內間距為5px;
2、將表格第一列的第二行和第三行合併;
3、將表格第一列的第五行和第六行合併;
4、在最後合併的單元格的內巢狀一個兩行兩列的表格;
5、巢狀表格邊框為1px;
6、將整個第四行合併;
參考程式碼：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title>表格屬性</title> 6 <meta charset="utf-8"> 7 <style> 8 table { 9 border: 1px solid gray; 10 } 11 12 table.main{ 13 14 width: 500px; 15 border-spacing: 0; 16 margin: 0 auto; 17 text-align: center; 18 } 19 20 .main>tbody>tr>th, 21 .main>tbody>tr>td { 22 padding: 5px; 23 } 24 25 td, 26 th { 27 border: 1px solid gray; 28 } 29 30 .one { 31 background: orange; 32 33 } 34 35 table table { 36 border-spacing: 0; 37 margin: 0 auto; 38 } 39 </style> 40 </head> 41 42 <body> 43 44 <table class='main'> 45 <caption>課程表</caption> 46 <tr class='one'> 47 <th>星期一</th> 48 <th>星期二</th> 49 <th>星期三</th> 50 <th>星期四</th> 51 <th>星期五</th> 52 </tr> 53 <tr> 54 <td rowspan="2">語文</td> 55 <td>數學</td> 56 <td>化學</td> 57 <td>英語</td> 58 <td>生物</td> 59 </tr> 60 <tr> 61 <td>數學</td> 62 <td>化學</td> 63 <td>英語</td> 64 <td>生物</td> 65 </tr> 66 <tr> 67 <td colspan="5">課間活動</td> 68 </tr> 69 <tr> 70 <td rowspan="2"> 71 <table> 72 <tr> 73 <td>前半節</td> 74 <td>後半節</td> 75 </tr> 76 <tr> 77 <td>詩詞</td> 78 <td>古文</td> 79 </tr> 80 </table> 81 </td> 82 <td>數學</td> 83 <td>化學</td> 84 <td>英語</td> 85 <td>生物</td> 86 </tr> 87 <tr> 88 <td>數學</td> 89 <td>化學</td> 90 <td>英語</td> 91 <td>生物</td> 92 </tr> 93 </table> 94 </body> 95 96 </html>
當然，一些“前輩”程式碼可能還採用table標籤的一些屬性來進行樣式控制，對於需要維護特定“祖傳程式碼”的工程師來說，還是有必要了解一些此類“考古”前端知識。
譬如上述table效果也可以採用table的“遠古”屬性來實現同樣的效果：
1 <!DOCTYPEhtml> 2 <html> 3 4 <head> 5 <title>表格屬性</title> 6 7 <metacharset="utf-8"> 8 <style> 9 </style> 10 </head> 11 12 <body> 13 <tableborder="1"width="500"cellspacing="0"cellpadding="5px"align="center"> 14 <caption>課程表</caption> 15 <trbgcolor="orange"align="center"> 16 <th>星期一</th> 17 <th>星期二</th> 18 <th>星期三</th> 19 <th>星期四</th> 20 <th>星期五</th> 21 </tr> 22 <tralign="center"> 23 <tdrowspan="2">語文</td> 24 <td>數學</td> 25 <td>化學</td> 26 <td>英語</td> 27 <td>生物</td> 28 </tr> 29 <tralign="center"> 30 <td>數學</td> 31 <td>化學</td> 32 <td>英語</td> 33 <td>生物</td> 34 </tr> 35 <tralign="center"> 36 <tdcolspan="5">課間活動</td> 37 </tr> 38 <tralign="center"> 39 <tdrowspan="2"> 40 <tableborder="1"cellspacing="0"> 41 <tr> 42 <td>前半節</td> 43 <td>後半節</td> 44 </tr> 45 <tralign='center'> 46 <td>詩詞</td> 47 <td>古文</td> 48 </tr> 49 </table> 50 </td> 51 <td>數學</td> 52 <td>化學</td> 53 <td>英語</td> 54 <td>生物</td> 55 </tr> 56 <tralign="center"> 57 <td>數學</td> 58 <td>化學</td> 59 <td>英語</td> 60 <td>生物</td> 61 </tr> 62 </table> 63 </body> 64 65 </html>
標籤用於定義HTML中的表格，其主要屬性以及功能如下：
width:設定表格長度;
align：表格相對於周圍元素的對齊方式;
bgcolor:設定表格的背景顏色;
border:設定表格的外邊框寬度;
frame：設定表格外邊框哪部分是可見的;
cellspacing：設定表格單元與表格單元、外邊框的間距;
cellpadding：設定表格單元內容與表格單元邊框的間距;
rules：設定表格單元邊框哪部分是可見的。
cellpadding屬性與style中的padding屬性類似，但是它只能設定一個值，即上下左右的內間距都相同;cellspacing與border-spacing屬性類似，同樣cellspacing只能設定一個值，但是border-spacing可以設定1或2個值。