首页 前端知识 HTML5表格介绍以及基本应用

HTML5表格介绍以及基本应用

2024-06-02 09:06:53 前端知识 前端哥 771 951 我要收藏

一、表格的基本语法

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>

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10478.html
标签
评论
发布的文章

无涯教程-HTML5 - 表单标签

2024-06-08 00:06:06

HTML5基础2

2024-06-07 23:06:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!