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