任务4：“英博特智能科技”企业网站二三级页面布局第二篇：项目实战篇4.2 产品详细信息页面制作4-2产品详细信息页面制作能力要求学习导览（
1）掌握HTML表格和表格属性。（2）掌握表格的跨行和跨列操作。（3）掌握嵌套表格的插入。（4）会使用CSS样式设置表格。本次任务
完成三级页面中产品详细信息页面制作，该任务主要包括三个模块，上部是产品图片信息介绍，中部是产品详情介绍和规格参数，下部是产品应用场
景。4.2 产品详细信息页面制作（1）中部产品详情介绍“双舵轮背负式”内容可以采用哪些方法实现内容布局？
（2）数据表格主要设置了哪些样式？
（3）数据表格隔行显示不同
的背景色可以采用什么方法快速实现？
4.2 产品详细信息页面制作常用表格标签包括table（表格）标签、
tr（表格行）标签、th（表头）标签和td（表格单元格）标签，它们组成了HTML的基本表格结构。更复杂的 HTML 表格也可以包括
caption、col、colgroup、thead、tfoot 以及 tbody 元素。4.2 产品详细信息页面制作4.2 产
品详细信息页面制作【示例代码】2-4-9.html：表格。table定义表格caption定义表标题tr定义行th定义表头td定义
单元格该示例插入了一个5行3列的表格。（1）表格属性table标签的常用属性如下表所示，其中width、border、cellsp
acing和cellpadding属性的度量单位有两种，即百分数和像素。当使用百分数作为单位时，其值为相对于上一级元素宽度的百分数
，并用符号%表示，它不是一个固定值。4.2 产品详细信息页面制作（2）行、单元格属性tr标签的常用属性如下表所示：4.2 产品详细
信息页面制作th标签和td标签的常用属性下表所示。这些标签的属性中都有align和valign属性。如果在th标签和td标签中不设
置align和valign属性，默认情况下，th在水平和垂直方向上都为居中对齐，加粗显示，td标签的水平方向为左对齐，垂直方向为居
中对齐。可以使用CSS表格属性改善表格的外观。CSS常用表格属性如下表所示：4.2 产品详细信息页面制作可以使用CSS表格属性改善
表格的外观。CSS常用表格属性如下表所示：结合前面所学的CSS样式属性，对表格进行美化。4.2 产品详细信息页面制作美化前美化后（
1）跨行跨行是指一个单元格占据两行或两行以上。使用td元素的rowspan属性来实现单元格的跨行操作。4.2 产品详细信息页面制作
【示例代码】2-4-10.html：跨行。跨2行，即合并2行单元格（2）跨列跨列是指一个单元格占据两列或两列以上。一般使用td元素
的colspan属性来实现单元格跨列操作。注意：在同一个表格中，可以同时使用跨行跨列。但在使用跨行跨列时，要计算好，同一个单元格，
不能出现既跨行、又跨列的情况。4.2 产品详细信息页面制作【示例代码】2-4-11.html：跨列。跨2列，即合并2列单元格（2）
跨列在一个大的表格中，再嵌进去一个或几个小的表格称作是表格的嵌套。即在单元格th或td中再插入一个或多个新的表格。4.2 产品详细
信息页面制作【示例代码】2-4-12.html：表格嵌套。在td里面嵌套了一个table具体要求见任务书4.1 产品案例页面制作编
写相关样式04.运用本课学习的技术，模仿完成效果图所示产品详情一览表。要求有文字、图片，截图上传讨论区。4.1 产品案例页面制作运
用所学知识，模仿完成效果图所示房屋信息表。要求有文字、图片，截图上传讨论区。4.1 产品案例页面制作4.1 产品案例页面制作完成在
线测试题。运用本课学习的技术，完成产品详情一览表和房屋信息表产品案例图文混排（详见能力拓展）。吾生也有涯，而知也无涯！Web前端技术基础 |
|
