10.5 综合实例
使用表格表示数据、制作调查表等应用在网络中非常普遍，同时表格因为框架简单、明了，所以一直受到网页设计者们的青睐。日历是网络中比较常见的一种表格应用。在本综合实例中，制作一个简易的日历，如图10-13所示。
图10-13 日历
具体操作步骤如下：
（1）新建页面，在页面中插入表格，并搭建出表格的HTML基本结构，代码如下：
上面的代码中，表格每行包含7个单元格。除了第一行显示的是周一至周日，后面的单元格显示的是日期。日期既包含阿拉伯数字，也包含农历日期，数字可以直接输入，而农历日期用ul列表列出其值。这样做是因为两者的样式不一样，用列表定义能方便在使用CSS设置的时候进行选择。
上面代码中在head部分有如下语句：
这是链接式CSS样式表，即把CSS样式定义在“rili.css”文件中，并将文件链接到当前页面。这样如果要制作其他月份的日历，也可以使用所定义的样式。
运行结果如图10-14所示。
图10-14 没有设置任何样式的表格
（2）新建一个CSS样式文件，开始编写CSS样式。
①首先添加对整个表格的控制，代码如下：
②设置＜caption＞和＜th＞的基本属性，代码如下：
③对单元格进行设置，这里的字体大小主要对应数字日期，而农历日期则通过列表属性来设置，代码如下：
④对农历日期列表进行CSS控制，清除每个项目前面的小圆点，定义其字体大小及颜色，代码如下：
此时的网页效果如图10-15所示。
图10-15 日历表格的基本效果
⑤为有节气的日期设置.special特殊样式，字体为红色，为今天的日期添加背景颜色和边框，代码如下：
⑥日历表中需要周六和周日显示为红色，而且是整列的样式控制，可以使用“邻接”选择器来实现。它的基本书写格式是用加号连接。例如“td＋td＋td｛…｝”表示表格的每一行中，如果有3个td相邻，那么第3个td就是选中的元素。考虑到第一行的标记是＜th＞，CSS样式定义如下：
到这里，本月的日历制作完成。如果需要制作其他月份的日历，只需搭建出该月的HTML结构，再链接“rili.css”样式文件就可以实现相同的页面效果。