HTML学习：表格分区

最新推荐文章于 2023-04-25 17:59:00 发布

RoxyL

最新推荐文章于 2023-04-25 17:59:00 发布

阅读量962

点赞数 2

分类专栏： html基础文章标签： html

本文链接：https://blog.csdn.net/qq_45799504/article/details/115018478

版权

html基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML学习：表格分区

文章目录

HTML学习：表格分区
- 表格分区

表格分区

一个完整的表格主要包含三个部分：表格标题、表格表头、表格的主题
一个table内部实际还有三个分区标签组成

caption：定义表格的主题
thead：定义表格的头部，内部嵌套tr>th
tbody：定义表格主题，内部嵌套tr>td

具体实现以下案列：
表格分区案列

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td{
            width: 120px;
        }
    </style>
</head>
<body>
    <table border="1" style="border-collapse:collapse ;">
        <!-- 主题分区 -->
        <caption>各地区资产投资情况</caption>

        <!-- 表头分区 -->
        <thead>
            <!-- 分析第1行有3格(表头 所以用tr>th) -->
            <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>
</body>

</html>

RoxyL

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML学习：表格分区

HTML学习：表格分区文章目录HTML学习：表格分区表格分区表格分区一个完整的表格主要包含三个部分：表格标题、表格表头、表格的主题一个table内部实际还有三个分区标签组成caption：定义表格的主题thead：定义表格的头部，内部嵌套tr>thtbody：定义表格主题，内部嵌套tr>td<table border="1">  <caption>各地区资产投资情况</caption&
复制链接

扫一扫

专栏目录