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