## 表格 ### 表格简介 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> ```