table表格标签及相应CSS样式cellspacing是单元格与单元格之间的距离 cellpadding是单元格与内容

<table width = '20px' height = '20px' border = ‘1px’ cellspacing=‘0’ bgcolor = ‘#333’ cellpadding=”0“>
    <tr align = 'center'> //行
        <th></th> //表头，文字自动加粗并水平居中
        <td align='center' valign='middle' colspan='3' rowspan='2'></td> //列
    </tr>
</table>

cellspacing是单元格与单元格之间的距离
cellpadding是单元格与内容之间的距离
valign=‘top/bottom/middle’ 是垂直对齐方式
colspan 跨列合并（删除该行多余的列）
rowspan 跨行合并（删除该列多余的行）

表格的CSS属性

table属性
- border-spacing: 50px 单元格间距*（与cellspacing作用相同）*
- border-collapse: separate(边框分开)/collapse(边框合并，可让边框合并为1px)
  - 不能和border-spacing同时使用
empty-cells: show（默认值）/hidden 无内容单元格是否显示
- 空格不识别，识别
table-layout: auto/fixed
- auto 列的宽度由列单元格中没有折行的最宽内容决定
- fixed 宽度固定，不会随内容多少改变单元格的宽度**（浏览器加载更快）**
rules: groups/rows/cols/all/none
- groups 显示位于行组与列组之间的线条
- rows 显示行之间的线条
- cols 显示列之间的线条
- all 显示行和列之间的线条
- none 不显示线条

表格相关标签

<caption></caption> 表格标题（必须是<table>下第一个标签）
- caption-side: top/bottom 表格标题所在位置（相对表格的上下，火狐也支持left/right）
<colgroup></colgroup>列分组（必须是<table>或<caption>下第一个标签）
- 想分几组就写几个<colgroup>标签或<col>标签(从左到右依次对表格进行分组)
- span = '2'表示将两列设为一个分组
- color属性值表示该分组的分割线
- 若想看到每组的分割线，需要在table标签上设置属性rules = 'groups'
- n个<col>可以写成<colgroup span='n'></colgroup>
- 在没有span属性设置的前提下，第几个<colgroup>标签或<col>标签就代表第几列

例1：

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>name</th>
    <th>age</th>
    <th>sex</th>
	  <th>birthday</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>12</td>
    <td>男</td>
    <td>0123</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>34</td>
    <td>女</td>
    <td>0402</td>
</table>

效果图：

例2：

<table border="1">
  <colgroup span="2" width='100px'></colgroup>
  <colgroup width='200px'></colgroup>
  <tr>
    <th>name</th>
    <th>age</th>
    <th>sex</th>
    <th>birthday</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>12</td>
    <td>男</td>
    <td>0123</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>34</td>
    <td>女</td>
    <td>0402</td>
</table>

效果图：

行分组
- <thead></thead> 用于表格的表头内容（出现在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前）
- <tbody></tbody> 表格主题
- <tfooter></tfooter> 表尾

例：

<table border="1" width='500px'>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

效果图：