HTML-Demo：工商银行电子汇款单

最新推荐文章于 2024-03-12 14:55:33 发布

CaptainDrake

最新推荐文章于 2024-03-12 14:55:33 发布

阅读量844

点赞数 1

分类专栏： # Demos 文章标签： html 前端

本文链接：https://blog.csdn.net/CaptainDrake/article/details/127951494

版权

Demos 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML-Demo：工商银行电子汇款单

Date: November 20, 2022

Demo简介：

简要说明一下这个demo

用HTML完成以下表格

Untitled

知识点简介：

简要介绍其中一些知识点

表格属性

cellspacing 与 cellpadding

功能：

cellpadding和cellspacing属性控制表格边框的间距

效果：

Untitled

具体：

cellspacing属性设置表格边框之间和表格单元格之间的间距（以像素为单位）；

cellpadding属性设置单元格中的信息四周的间距（也是以像素为单位）。

注意：

如果将cellpadding属性设置为0，将使表格中的所有信息尽量接近表格边框，甚至接触到边框。

案例：

<table border="1" cellspacing="0" cellpadding="0" width="600px">

具体案例参考：

https://www.w3school.com.cn/tiy/t.asp?f=eg_html_table_cellspacing

https://www.w3school.com.cn/tiy/t.asp?f=eg_html_table_cellpadding

整体代码：

<!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>
</head>
<body>
    <h3>工商银行电子汇款单</h3>
    <table border="1" cellspacing="0" cellpadding="0" width="800px">
        <tr>
            <td colspan="2"><strong>回单类型</strong></td>
            <td style="width: 300px;">网上转账汇款</td>
            <td colspan="2"><strong>指令序号</strong></td>
            <td style="width: 300px;">HQH00000000000000013878172</td>
        </tr>
        <tr>
            <!-- style采用text-align让字体居中 -->
            <td rowspan="4" style="width: 20px; text-align: center;"><strong>收款人</strong></td>
            <td>户名</td>
            <td>老牟</td>
            <td rowspan="4" style="width: 20px; text-align: center;" ><strong>付款人</strong></td>
            <td>户名</td>
            <td>老刘</td>
        </tr>
        <tr>
            <td><strong>卡号</strong></td>
            <td>000000000001</td>
            <td><strong>卡号</strong></td>
            <td>000000000002</td>
        </tr>
        <tr>
            <td>地区</td>
            <td>南京</td>
            <td>地区</td>
            <td>杭州</td>
        </tr>
        <tr>
            <td><strong>网点</strong></td>
            <td>江苏南京</td>
            <td><strong>网点</strong></td>
            <td>江苏徐州业务中心</td>
        </tr>
        <tr>
            <td colspan="2"><strong>币种</strong></td>
            <td>人民币</td>
            <td colspan="2"><strong>钞汇标志</strong></td>
            <td>钞票</td>
        </tr>
        <tr>
            <td colspan="2"><strong>金额</strong></td>
            <td>1.00元</td>
            <td colspan="2"><strong>手续费</strong></td>
            <td>0.01元</td>
        </tr>
        <tr>
            <td colspan="2"><strong>合计</strong></td>
            <td colspan="4">人民币（大写）： 壹元整</td>
        </tr>
        <tr>
            <td colspan="2"><strong>交易时间</strong></td>
            <td><i>2020年12月31日</i></td>
            <td colspan="2"><strong>时间戳</strong></td>
            <td><i>2020-12-31-00：00</i></td>
        </tr>
    </table>    
    <p>票据打印时间：2017-06-01&nbsp;&nbsp;00：01：00</p>
    <p><del>票据打印单位:江苏徐州业务中心</del></p>
    <p>操作员：大曾</p>
</body>
</html>

一些思考：

问题1：

如何保持左右表格中td的间距同步？

换句话说，就是如何自动让B格宽度增长的同时，让A格宽度同步增长？

Untitled

解决方案1：

设置表格中格子拥有固定宽度

原本代码：

<tr>
    <td colspan="2"><strong>回单类型</strong></td>
    <td style="width: 300px;">网上转账汇款</td>
    <td colspan="2"><strong>指令序号</strong></td>
    <td style="width: 300px;">HQH00000000000000013878172</td>
</tr>

修改后代码：

<tr>
    <td colspan="2"><strong>回单类型</strong></td>
    <td style="width: 300px;">网上转账汇款</td>
    <td colspan="2"><strong>指令序号</strong></td>
    <td style="width: 300px;">HQH00000000000000013878172</td>
</tr>

问题：

若格子中数据过长仍会导致同样问题，唯有设置B格中传入数据长度在一定范围内。