有人说，数据表格会使页面变的臃肿不堪，所以应该完全抛弃掉他们，但是，有的时候，表格的用处显然是极大的。HTML提供了许多表格的属性，以做一个日历为例，在这进行总结一下。
- summary和caption.caption指表格标题，summary类似于图片的ALT属性，用于描述表格的内容。
- thead、tbody和tfoot.三个标签可以将表格分成几个逻辑部分，以便于对某一个特殊区域运用特殊样式，一个表格中只可以使用一个thead和tfoot，而可以使用多个tbody。
- col和colgroup，我们知道，行标题和列标题可以用<th>标签进行表示，行标记可以用<tr>，所以可以通过<tr>对整行应用样式，但是很难对整列应用样式，这个时候col和colgroup就派上用处了！他们可以对一个或多个列进行定义和分组。
使用了以上的标签，我们可以先构建出日历的基本轮廓：
<!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> </head> <body> <table class="cal" summary="A calender"> <caption> <a href="#" rel="prev"><</a>November 2014<a href="#" rel="next">></a> </caption> <colgroup> <col id="sun"/> <col id="mon"/> <col id="tue"/> <col id="wed"/> <col id="thur"/> <col id="fri"/> <col id="sat"/> </colgroup> <thead> <tr> <th scope="col">Sun</th> <th scope="col">Mon</th> <th scope="col">Tue</th> <th scope="col">Wed</th> <th scope="col">Tur</th> <th scope="col">Fri</th> <th scope="col">Sat</th> </tr> </thead> <tbody> <tr> <td class="null">26</td> <td class="null">27</td> <td class="null">28</td> <td class="null">29</td> <td class="null">30</td> <td class="null">31</td> <td><a href="#">1</td> </tr> <tr> <td><a href="#">2</td> <td><a href="#">3</td> <td><a href="#">4</td> <td><a href="#">5</td> <td><a href="#">6</td> <td><a href="#">7</td> <td><a href="#">8</td> </tr> <tr> <td><a href="#">9</td> <td><a href="#">10</td> <td><a href="#">11</td> <td><a href="#">12</td> <td><a href="#">13</td> <td><a href="#">14</td> <td><a href="#">15</td> </tr> <tr> <td><a href="#">16</td> <td><a href="#">17</td> <td><a href="#">18</td> <td><a href="#">19</td> <td><a href="#">20</td> <td><a href="#">21</td> <td><a href="#">22</td> </tr> <tr> <td><a href="#">23</td> <td><a href="#">24</td> <td><a href="#">25</td> <td><a href="#">26</td> <td><a href="#">27</td> <td class="selected"><a href="#">28</td> <td><a href="#">29</td> </tr> <tr> <td><a href="#">30</td> <td class="null">1</td> <td class="null">2</td> <td class="null">3</td> <td class="null">4</td> <td class="null">5</td> <td class="null">6</td> </tr> </tbody> </table> </body> </html>
再对其设置样式，表格边框有两个模型，分别是单独的(border-collapse:separate)和叠加的(border-collapse:collapse)。
table.cal{ border-collapse: separate; border-spacing: 0; text-align: center; color: #333; } .cal th,.cal td{ margin: 0; padding: 0; } //对标题添加视觉样式 .cal caption{ font-size: 1.25em; padding-top: 0.692em; padding-bottom: 0.692em; background-color: #d4dde6; } .cal caption [rel="prev"]{ float: left; margin-left: 0.2em; } .cal caption [rel="next"]{ float: right; margin-left: 0.2em; } .cal caption a:link, .cal caption a:visited{ text-decoration: none; color: #333; padding: 0 0.2em; } .cal caption a:hover, .cal caption a:active, .cal caption a:focus{ background-color: #6d8ab7; } //对主体部分应用样式 .cal thead th{ background-color: #d4dde6; border-bottom: 1px solid #a9bacb; font-size: 0.875em; } .cal tbody{ color: #a4a4a4; text-shadow: 1px 1px 1px white; background-color: #d0d9e2; } .cal tbody td{ border-top: 1px solid #e0e0e1; border-right: 1px solid #9f9fa1; border-bottom: 1px solid #acacad; border-left: 1px solid #dfdfe0; } .cal tbody a{ display: block; text-decoration: none; color: #333; background-color: #c0c8d2; font-weight: bold; padding: 0.385em 0.692em 0.308em 0.692em; } .cal tbody a:hover, .cal tbody a:focus, .cal tbody a:active, .cal tbody .selected a:link, .cal tbody .selected a:visited, .cal tbody .selected a:hover, .cal tbody .selected a:focus, .cal tbody .selected a:active{ background-color: #6d8ab7; color: white; text-shadow: 1px 1px 2px #22456b; } .cal tbody td:hover, .cal tbody td.selected{ border-top: 1px solid #2a3647; border-right: 1px solid #465977; border-bottom: 1px solid #576e92; border-left: 1px solid #466080; }
这样一个漂亮的日历小组件就诞生了~~~注意作者加样式的过程和思路。