一分钟学会写网页表格

第一步：

类似于制作一个这样的收据，我们需要做的第一步就是分析结构：

左上角的字体分析一下就知道是一个h2标签, 中间的表格中，纵横交错的，分析一下就知道使用了合并，水平合并和垂直合并都有。

那我们就得考虑到表格的单元格该定义为多少。我是把表格分为9行8列，th是表头第一行，tr是列，td是行，表格整体,border设置边框大小为1，边距cellpadding为0，部分代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><table widht="1000px" border="1" cellpadding="0"><tr><th></th><th>回单类型</th><th></th><th>网上转账汇款</th><th></th><th>指令序列</th><th></th><th>213254135454</th></tr><tr><td>22</td><td>22</td><td>22</td><td>22</td><td>22</td><td>22</td><td>22</td><td>22</td></tr></table>
</body>
</html>

第二部：

当框架搭建出来，就可以考虑设置其他单元格的格式，第一行的水平合并用rowspan 属性和第二行垂直合并用colspan属性部分代码如下

 <table border="1" width="1000px"  cellspacing="0"><tr  align="center"><th colspan="2" width="178px">回单类型</th><th colspan="2">网上转账汇款</th><th colspan="2" width="178px">指定序列</th><th colspan="2">213254135454</th></tr><tr><td rowspan="4" class="shuli" >收款人</td><td width="140px">户名</td><td colspan="2">张三</td><td rowspan="4" class="shuli">付款人</td><td>户名</td><td colspan="2">老刘</td></tr>

收款人和付款人的字体是竖着的，我采用的是用内联样式做的用了类选择器.shuli{ } 通过设置margin:0 auto；和line-height：24px; 和width:32px;来实现字体的竖着有一个弊端就是如果宽度设置太大字体依旧还是横着显示的，竖着是因为字体的空间不够被挤下去的，算是最难的点，以后有新的方法我再优化代码如下：

<style type="text/css">
.shuli{ margin:0 auto;/* margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right
因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）*/width:32px;line-height:24px; /*属性设置行间的距离（行高）*/border:1px solid #333; /*设置边框粗细为2px、样式为实心的、颜色为黑色的边框*/font-weight:700;   /*字体的加粗*/
}
.cc{font-weight:700;   /*字体的加粗*/
}
</style>
</head>
<body>
<h2>工商银行电子汇款单</h2><table border="1" width="1000px"  cellspacing="0"><tr  align="center"><th colspan="2" width="178px">回单类型</th><th colspan="2">网上转账汇款</th><th colspan="2" width="178px">指定序列</th><th colspan="2">213254135454</th></tr><tr><td rowspan="4" class="shuli" >收款人</td><td width="140px">户名</td><td colspan="2">张三</td><td rowspan="4" class="shuli">付款人</td><td>户名</td><td colspan="2">老刘</td></tr>

最后制这个表格的完整的代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">
.shuli{ margin:0 auto;/* margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right
因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）*/width:32px;line-height:24px; /*属性设置行间的距离（行高）*/border:1px solid #333; /*设置边框粗细为2px、样式为实心的、颜色为黑色的边框*/font-weight:700;   /*字体的加粗*/
}
.cc{font-weight:700;   /*字体的加粗*/
}
</style>
</head>
<body>
<h2>工商银行电子汇款单</h2><table border="1" width="1000px"  cellspacing="0"><tr  align="center"><th colspan="2" width="178px">回单类型</th><th colspan="2">网上转账汇款</th><th colspan="2" width="178px">指定序列</th><th colspan="2">213254135454</th></tr><tr><td rowspan="4" class="shuli" >收款人</td><td width="140px">户名</td><td colspan="2">张三</td><td rowspan="4" class="shuli">付款人</td><td>户名</td><td colspan="2">老刘</td></tr><tr>  <td class="cc">卡号</td><td colspan="2">0000000001</td><td class="cc">卡号</td><td colspan="2">0000000002</td></tr><tr><td>地区</td><td colspan="2">南京</td><td>地区</td><td colspan="2">杭州</td></tr><tr><td class="cc">网点</td><td colspan="2">工商江苏南京业务处理中心</td><td class="cc">网点</td><td colspan="2">江苏徐州业务处</td></tr><tr><td colspan="2" class="cc">币种</td><td colspan="2" >人民币</td><td colspan="2" class="cc">钞汇标志</td><td colspan="2">钞票</td></tr><tr><td colspan="2" class="cc">金额</td><td colspan="2">1.00元</td><td colspan="2" class="cc">手续费</td><td colspan="2">0.75元</td></tr><tr><td class="cc" colspan="2">合计</td><td colspan="7">人民币(大写):壹</td></tr><tr><td colspan="2" class="cc">交易时间</td><td colspan="2">2017年6月01号</td><td colspan="2" class="cc">时间戳</td><td colspan="2">2017-06-01-13.00.00.00000</td></tr></table><p>票据打印时间：2017-06-01 15:00:12</p><p> <del>票据打印单位：苏徐州业务中心</del></p><p>操作员：大曾</p>
</body>
</html>

