<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.month {
border-collapse:collapse;
table-layout:fixed;
width:780px;
}
.month caption {
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:normal;
padding-bottom:6px;
font-weight:bold;
}
.month th {
border:1px solid #999;
border-bottom:none;
padding:3px 2px 2px;
margin:0;
background-color:#ADD;
color:#333;
font:80% 宋体;
}
.month td {
border:1px solid #AAA;
font:12px 宋体;
padding:2px 2px;
margin:0;
vertical-align:top;
}
.month td.previous, .month td.next {
background-color:#eee;
color:#A6A6A6;
}
.month td.active {
background-color:#B1CBE1;
border:2px solid #4682B4;
}
.month ul {
list-style-type:none;
margin:3px;
padding:0;
}
.month li {
color:#FFF;
padding:2px;
margin-bottom:6px;
height:34px;
overflow:hidden;
width:100px;
border:1px #c00 solid;
background-color:#c66;
}
</style>
</head>
<body>
<table class="month">
<caption>
2007年10月
</caption>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<td class="previous">31</td>
<td>1</td>
<td class="active">2
<ul>
<li class="important">完成书稿第3部分</li>
<li>查JQuery相关资料</li>
</ul></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td class="previous">31</td>
<td>1</td>
<td>2 </td>
<td class="active">3
<ul>
<li class="important">完成书稿第3部分</li>
<li>查JQuery相关资料</li>
</ul></td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td class="previous">31</td>
<td>1</td>
<td class="active">2
<ul>
<li class="important">完成书稿第3部分</li>
<li>查JQuery相关资料</li>
</ul></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td class="previous">31</td>
<td>1</td>
<td class="active">2
<ul>
<li class="important">完成书稿第3部分</li>
<li>查JQuery相关资料</li>
</ul></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td class="previous">31</td>
<td>1</td>
<td class="active">2
<ul>
<li class="important">完成书稿第3部分</li>
<li>查JQuery相关资料</li>
</ul></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
53-表格设置日历实例
最新推荐文章于 2021-03-21 03:23:05 发布