【无标题】

html中表格练习

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>工商银行电子汇款单</h1>
    <!-- 使用h标签，来做标题 -->
    <table cellspacing="0" border="1">
    <!-- table（表格）标签 使用属性cellspacing调节边距 border添加边框 -->
        <tr>
            <td colspan="2"><b>回单类型</b></td>
            <!-- 利用属性colspan合并两列 ，并用b标签加粗字体 -->
            <td>网上转账汇款</td>
            <td colspan="2">指令序号</td>
            <td>HEHAO2363490983</td>
        </tr>
        <tr>
            <td rowspan="4" width="4px"><b>收款人</b></td>
            <!-- 使用属性rowspan合并4行，width调节单元格宽度 -->
            <td>户名</td>
            <td width="500px">彭于晏</td>
            <td rowspan="4" width="4px"><b>付款人</b></td>
            <td>户名</td>
            <td width="500px">马云</td>
        </tr>
        <tr>
            <td><b>卡号</b></td>
            <td>000000000000</td>
            <td><b>卡号</b></td>
            <td>111111111111</td>
        </tr>
         <tr>
            <td>地址</td>
            <td>广西</td>
            <td>地址</td>
            <td>杭州</td>
        </tr>
         <tr>
            <td>网点</td>
            <td>广西工商银行总局</td>
            <td>网点</td>
            <td>杭州工商银行总局</td>
        </tr> <tr>
            <td colspan="2"><b>币种</b></td>
            <td>人民币</td>
            <td colspan="2"><b>钞汇标志</b></td>
            <td>钞票</td>
        </tr>
        <tr>
            <td colspan="2"><b>金额</b></td>
            <td>0.10</td>
            <td colspan="2"><b>手续费</b></td>
            <td>0.20</td>
        </tr>
        <tr>
            <td colspan="2"><b>合计</b></td>
            <td colspan="4">人民币（大写）：一毛钱</td>
        </tr>
        <tr>
            <td colspan="2"><b>交易时间</b></td>
            <td>2026.1.13 23：26</td>
            <td colspan="2"><b>时间戳</b></td>
            <td>XXXXXXXXXXX</td>
        </tr>
    </table>
    <p>票据打印时间: xxxx xx xx xx:xx</p>
    <!-- p标签是段落标签 -->
    <p><del>票据打印单位: 广西工商银行总局</del></p>
    <!-- del标签可以添加删除线 -->
    <p>操作员:马化腾</p>
</body>
</html>

运行结果