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

最新推荐文章于 2024-03-18 18:50:29 发布

你的大数据学长

最新推荐文章于 2024-03-18 18:50:29 发布

阅读量4.3k

点赞数 5

分类专栏： HTML 文章标签： html html5

本文链接：https://blog.csdn.net/qq_43198568/article/details/104133762

版权

HTML 专栏收录该内容

22 篇文章 7 订阅

订阅专栏

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

预计效果图
代码
关键代码解释
结果展示

预计效果图

在这里插入图片描述

代码

话不多说，先上代码

<!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表示为一个单元格

结果展示

在这里插入图片描述

你的大数据学长

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
纯HTML代码绘制表格--初入HTML1

纯HTML代码绘制表单--初入HTML1预计效果图代码关键代码解释预计效果图代码话不多说，先上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>中国邮政储蓄银行</title></head>...
复制链接

扫一扫