表格是网页上最常见的元素，除了用它来显示数据，还常被用来排版。这一次我们就来学习如何用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做日历，效果很好啊。 不能说不常用了就哪都不使用了，有时候还是可以利用它完成很多不错的设计的吧。
