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