(*记录自己的课程实验)
一、实验内容
- 编程实现表格,页面效果如下图(图片中水印不实现):
二、实验代码及成品
<html>
<body>
<head>
<meta charset="UTF-8">
<title>外币小额存款利率表</title>
<style>
body {
text-align: center;
width: 100%;
height: 100%;
}
.glad{
background-color: antiquewhite;
}
.td1{
text-align:right;
}
table{
table-layout: fixed;word-break: break-all; word-wrap: break-word;
border-collapse: collapse;
margin: auto;
text-align: center;
width: 784px;
height: 35px;
}
table,tr,td {
border: 1px solid black;
padding-bottom: 10px;
padding-top: 10px;
}
.title {
background-color: #bf0103;
font-family: 黑体, sans-serif;
color: white;
}
.time {
margin-top: 8px;
margin-bottom: 65px;
}
</style>
</head>
<table style="border-collapse: collapse" border="1.5" cellpadding="1" >
<hr>
<h1 align="center" class="font" class="title">
<br>外币小额存款利率<br>
</h1>
<hr>
<p class="time" align="center">
发布时间:2013-02-18
</p>
<br>
<tr>
<td bgcolor="#b22222" colspan="8" style="color: white">外币小额存款利率表</td>
</tr>
<tr class="td1">
<td bgcolor="#b22222" colspan="8" style="color: white">年利率:%  </td>
</tr>
<tr class="glad">
<td rowspan="2">执行日期</td>
<td rowspan="2">币种</td>
<td rowspan="2">活期储蓄</td>
<td colspan="5">定期储蓄</td>
</tr>
<tr class="glad">
<td>一个月</td>
<td>三个月</td>
<td>六个月</td>
<td>一年</td>
<td>二年</td>
</tr>
<tr class="glad">
<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 class="glad">
<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 class="glad">
<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 class="glad">
<td>2010.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.01</td>
</tr>
<tr class="glad">
<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>