CSS控制表格——制作日历

	表格是网页上最常见的元素，除了用它来显示数据，还常被用来排版。这一次我们就来学习如何用CSS控制表格。
	一.表格中的标记
	表格（<table>标记）在最初HTML设计时，仅仅是用来存放各种数据的。
	下图是一个没有使用任何CSS修饰的表格：
		
	二.表格的颜色
	表格的颜色设置与文字颜色设置完全一样，通过color属性设置表格中文字的颜色，通过background属性设置表格的背景颜色。
	三.表格的边框
	border属性是用来设置表格边框的粗细的，当设置其值为0时，表明表格没有边框。
	bordercolor属性用来设置表格边框的颜色。
	在有了这些理论知识的基础上，下面以日历制作为例。
	利用CSS，十月份的日历如下：
	
	完整的代码如下：

<table class="clmonth" summary="Calendar for October 2015">    <span style="font-family: Arial, Helvetica, sans-serif;">//2015年10月日历</span>
	<caption>October 2015</caption>                    
	<tr>                                              //每个tr的个数都为7，正好与日期对应                                
		<th scope="col">Monday</th>               //表头内容周一至周日
		<th scope="col">Tuesday</th>
		<th scope="col">Wednesday</th>
		<th scope="col">Thursday</th>
		<th scope="col">Friday</th>
		<th scope="col">Saturday</th>
		<th scope="col">Sunday</th>
	</tr>
	<tr>                
		<td class="previous">28</td>              //上个月的日期
		<td class="previous">29</td>      
		<td class="previous">30</td>      
		<td class="active">1                      //本月添加安排的日期
		<ul>
			<li>国庆</li>
			<li>休息</li>
		</ul>
		</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>		
	</tr>
	<tr>
		<td>5</td>
		<td>6</td>
		<td class="active">7
		<ul>
			<li>软考第三阶段结束</li>
		</ul>
		</td>
		<td>8</td>
		<td class="active">9
		<ul>
			<li>开始软考做真题阶段</li>
		</ul>
		</td>
		<td>10</td>
		<td>11</td>
	</tr>
	<tr>
		<td>12</td>
		<td>13</td>
		<td>14</td>
		<td>15</td>
		<td>16</td>
		<td class="active">17
		<ul>
			<li>自考《数据结构导论》</li>
		</ul>
		</td>
		<td class="active">18
		<ul>
			<li>自考《软件开发工具》</li>
		</ul>
		</td>
	</tr>
	<tr>
		<td>19</td>
		<td>20</td>
		<td class="active">21
		<ul>
			<li>重阳节</li>
		</ul>
		</td>
		<td>22</td>
		<td>23</td>
		<td class="active">24
		<ul>
			<li>软考集体模拟</li>
		</ul>
		</td>
		<td>25</td>
	</tr>
	<tr>
		<td>26</td>
		<td>27</td>
		<td>28</td>
		<td>29</td>
		<td>30</td>
		<td>31</td>
		<td class="next">1</td>      
	</tr>
	<tr>
		<td class="next">2</td>                   //下个月的日期
		<td class="next">3</td>
		<td class="next">4</td>
		<td class="next">5</td>
		<td class="next">6</td>
		<td class="next">7</td>
		<td class="next">8</td>
	</tr>
<style>
.clmonth{
	border-collapse:collapse;           
	width:780px;
}
.clmonth caption{                                         //调整字体样式
	text-align:left;
	font:bold 130% Georgia,"Times New Roman";
	padding-bottom:6px;
}
.clmonth th{                                              //调整表头周一至周日的单元格样式
	border:1px solid #999999;
	border-bottom:none;
	padding:2px 8px 2px 8px;
	background-color:#D3D2A0;
	color:#2F2F2F;
	font:80% Verdana,Geneva,Arial,Helvetica,sans-serif;
	width:110px;
}
.clmonth td{                                               //调整所有日期单元格样式
	height:100px; 
	border:1px solid #AFAFAF;
	font:80% Verdana,Geneva,Arial,Helvetica,sans-serif;
	padding:2px 4px 2px 4px;
	vertical-align:top;
}
.clmonth ul{                                               //调整填写的安排内容样式
	list-style-type:none;
	margin:0;
	padding-left:12px;
	padding-right:6px;                
}
.clmonth li{
	margin-bottom:8px;               
}
.clmonth td.previous,.clmonth td.next{                    //调整上月和下月的日期单元格样式
	background-color:#F5F4E6;                         //背景色
	color:#A6A6A6;                                    //前景色
} 
.clmonth td.active{                                       //调整本月添加安排的单元格样式
	background-color:#B1CBE1;                         //背景颜色
	color:#2B5070;                                    //前景色
	border:2px solid #4682B4;                         //边框
}	

	在做之前，自己一直都半信半疑，利用CSS，就可以做出日历来吗？但自己又真的很想做出一个日历来，就这样带着怀疑去实现它。最后，日历做出来了，自我感觉比很多地方的都要好。简单，大方，美观，都可以称得上吧。
	从进入B/S学习阶段以来，自己了解到<table>其实越来越不被使用的，大都采用DIV节点设计网页。但做完后发现，其实用table做日历，效果很好啊。 不能说不常用了就哪都不使用了，有时候还是可以利用它完成很多不错的设计的吧。