希望对你有所帮助，效果如下！

一分钟学会写网页表格相关推荐

xshell脚本简单代码_十分钟学会写shell脚本
大家好!我是handsomecui,下面我为大家讲解一下shell脚本的写法,讲的不好的地方,欢迎大家留言拍砖. 1.在linux下会写shell脚本是非常重要的,下面我参照例子给大家展示几个脚本,顺 ...
十分钟学会写Shell脚本
大家好!我是Wudu_Eleven,下面我为大家讲解一下shell脚本的写法,讲的不好的地方,欢迎大家留言拍砖. 1.在linux下会写shell脚本是非常重要的,下面我参照例子给大家展示几个脚本,顺 ...
5分钟学会写试用期工作总结
试用期个人总结尊敬的领导: 感谢您在百忙之中抽出珍贵的时间看我的试用期工作总结. 时光飞逝,转眼间已经过了三个月的时光.意味着 ...
python写好的代码怎么给别人使用-10分钟学会用python写游戏！Python其实很简单！...
原标题:10分钟学会用python写游戏!Python其实很简单! Python现在非常火,语法简单而且功能强大,很多同学都想学Python!所以在这里给各位看官们准备了高价值Python学习视频教程 ...
手机版python3h如何自制游戏_Python 飞机大战｜10 分钟学会用 python 写游戏
Python 飞机大战|10 分钟学会用 python 写游戏 2018 年 python 语言大火, 这把火看趋势已然延续到了 2019 年! 除了在科学计算领域 python 有用武之地之外, 在 ...
python写软件实例-30分钟学会用Python编写简单程序
原标题:30分钟学会用Python编写简单程序参与文末每日话题讨论,赠送异步新书异步图书君学习目标知道有序的软件开发过程的步骤. 了解遵循输入.处理.输出(IPO)模式的程序,并能够以简单的方 ...
python代码写好了怎么运行并画图-无所不能的python编程是怎么快速画图的呢？5分钟学会！...
原标题:无所不能的python编程是怎么快速画图的呢?5分钟学会! Python(发音:英[?pa?θ?n],美[?pa?θɑ:n]),是一种面向对象.直译式电脑编程语言,也是一种功能强大的通用型语言 ...
5分钟学会区块链 - 开发一条区块链 Develop BlockChain with Tendermint
本文攻略:解惑区块链开发,学习 Tendermint,给自己造一条区块链建议玩家等级:技术小白,学生党,初级码农阅读此文先解锁技能: 一点点命令行基础一点点 GO 基础:三天包学会一点点区块链 ...
python 读取excel表数据_5分钟学会用Python 读取Excel
5分钟学会用Python 读取Excel 日常办公使用频率最高的软件非Excel莫属了,如果我们遇到需要导入别人的Excel进行后续数据分析.读取内容等操作,我们该怎么办呢? 测试开发哥哥说:莫要慌, ...

一分钟学会写网页表格

一分钟学会写网页表格相关推荐

最新文章

热门文章