悠悠博客 关注Ajax技术与web开发

#calendar {
 width: 141px;
 padding: 0;
 margin: 0;
 border-left: 1px solid #A2ADBC;
 font: normal 12px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 color: #616B76;
 text-align: center;
 background-color: #fff;
}

td {
 border-right: 1px solid #A2ADBC;
 border-bottom: 1px solid #A2ADBC;
 width: 20px;
 height: 20px;
 text-align: center;
 background: url(images/bg_calendar.gif) no-repeat right bottom;
}

td a:link, td a:visited {
 color: #608194;
 background: url(images/bg_calendar.gif) no-repeat;
}

td a:hover, td a:active {
 color: #6aa3ae;
 background: url(images/bg_calendar.gif) no-repeat right top;
}

<table id="calendar" cellspacing="0" cellpadding="0" summary="This month's calendar">
<caption><a href="#" title="previous month" class="nav">&laquo;</a> March <a href="#" title="next month" class="nav">&raquo;</a></caption>

 <tr>
  <th scope="col" abbr="Sunday" title="Sunday">S</th>
  <th scope="col" abbr="Monday" title="Monday">M</th>
....
  <th scope="col" abbr="Saturday" title="Saturday">S</th>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>1</td>

  <td>2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
 </tr>
....
</table>