文档介绍：单元3
表格应用与制作购物车页面
HTML5+CSS3网页设计与制作实用教程
工业和信息化人才培养规划教材
国家精品资源共享课程配套教材
高职高专计算机系列
人民邮电出版社
表格是常用的页面元素之一,过去制作网页时经常借助表格进行布局,现在表格的主要功能是有序地排列数据。本单元主要应用表格制作购物车页面。
本章导读
The chapter’s introduction
目录导航
渐进训练
任务 3-1
探索训练
任务 3-2
析疑解惑
单元小结
任务 3-1
任务描述
,其浏览效果如图3-1 所示。
图3-1 的浏览效果
【任务3-1-1】在网页中插入与设置表格
任务描述
①新建1 。
②在网页中插入一个9 行4 列的表格,且设置其属性:宽为700px,边框为1px,填充、
间距为0,表格4 列的宽度分别为120px、380px、100px 和100px。表格的标题文字为“标准快递收费标准”。
③设置表格的行、列及单元格的属性。
④根据需要合并单元格,且在单元格中输入必要的文字。
⑤定义CSS 代码,对表格、行、单元格进行美化。
. 的浏览效果如图3-2 所示。
图3-2 . 的浏览效果
【任务3-1-1】在网页中插入与设置表格
主界面中,选择菜单命令【插入】→【表格】,弹出1 个【表格】对话框。

(1)在【表格】对话框“行数”文本框中输入“9”,在“列数”文本框中输入“4”。
(2)在“表格宽度”文本框输入“700”,在其后的下拉列表框中选择宽度的单位为“像素”。
【提示】
创建表格时,宽度单位既可以是像素,也可以是百分比。如果宽度单位是像素,那么所定义的表格宽度是固定的,也是绝对数值,不会受浏览器大小变化的影响;如果宽度单位是百分比,那么所定义的表格宽度是一个相对数值,按浏览器窗口宽度的百分比来指定表格的宽度,它会随着浏览器的大小变化而进行相应的改变。
【任务3-1-1】在网页中插入与设置表格

(3)在“边框粗细”文本框中指定表格边框的宽度,默认值为1,单位为像素,其他参数暂保持其默认值不变。
(4)在“标题”文本框中输入表格的标题“标准快递收费标准”,如图3-4 所示。
(5)设置完成后单击【确定】按钮,1 个9 行4 列的表格便插入到网页中。
(6)保存网页中所插入的表格。
图3-4 在【表格】对话框中设置所插入表格的参数
【任务3-1-1】在网页中插入与设置表格

将鼠标指针指向表格边框线,出现红色外框线,鼠标指针变为形状时,单击鼠标左键即可选中整个表格。选中整个表格时,表格的【属性】面板如图3-5 所示。
图3-5 9 行4 列表格的属性设置
【任务3-1-1】在网页中插入与设置表格

(1)选择表格行
将鼠标指针指向表格的第1 行的左边线,当鼠标指针变成一个黑色箭头形状时,单击鼠标左键即可选中该行。
(2)设置表格行的属性
设置表格第1 行的水平对齐方式为“居中对齐”,垂直对齐方式为“居中”,在“高”文本框中输入“30”,选中“标题”复选框,其他属性保持其默认值,第1 行对应的属性设置如图3-6 所示。
图3-6 表格标题行的属性设置