web前端-设计表格

完成代码如下:

<!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><br>

<table width="700" border="" cellpadding="1" cellspacing="1">

<tr>

<td colspan="2" ><strong>回单类型</strong></td>

<td colspan="4">网上转账汇款</td>

<td colspan="2"><strong>指令序号</strong></td>

<td colspan="4">HQH00000000000000000013878172</td>

</tr>

<tr>

<td rowspan="4"><strong>付 <br>款<br>人</strong></td>

<td>户名</td>

<td colspan="4">老牟</td>

<td rowspan="4"><strong>付<br>款<br>人</strong></td>

<td>户名</td>

<td colspan="4">老刘</td>

</tr>

<tr>

<td><strong>卡号</strong></td>

<td colspan="4">000000000001</td>

<td><b>卡号</b></td>

<td colspan="4">000000000002</td>

</tr>

<tr>

<td>地区</td>

<td colspan="4">南京</td>

<td>地区</td>

<td colspan="4">杭州</td>

</tr>

<tr>

<td><b>网点</b></td>

<td colspan="4">工商江苏南京业务处理中心</td>

<td><b>网点</b></td>

<td colspan="4">江苏徐州业务中心</td>

</tr>

<tr>

<td colspan="2"><b>币种</b></td>

<td colspan="4">人民币</td>

<td colspan="2"><b>钞汇标志</b></td>

<td colspan="4">钞票</td>

</tr>

<tr>

<td colspan="2"><b>金额</b></td>

<td colspan="4">1.00元</td>

<td colspan="2"><b>手续费</b></td>

<td colspan="4">0.57元</td>

</tr>

<tr>

<td colspan="2"><b>合计</b></td>

<td colspan="10">人民币(大写):壹元整</td>

</tr>

<tr>

<td colspan="2"><b>交易时间</b></td>

<td colspan="4">2017年6月1日</td>

<td colspan="2"><b>时间戳</b></td>

<td colspan="4">2017-06-01-13.00.00. 00000</td>

</tr>

</table>

<p>票据打印时间:2017-06-01 15:00:12</p>

<del>票价打印单位:江苏徐州业务中心</del>

<p>操作员:大曾</p>

</body>

</html>

效果图如下图:

首先我们设计标题直接使用 h1 标签

再构建一个表格框架,

这里我根据原图要求设计了列有12小列

然后根据作业要求来使用 clospan 来进行分配

然后对于"付款人"这一列我给他使用

<td rowspan="4"><strong>付 <br>款<br>人</strong></td>

进行合并了4行,在对其进行换行适应其格式

在图片中我们还能看见有加粗地方,我分别使用 b标签 或是 strong 标签 来进行加粗

再有 del 标签 来表示删除行

以上就是我代码的一些标注。

相关推荐
灵感__idea15 分钟前
Hello 算法:贪心的世界
前端·javascript·算法
GreenTea2 小时前
一文搞懂Harness Engineering与Meta-Harness
前端·人工智能·后端
killerbasd3 小时前
牧苏苏传 我不装了 4/7
前端·javascript·vue.js
吴声子夜歌3 小时前
ES6——二进制数组详解
前端·ecmascript·es6
码事漫谈4 小时前
手把手带你部署本地模型,让你Token自由(小白专属)
前端·后端
ZC跨境爬虫4 小时前
【爬虫实战对比】Requests vs Scrapy 笔趣阁小说爬虫,从单线程到高效并发的全方位升级
前端·爬虫·scrapy·html
爱上好庆祝4 小时前
svg图片
前端·css·学习·html·css3
王夏奇4 小时前
python中的__all__ 具体用法
java·前端·python
大家的林语冰5 小时前
《前端周刊》尤大开源 Vite+ 全家桶,前端工业革命启动;尤大爆料 Void 云服务新产品,Vite 进军全栈开发;ECMA 源码映射规范......
前端·javascript·vue.js
jiayong235 小时前
第 8 课:开始引入组合式函数
前端·javascript·学习