<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>doris</title>
<link href="c.css" type="text/css" rel="stylesheet" />
</head>
<body>
<table>
<caption>2016年8月</caption>
<colgroup span="1" class="weekend"></colgroup>
<colgroup span="5" class="weekday"></colgroup>
<colgroup span="1" class="weekend"></colgroup>
<tr id="days">
<th>日 SUN</th>
<th>一 MON</th>
<th>二 TUE</th>
<th>三 WED</th>
<th>四 THU</th>
<th>五 FRI</th>
<th>六 SAT</th>
</tr>
<tr>
<td></td>
<td>
<div class="date"><a href="#">1</a><span>廿九</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">2</a><span>卅</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">3</a><span>七月</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">4</a><span>初二</span></div>
<div class="memo"></div>
</td>
<td id="today">
<div class="date"><a href="#">5</a><span>初三</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">6</a><span>初四</span></div>
<div class="memo"></div>
</td><!--第一行結束-->
</tr>
<tr>
<td>
<div class="date"><a href="#">7</a><span>立秋</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">8</a><span>初六</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">9</a><span>七夕節</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">10</a><span>初八</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">11</a><span>初九</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">12</a><span>初十</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">13</a><span>十一</span></div>
<div class="memo"></div>
</td>
</tr><!--第二行結束-->
<tr>
<td>
<div class="date"><a href="#">14</a><span>十二</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">15</a><span>十三</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">16</a><span>十四</span></div>
<div class="memo">家庭聚餐</div>
</td>
<td>
<div class="date"><a href="#">17</a><span>十五</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">18</a><span>十六</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">19</a><span>十七</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">20</a><span>十八</span></div>
<div class="memo"></div>
</td>
</tr><!--第三行結束-->
<tr>
<td>
<div class="date"><a href="#">21</a><span>十九</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">22</a><span>廿</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">23</a><span>處暑</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">24</a><span>廿二</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">25</a><span>廿三</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">26</a><span>廿四</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">27</a><span>廿五</span></div>
<div class="memo"></div>
</td>
</tr><!--第四行結束-->
<tr>
<td>
<div class="date"><a href="#">28</a><span>廿六</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">29</a><span>廿七</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">30</a><span>廿八</span></div>
<div class="memo"></div>
</td>
<td>
<div class="date"><a href="#">31</a><span>廿九</span></div>
<div class="memo"></div>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
css部分
/* CSS Document */
*{
margin:0;
padding:0;
font-size:12px;
}
body{
background-color:#fcfcfc;
}
table{
width:777px;
border-collapse:collapse;
font-size:1px;
border:1px solid gray;
table-layout:fixed;
}
caption{
font-size:20px;
font-family:Georgia, sans-serif;
padding-bottom:6px;
}
th{
font-family:Tahoma,"宋體",sans-serif;
background:#fff49b;
padding:3px;
}
td{
height:110px;
vertical-align:top;
padding:0 0 0 3px;
border:1px solid gray;
}
colgroup.weekend{
background:#ffe1de;
}
div.date a{
width:28px;
display:block;
float:left;
font-size:22px;
font-family:Georgia,sans-serif;
text-decoration:none;
}
div.date span{
color:gray;
float:left;
padding-top:8px;
}
div.memo{
clear:both;
margin-top:5px;
}
td#today{
border:2px solid black;
}