6-表格标签

表格标签

1、表格基础

表格主要有三个标签组成

table英文：table，作用是定义了一个表格的结构

tr英文是table rows作用定义了表格的行

td英文是table dock作用是定义表格的单元格

关系：table>tr>td

案例：三行四列表格

<table border="1" style="border-collapse:collapse">
    <tr>
        <td>第1行，第1列</td>
        <td>第1行，第2列</td>
        <td>第1行，第3列</td>
        <td>第1行，第4列</td>
    </tr>
    <tr>
        <td>第2行，第1列</td>
        <td>第2行，第2列</td>
        <td>第2行，第3列</td>
        <td>第2行，第4列</td>
    </tr>
    <tr>
        <td>第3行，第1列</td>
        <td>第3行，第2列</td>
        <td>第3行，第3列</td>
        <td>第3行，第4列</td>
    </tr>
</table>

table标签上有两个属性，一个是border=“1”，这个属性是用来设置表格的边框的，如果没有这个属性，边框不显示，第二个属性style="border-collapse:collapse"是css样式，作用就是合并表格

如果表格需要设置表头，可以使用tr>th设置

<tr>
     <th>第1列</th>
     <th>第2列</th>
     <th>第3列</th>
     <th>第5列</th>
</tr>

2、单元格合并

一部分单元格需要进行跨行跨列合并，可以给对应的td和th标签设置相关属性

rowspan: 上下跨行合并

colspan：左右跨列合并

属性值是数字，数字是几就代表跨几行或者跨几列

案例：

步骤：

1. 确定一行有多少td

2. 然后我们再看一共有几行

3. 观察哪个单元格有合并，设置对应属性

案例：

<table border="1" style="border-collapse: collapse;">
    <tr>
        <td colspan="2">1</td>
        <td rowspan="2">2</td>
        <td colspan="3">3</td>
        <td>4</td>
    </tr>
    <tr>
        <td rowspan="2">5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td  rowspan="2">9</td>
        <td>10</td>
    </tr>
    <tr>
        <td rowspan="2">11</td>
        <td>12</td>
        <td colspan="2">13</td>
        <td rowspan="2">14</td>
    </tr>
    <tr>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td colspan="2">18</td>
    </tr>
</table>

3、表格分区

一个完整的表格主要包含三个部分：表格标题、表格表头、表格的主题

一个table内部实际还有三个分区标签组成

caption： 定义表格的主题

thead： 定义表格的头部，内部嵌套tr>th

tbody： 定义表格主题，内部嵌套tr>td

![6-4](d:\桌面\网络安全\html\img\6-4.jpg)<table border="1">
    <!-- 主题分区 -->
    <caption>各地区资产投资情况</caption>
    <!-- 表头分区 -->
    <thead>
        <tr>
            <th rowspan="2">地区</th>
            <th colspan="2">按总量分</th>
            <th colspan="2">按比重分</th>
        </tr>
        <tr>
            <th>自年初累计（亿元）</th>
            <th>去年同期增长（%）</th>
            <th>自年初累计（%）</th>
            <th>自年同期（%）</th>
        </tr>
    </thead>
    <!-- 主体分区 -->
    <tbody>
        <tr>
            <td>全国</td>
            <td>234234</td>
            <td>9.8</td>
            <td>100.0</td>
            <td>100.0</td>
        </tr>
        <tr>
            <td>全国</td>
            <td>234234</td>
            <td>9.8</td>
            <td>100.0</td>
            <td>100.0</td>
        </tr>
        <tr>
            <td>全国</td>
            <td>234234</td>
            <td>9.8</td>
            <td>100.0</td>
            <td>100.0</td>
        </tr>
        <tr>
            <td>全国</td>
            <td>234234</td>
            <td>9.8</td>
            <td>100.0</td>
            <td>100.0</td>
        </tr>
        <tr>
            <td>全国</td>
            <td>234234</td>
            <td>9.8</td>
            <td>100.0</td>
            <td>100.0</td>
        </tr>
    </tbody>
</table>