表格的那些事，单元格的合并

初识表格

table

表格常常用来做一些表格的批量数据数据，报表等，在某些时候能起到一定的作用。
先来看看简单的表格

    <table border="1" cellpadding="10" cellspacing="0">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>                                                      
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>20</td>
        </tr>
    </table>

其中，table标签是定义我们的表格。
它的属性有

• border：设置表格的边框
  
  可以看到它是默认“双边框”。
  此时，我们需要同用另外一个属性来合并这“双边框”：
• border-collapse属性

属性值	描述
stparate	默认值，边框会被分开，但是不会忽略border-spacing值
collapse	此时，边框会变成单一的边框，会忽略border-spacing值
inherit	规定继承父级里border-collapse 属性的值

当值设置为collapse时：

会让表格更清晰一些！

• cellpadding=“10”，表格中的这个属性指的是内容与边框之间的距离（可以理解为内容的内边距）
• cellspacing=“10”，这个则表示表格与表格之间的距离（可以理解为表格的外边距），但是由于合并单元格边框所以没效果。
  具体效果如下：
  

表格里的标签及属性

• 1，<caption>表格的大标题</caption>
• 2，

        <thead></thead>
        <tbody></tbody>
        <tfoot></tfoot>

这三个标签分别代表为：
表头：写标题等。
表格主体：写主体内容和数据等。
表尾：写注释信息等。
这三个标签可写可不写，写了会增加标签语义化，没写也没有关系。

• 3，tr、th、td
  tr：是表格的行。
  th：一般为表格顶部的小标题。
  td：为写内容的单元格。
  
  th默认加粗和居中。
  td里的内容是默认垂直居中，水平居左
  
  可以通过给其设置：text-align:center，水平居中。
  此外还可以设置td属性：valign，默认值为middle，如有需要可设置：top、middle、bottom、baseline。

当要设置td的外边距同时表框合并时
需要用到border-collapse:separate;搭配border-spacing:10px 10px;
第一个值为水平方向，第二个值为垂直方向的间距。
如图：

• 4，合并单元格
  rowspan：行合并。
  colspan：列合并。

    <table border="1" widtd="150" height="150">
        <tr>
            <td colspan="2">hello</td>
            <td colspan="2">hello</td>
          </tr>
          <tr>
            <td rowspan="2">hello</td>
            <td>hello</td>
            <td>hello</td>
            <td>hello</td>
          </tr>
          <tr>
            <td>hello</td>
            <td>hello</td>
            <td>hello</td>
          </tr>
    </table>

行数和列数都是以最长的为标准，比如格式为四列三行
第一行只有合并两列
第二行和第三行的第一列合并
具体如下：

你设置了要占几列你就写colspan，多出来的列数需删除掉。
比如第一行本来应该是四列的，但是设置两个colspan:“2”，所以还有两列就会被挤出去：

        <tr>
            <td colspan="2">hello</td>
            <td colspan="2">hello</td>
            <td>hello</td>
            <td>hello</td>
          </tr>

所以你得删掉，行合并也是如此！

好了，今天就到这了。加油鸭！