css实现日历的布局

<div>
<!-- summmary属性可以应用于表格标签，用来描述表格的内容 -->
<table cellspacing="0" class="cal" summary="a calendar style date picker">
<caption>
<a href="#" rel="prev"><</a>January2008<a href="#" rel="next">></a>
</caption>
<!-- 利用thead、tbody和tfoot可以将表格划分为几个逻辑部分 在一个表格中只能使用一个thead和tfoot元素 tbody可以使用多个 -->
<thead>
<tr>
<!-- scope可以设置值为row或col，定义他们是行标题还是列标题 -->
<th scope="col">sun</th>
<th scope="col">mon</th>
<th scope="col">tue</th>
<th scope="col">wed</th>
<th scope="col">tur</th>
<th scope="col">fri</th>
<th scope="col">sat</th>
</tr>
</thead>
<tbody>
<tr>
<td class="null">30</td>
<td class="null">31</td>
<td><a href="#">1</a></td>
<td><a href="#">2</a></td>
<td><a href="#">3</a></td>
<td><a href="#">4</a></td>
<td><a href="#">5</a></td>
</tr>
<tr>
<td><a href="#">6</a></td>
<td><a href="#">7</a></td>
<td><a href="#">8</a></td>
<td><a href="#">9</a></td>
<td><a href="#">10</a></td>
<td><a href="#">11</a></td>
<td><a href="#">12</a></td>
</tr>
<tr>
<td><a href="#">13</a></td>
<td><a href="#">14</a></td>
<td><a href="#">15</a></td>
<td><a href="#">16</a></td>
<td><a href="#">17</a></td>
<td><a href="#">18</a></td>
<td><a href="#">19</a></td>
</tr>
<tr>
<td><a href="#">20</a></td>
<td><a href="#">21</a></td>
<td><a href="#">22</a></td>
<td><a href="#">23</a></td>
<td><a href="#">24</a></td>
<td><a href="#">25</a></td>
<td><a href="#">26</a></td>
</tr>
<tr>
<td><a href="#">27</a></td>
<td><a href="#">28</a></td>
<td><a href="#">29</a></td>
<td><a href="#">30</a></td>
<td><a href="#">31</a></td>
<td class="null">1</td>
<td class="null">2</td>
</tr>
</tbody>
</table>
</div>

<style type="text/css">
/*对表格应用样式*/
/*合并边框模式*/
table.cal{
border-collapse:separate;
border-spacing:0;/*控制单元格之间的距离 IE7和更低版本不理解这个属性 需要使用老式但可靠的cellspacing属性（html属性）*/
text-align: center;
color:#333;
}
/*删除默认的内边距和外边距*/
.cal th, .cal td{
margin:0;
padding:0;
}
.cal caption{
font-size:1.25em;
padding-top: 0.692em;
padding-bottom:0.692em;
background-color:#d4dde6;
}
.cal caption[rel="prev"]{
float: left;
margin-left:0.2em;
}
.cal caption[rel="next"]{
float:right;
margin-right:0.2em;
}
.cal caption a:link,.cal caption a:visited{
text-decoration: none;
color:#333;
padding:0 0.2em;
}
.cal caption a:hover,.cal caption a:active,.cal caption a:focus{
background-color: #6d8ab7;
}
.cal thead th{
background-color:#d4dde6;
border-bottom:1px solid #a9bacb;
font-size:0.875em;
}
.cal tbody{
color:#a4a4a4;
text-shadow:1px 1px 1px white;
background-color: #d0d9e2;
}
.cal tbody td{
border-top:1px solid #e0e0e1;
border-right:1px solid #9f9fa1;
border-bottom:1px solid #acacad;
border-left:1px solid #dfdfe0;
}
.cal tbody a{
display: block;
text-decoration:none;
color:#333;
background-color: #c0c8d2;
font-weight: bold;
padding:0.385em 0.692em 0.308em 0.692em;
}

.cal tbody a:hover,.cal tbody a:focus ,.cal tbody a:active,.cal tbody .selected a:visited,
.cal tbody .selected a:hover,.cal tbody .selected a:focus,.cal tbody .selected a:active{
background-color: #6d8ab7;
color:white;
text-shadow:1px 1px 2px #22456b;
}

</style>