HTML5表格介绍以及基本应用

最新推荐文章于 2024-09-26 20:38:32 发布

昨夜秋风拂

最新推荐文章于 2024-09-26 20:38:32 发布

阅读量2.5k

点赞数 1

分类专栏： HTML 文章标签： html css 前端 html5

本文链接：https://blog.csdn.net/L20220927Y/article/details/127540676

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、表格的基本语法

1. <table></table> 表格标签，成对出现

2. <th></th>表头标签，用来表示写表格标题的

3. <tr></tr>行标签，表示一行

4.<td></td>单元格标签，表示一个单元格

5.代码演示

<table>
    <th>111111</th><th>11111</th>
    <tr>
        <td>233</td>
        <td>321</td>
    </tr>
    
    <tr>
        <td>342</td>
        <td>532</td>
    </tr>
</table>

二、表格的跨行跨列

1.colspan:所跨的列数

2.rowspan：所跨的行数

3.代码演示

 <style>
        table{
            border: 1px solid;
        }
        th,tr,td{
            border: 1px solid;
        }
    </style>
</head>

<body>
<table>
    <th rowspan="2">111111</th><th>11111</th>
    <tr>
        <td>233</td>
    </tr>
    
    <tr>
        <td>342</td>
        <td>532</td>
    </tr>
    <tr>
        <td colspan="2">342</td>
       
    </tr>

三、表格边框的单线设置

border-collapse: collapse;

可以把表格的双线边框变成单线边框

四、实践

<!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>
        table {
            border-collapse: collapse;
            width: 600px;
            height: 300px;
            text-align: center;
            font-weight: 600;
        }

        tr,
        td {
            border: 1px solid;
        }

        td {
            width: 80px;
            height: 30px;
        }
    </style>
</head>

<body>
    <table id="biaoge">
        <h2>武隆区中小微企业贷款贴息项目申请表</h2>
        <p>申报企业名称（盖章）：</p>
        <tr>
            <td >统一社会信用代码</td>
            <td colspan="2"></td>
            <td>企业所在地</td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td>法人代表</td>
            <td></td>
            <td>联系方式</td>
            <td></td>
            <td>上年度营业收入（万元）</td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2"> 上年度实交税金(万元)</td>

            <td></td>
            <td colspan="2">企业缴纳社保人数(人)</td>

            <td></td>
        </tr>
        <tr>
            <td>贷款所用项目名称</td>
            <td colspan="2"></td>

            <td>申请贴息金额（万元）</td>
            <td colspan="2"></td>

        </tr>
        <tr>
            <td rowspan="3">贷款银行名称</td>
            <td></td>
            <td rowspan="3">贷款金额</td>
            <td></td>
            <td rowspan="3">已支付利息</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td rowspan="2">银行开户许可证信息</td>
            <td colspan="2">账户名称</td>
            <td> 开户行</td>
            <td colspan="2">账号</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="3">是否列入国家信用系统严重失信企业名单和重大税收违法案件信息公布名单</td>
        </tr>
    </table>
</body>

</html>