预计效果图

代码

话不多说，先上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>中国邮政储蓄银行</title>
</head><body><hr/>
<br/>
<br/>
<br/>
<h1 align="center" style="font-size:30pt">外币小额存款利率</h1>
<hr/>
<h2 align="center" style="font-size:18pt">发布日期：2013-02-18</h2>
<br/>
<br/>
<br/><table border="1" align="center" cellpadding="8" cellspacing="0"><tr align="center" bgcolor="CC0000"><th colspan="8" style="color:white">外币小额存款利率表</th></tr><tr align="right" bgcolor="CC0000"><th colspan="8" style="color:white">年利率：%</th></tr><tr align="center" bgcolor="#FAEBD7"><th rowspan="2">执行日期</th><th rowspan="2">币种</th><th rowspan="2">活期储蓄</th><th colspan="5">定期储蓄</th></tr><tr align="center" bgcolor="#FAEBD7"><th width="60">一个月</th><th width="60">三个月</th><th width="60">六个月</th><th width="60">一年</th><th width="60">两年</th></tr><tr align="center" bgcolor="#FAEBD7"><td>2012.9.18</td><td>美元</td><td>0.05</td><td>0.2</td><td>0.35</td><td>0.55</td><td>0.85</td><td>0.85</td></tr><tr align="center" bgcolor="#FAEBD7"><td>2013.2.18</td><td>欧元</td><td>0.005</td><td>0.03</td><td>0.1</td><td>0.25</td><td>0.3</td><td>0.3</td></tr><tr align="center" bgcolor="#FAEBD7"><td>2012.7.1</td><td>英镑</td><td>0.125</td><td>0.25</td><td>0.35</td><td>0.7</td><td>0.8</td><td>0.85</td></tr><tr align="center" bgcolor="#FAEBD7"><td>2012.9.18</td><td>港币</td><td>0.01</td><td>0.1</td><td>0.25</td><td>0.6</td><td>0.8</td><td>0.85</td></tr><tr align="center" bgcolor="#FAEBD7"><td>2010.09.10</td><td>日元</td><td>0.0001</td><td>0.01</td><td>0.01</td><td>0.01</td><td>0.01</td><td>0.01</td></tr></table>
</body>
</html>

代码可在我的GitHub中找到，链接在此

关键代码解释

<hr />

标签在 HTML 页面中创建一条水平线，如上所示

<br />

换行

<table><tr><td></td></tr>
</table>

其中table为表单，tr表示一行，td表示为一个单元格

结果展示

纯HTML代码绘制表格--初入HTML1相关推荐

公司员工信息纯HTML代码写表格table
代码如下: border 为边框的厚度为1px(像素) rules 为合并相邻之间表格的边框 cellpadding:代表单元格边框到内容之间的距离(留白) cellspacing:用来指定表格各单 ...
【鸿蒙 HarmonyOS】Ability 中使用纯代码绘制布局及 UI 组件
文章目录一.Ability 与 Slice 简介二.Ability 中使用纯代码绘制布局及 UI 组件三.Ability 中使用纯代码绘制布局及 UI 组件代码示例四.GitHub 地址一. ...
html表格美化代码,分享：记录一次使用纯CSS美化table表格的代码
今天准备美化下作的一个小页面的样式,这个页面就是一个表格,调取报名信息的,例如「姓名」「联系方式」「时间」,就单独一个页面,不想再使用复杂的插件来实践,就准备用纯CSS来定一下样式. 检索了下,在「蝈 ...
【iText5 生成PDF】纯Java代码实现生成PDF(自定义表格、文本水印、单元格样式)
工作中遇到需要生成PDF.最终选择了iText.其他也有通过html再生成.感觉不太适合就用了代码实现. 使用iText 5.5.13.1版本.纯Java代码实现 1.自定义表格合并指定行列完成数据填 ...
【数据结构】初入数据结构的树(Tree)以及Java代码实现（一）
初入数据结构的树(Tree)以及Java代码实现(一) 树的定义为什么叫树? 树型结构的元素具有一对多关系树的定义树的一些基本概念树的结点后代,祖先子树.空树树的度与高(深度),结点的度 ...
美赛LaTeX关键操作讲解--绘制表格，插入图片、公式、代码块
后天2022年美赛就开始了,针对写作要求,博主着重整理了一下运用LaTeX绘制表格,插入图片.公式的详细操作以及相应的注释要求.(以下代码直接复制便可以使用,编号格式方面以及设置好了) 希望大家都能在 ...
纯div+css3代码绘制可爱小女孩
前些时间看到有人用div+css写的蓝胖子(机器猫),一时来了兴趣写了一个可爱的小女孩,特别感谢公司同事小棋帮我画了效果图.现在主流浏览器对css3支持良好,您可以通过Chrome,Firfox,Sa ...
每一个div元素分析 php,PHP初入，div知识点整理（特效字体等元素的使用整理）...
.nav{ width: 500px; height: 100px; border: 2px solid black; background-image: url(js/QQ图片20170815095 ...
用500行纯前端代码在浏览器中构建一个Tableau
2019独角兽企业重金招聘Python工程师标准>>> 在Gartner最新的对商务智能软件的专业分析报告中,Tableau持续领跑.Microsoft因为PowerBI表现出色也处 ...

纯HTML代码绘制表格--初入HTML1

纯HTML代码绘制表格--初入HTML1

预计效果图

代码

关键代码解释

结果展示

纯HTML代码绘制表格--初入HTML1相关推荐

最新文章

热门文章