## 表格 ### 表格簡介 HTML中的表格可以大致分為三個部分： * thead ---------表格的頁眉 * tbody ---------表格的主體 * tfoot ---------定義表格的頁腳  > thead, tbody, tfoot 相當于三間房子，每間房子都可以用來放東西。 > `<tr> </tr>` 這個標簽就是放在三間房子里面的東西，每一個`<tr> </tr>`就是表格一行。 > 表格的每一行被分為一個個單元格。  我們簡單嘗試寫一個表格： ```html <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> ``` ### `<colgroup>`的使用 * `<colgroup>`標簽用于對表格中的列進行組合，以便對其進行格式化。 * `<col>` 標簽規定了 `<colgroup>` 元素內部的每一列的列屬性。 ```html <table border="2" cellpadding="20" cellspacing="1"> <colgroup> <col span="4" style="background-color: pink;"> </colgroup> <tr> <th>職位名</th> <th>工作地點</th> <th>職位等級</th> <th>薪酬</th> </tr> <tr> <td>咖啡師</td> <td>紐約</td> <td>L3</td> <td>6000$</td> </tr> <tr> <td>咖啡師助理</td> <td>倫敦</td> <td>L2</td> <td>5000$</td> </tr> <tr> <td>大中華區副總裁</td> <td>北京</td> <td>L8</td> <td>面議</td> </tr> <tr> <td>全球副總裁</td> <td>佛羅倫薩</td> <td>L9</td> <td>面議</td> </tr> </table> ``` ### 合并單元格和表格的間距 * colspan屬性：合并列 * rowspan屬性：合并行 > 以上兩個屬性均作用在單元格上，并且屬性值的數字代表算上單元格本身，一共合并的單元格個數。 ```html <table border="1"> <tr> <td rowspan="2">第一行第一列</td> <td colspan="2" >第一行第二列</td> </tr> <tr> <td>第二行第二列</td> <td>第二行第三列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> <td>第三行第三列</td> </tr> </table> ``` * cellpadding屬性：單元格邊框與內容的間距。 * cellspacing屬性：單元格之間的間距。 ```html <table border="1" cellpadding="20" cellspacing="30"> <tr> <td rowspan="2">第一行第一列</td> <td colspan="2" >第一行第二列</td> </tr> <tr> <td>第二行第二列</td> <td>第二行第三列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> <td>第三行第三列</td> </tr> </table> ```