HTML表格标签

表格标签

<table>
    <tr>
        <td>单元格内的文字</td>
        ...
    </tr>
    ...
</table>

1. <table></table>用于定义表格的标签。
2. <tr></tr>用于定义表格中的行，必须嵌套在<table></table>标签中。
3. <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4. 字母td指表格数据（table data），即数据单元格内容，是普通单元格。

表头单元格标签 <th>

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。
<th>标签表示HTML表格表头部分（table head的缩写）

<table>
    <tr>
        <th>表头单元格文本</th>
        <td>单元格内的文字</td>
        ...
    </tr>
    ...
</table>

表格属性

属性名	属性值	描述
align	left、center、right	规定表格的对其方式
border	|或""	规定表格单元格是否有边框，默认为""，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的距离，默认1像素
cellspacing	像素值	规定单元格和单元格之间的距离，默认2像素
width	像素值或百分比	规定表格的宽度
height	像素值或百分比	规定单元格高度

注意：这些属性要写到表格标签table里面去，例如<table align="center" border="1"> 

 表格结构标签

如果表格太长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。

表格头部区域：<thead></thead>
表格主体区域：<tbody></tbody>

合并单元格

1. 跨行合并：rowspan="合并单元格的个数"
2. 跨列合并：colspan="合并单元格的个数"

目标单元格：

    1）跨行：最上侧单元格为目标单元格，写合并代码
    2）跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三部曲：

1. 先确定是跨行还是跨列合并；
2.  找到目标单元格，写上合并方式=合并单元格的数量。比如：<td colspan="2"></td>；
3.  删除多余的单元格。