表格标签

1.表格标签

​ 用于显示、展示数据，可以让数据显示更有规律、有条理、可读性

1-1表格基本语法

如写一个两行三列的表格

<table>
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td> xx </td>
        <td> xx </td>
        <td> xx </td>
    </tr>
</table>

1. table 用于定义表格的标签

2. tr 代表行，必须在table标签中

3. td 代表列， 必须在tr标签中

4. 字母td指表格数据（ table data）即数据 单元格的内容

   

1-2表头单元格标签

⼀般表头单元格位于表格的第⼀⾏或第⼀列，表头单元格⾥的⽂本内容是加粗居中显示

< th > （ table head ）标签表示HTML表头单元格

<table>
    <tr>
        <th>姓名</th>
        ...
    </tr>
    ...
</table>

如将下方表格用代码表示

<table>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>电话</th>
    </tr>
    <tr>
        <td>小王</td>
        <td>女</td>
        <td>134xxxxxxx</td>
    </tr>
    <tr>
        <td>小明</td>
        <td>男</td>
        <td>134xxxxxxx</td>
    </tr>
</table>

1-3表格属性

表格标签这部分属性实际开发不常⽤，后⾯通过 css 来设置

这些属性要写到表格标签table⾥⾯去 如： < table align=“ center ” >

1-4表格结构标签

使⽤场景：为了更好的表示表格的语义将表格分为表格头部和表格主体两⼤部分

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

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>电话</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小王</td>
            <td>女</td>
            <td>134xxxxxx</td>
        </tr>
    </tbody>
</table>

1-5合并单元格

• 合并单元格⽅式

①跨⾏合并：rowspan =“ 合并单元格的个数 ”

②跨列合并：colspan =“ 合并单元格的个数 ”

• ⽬标单元格：（写合并代码）

①跨⾏：最上侧单元格为⽬标单元格，写合并代码

②跨列：最左侧单元格为⽬标单元格，写合并代码

• 合并单元格三步曲：

①先确定是跨⾏还是跨列

②找到⽬标单元格，写上合并⽅式如：< td colspan=“2” ><／td >

③删除多余的单元格

如图合并红色区域单元格

<table>
    <tr>
        <td></td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    ...
</table>

如图合并绿色区域单元格

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

总结：