table表格

一、表格里的标签

1.table标签：用来定义表格。表格的所有内容需要写在 <table> 和 </table> 之间。

注意：默认情况下，表格是没有边框的。但是我们可以使用 <table> 标签中的 border 属性来设置表格的边框宽度，单位是像素（px）。

2.caption标签：为表格设置标题，标题用来描述表格的内容。

3.tr标签：是 table row 的简称，表示表格的行。表格中有多少个 <tr> 标签就表示有多少行数据。

4.td标签：是 table datacell 的简称，表示表格的单元格，这才是真正存放表格数据的标签。单元格的数据可以是文本、图片、列表、段落、表单、水平线、表格等多种形式。

5.th标签：是 table heading 的简称，表示表格的表头。<th> 其实是 <td> 单元格的一种变体，本质上还是一种单元格。<th> 一般位于第一行，充当每一列的标题。大多数的浏览器会把表头显示为粗体居中的文本。

二、合并单元格的属性及用法

1.rowspan：表示跨行合并。在 HTML 代码中，允许我们使用 rowspan 特性来表明单元格所要跨越的行数。

2.colspan：表示跨列合并。同样的，在 HTML 中，允许我们使用 colspan 特性来表明单元格所要跨越的列数。

注意：

（1）跨行和跨列属性是对td和th两个单元格使用的，对tr行标签无效。

（2）rowspan 属性表示向下合并单元格，colspan 属性表示向右合并单元格。 

（3）每次合并 n 个单元格都要少写 n-1 个<td>标签（需要删除相应行内单元格，否则就会出现bug）。

三、cellspacing和cellpadding

1.cellspacing属性是各单元格之间的空隙。此属性的参数值是数字，表示单元格间隙所占的像素点数。

2.cellpadding属性是文字与边框的距离。此属性的参数值是数字，表示单元格间隙所占的像素点数。

注意：cellspacing、cellpadding是table的属性!

       <p>例1：</p>
        <table border="1" cellspacing="20" cellpadding="30">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>升高</th>
            </tr>
            <tr>
                <td>盖伦</td>
                <td>23</td>
                <td>185</td>
            </tr>
            <tr>
                <td>卡特玲娜</td>
                <td>24</td>
                <td>168</td>
            </tr>
            <tr>
                <td>嘉文四世</td>
                <td>22</td>
                <td>184</td>
            </tr>
            <!-- 
                1.th单元格的内容会居中并加粗
                2. cellspacing="20"代表各单元格之间的空隙为20px
                3.cellpadding="30"是文字与边框的距离为30px
            -->
        </table>

        <p>例2：</p>
        <table border="1" cellspacing="20" cellpadding="30">
            <tr>
                <th rowspan="2">1.1</th>
                <th>1.2</th>
                <th>1.3</th>
            </tr>
            <tr>
                <td>2.2</td>
                <td>2.3</td>
            </tr>
            <tr>
                <td colspan="3">3.1</td>
            </tr>
            <!-- 这是原本是一个3*3的表格 并用n.n来表示某行某列来记录原本单元格的位置
                为了满足某需要，将1.1和1.2单元格跨行合并，则需要在1.1单元格添加rowspan="2"属性，并删除1.2单元格（否则会出现bug），2代表2个单元格合并
                又，为了满足某需要，将3.1、3.2和3.3单元格跨列合并，则需要在3.1单元格添加colspan="3"属性，并删除3.2和3.3单元格（否则会出现bug）3代表3个单元格合并
                技巧：1.要实现某n个单元格跨行，则需要在最上面的单元格添加rowspan="n"属性，并删除n-1个单元格（删除要合并的单元格，且除最上面的一个外的）
                1.要实现某n个单元格跨列，则需要在最左边的单元格添加colspan="n"属性，并删除n-1个单元格（删除要合并的单元格，且除最左边一个外的）
            -->
        </table>