《HTML5+CSS3项目开发案例教程》 项目六 应用和美化表格.pptx

除表格边框相关属性之外，table标签还有表示表格内容摘要的summary属

性，该属性不在浏览器中显示，但屏幕阅读器可以阅读，也方便搜索引擎检索表

格内容。

th,td{width:100px;text-align:center;}

/*设置所有单元格的宽度与居中对齐*/

在head标签中添加style标签，在其中输入以下代码，设置表格中单元格的样式。

步骤2

③【例6-7】html

X十

→C①文件|D:/秦例与素材/项目6/【例6-7】html

☆

高中课程表

6.1.6单元格跨行、跨列显示

th与td都是表示单元格的标签，设置它们的rowspan与colspan属性可以使单元格跨行或跨列显示，这两个属性的属性值为跨行或跨列的个数。

星明一

星明二

星期三

星期四

星期五

上午

早自习

局会

语文

英语

语文

英语

第一节

数学

化学

政治

数学

语文

第二节

英语

地理

语文

英语

物理

第三节

历史

英语

化学

政治

化学

第四节

语文

数学

物理

生物

地理

午休

下午

第五节

体育

语文

英语

地理

自习

第六节

地理

物理

数学

化学

生物

第七节

化学

政治

历史

语文

英语

第八节

物理

生物

体育

历史

数学

晚自习

【例6-7】制作完整的高中课程表，页面效果如下图6-9所示。

th{width:70px;background-color:#d6f580;}

td{width:80px;background-color:#fff689;}

/*分别设置表头与普通单元格的宽度与背景颜色*/

tr{text-align:center;}

/*设置表格行中的文本居中对齐*/

创建HTML5文档，在body标签中输入代码(详情见教材),构建完整高中课程表表格的结构。

在head标签中添加style标签，在其中输入以下代码，设置表格的样式。

任务实施

使用表格制作“网上书店”页面的“热销排行榜”

使用CSS3美化表格

·设置表格标题样式·制作细线表格

·制作圆角表格

·制作隔行换色表格

·制作自适应表格

6.2.1设置表格标题样式

在CSS3中，使用caption-side属性设置表格标题的显示位置，属性值有top(表格上方)

和bottom(表格下方)。

提示：火狐浏览器还支持将表格标题显示在表格左侧或右侧，对应的caption-side属性值为left与right。

【例6-8】制作第四季度工资单，页面效果如下图6-13所示。

/D:/案例与素材/项目6/【例6-8]×

→C①file://D:/案例与素材/项目6/【例…》

金额

5200.0元5250.0元

10450.0元

月份

10月11月12月

总计

第季度工资单

四

一

th,td{width:100px;

border:solid1pxblack;text-align:center;}

/*设置单元格的宽度与边框，并设置文本居中对齐*/

table{caption-side:left;}

/*设置表格标题显示在表格左侧*/

创建HTML5文档，在body标签中输入代码(详情见教材),构建第四季度工资单表格的结构。

在head标签中添加style标签，在其中输入以下代码，设置表格中单元格的样式，并设置表格标题显示在表格左侧。

6.2.2制作细线表格

在实际的网页制作中，一般不使用HTML5设置表格边框，而是使用CSS3中的border属性统一设置。

制作细线表格除需要设置border属性外，还需要合并单元格

边框。在CSS3中，使用border-collapse属性合并单元格边框，并去除单元格之间默认存在的外边距，具体格式为：

border-collapse:separatelcollapse;

其中，separate为默认的显示效果，collapse表示尽可能将单

元格边框合并显示。

【例6-9】制作普通、粗线与细线表格，页面效果如下图6-14所示。

③【例5-9]htmlX十

83

→C①文件|D:/案例与素材/项目6/【例6-9】.html☆

电影佳作推荐表(普通表格)电影佳作推荐表(粗线表格)

电影佳作推荐表(细线表格

电影名称

上映时间

评分

电影名称

上映时间

评分

电影名称

上映时间

评分

《辛德勒的名单》

1993年

9.4分

《辛德勒的名单