表格的语法使用

表格主要是用于显示、展示数据的。

表格的基本语法：

  <table>   <!-- 定义表格的标签 -->
        <tr> 
            <td>单元格内的内容</td>
            ...
        </tr> 
        ...
    </table>

1.tr 标签 是用于定义表格的行,必须嵌套在table标签中
2.td 标签 是用于定义表格中的单元格， 必须嵌套在 tr 标签中

表头单元格标签 th

一般位于表格的第一行或者第一列，有加粗、居中显示效果。

    <table>
        <tr>
            <th>表头单元格的内容</th>
            <td>单元格内的内容</td>
            ...
        </tr>
        ...
    </table>

表格结构标签 thead、tbody

thead 标签 表格的头部区域、tbody 标签 表格的主体区域，使得表格结构更加清晰。

<table>
    <thead><tr></tr></thead>    <!-- 表头 -->
    <tbody>
        <tr><td></td><td></td><td></td></tr>    <!-- 主体第一行 -->
        <tr><td></td><td></td><td></td></tr>    <!-- 主体第二行 -->
        <tr><td></td><td></td><td></td></tr>    <!-- 主体第三行 -->
    </tbody>
</table>

（1）table 标签属性

属性	描述
border	设置表格的边框（默认border="0"为无边框〉
cellspacing	设置单元格与单元格边框之间的空白间距
cellpadding	设置单元格内容与单元格边框之间的空白间距
width	设置表格的宽度
height	设置表格的宽度
align	设置表格在网页中的水平对齐方式
bgcolor	设置表格的背景颜色
background	设置表格的背景图像

（2）tr 标签属性

属性	描述
height	设置行高度
align	设置一行内容的水平对齐方式
valign	设置一行内容的垂直对齐方式
bgcolor	设置行的背景颜色
background	设置行的背景图像

（3）td 标签属性

属性	描述
width	设置单元格的宽度
height	设置单元格的高度
align	设置单元格内容的水平对齐方式
valign	设置单元格内容的垂直对齐方式
bgcolor	设置单元格的背景颜色
background	设置单元格的背景图像
colspan	设置单元格横跨的列数（用于合并水平方向的单元格)
rowspan	设置单元格紧跨的行数（用于合并紧直方向的单元格)

（4）单元格的合并

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
合并三步骤：
① 先确定是跨行还是跨列合并；
② 找到目标单元格，写上合并方式 = 合并单元格的数量；
③ 删除目标单元格后/下边需要合并的多余的单元格