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

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

结果展示

在这里插入图片描述

发布了20 篇原创文章 · 获赞 22 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_43198568/article/details/104133762
今日推荐