商务网页第8课课件

3.5 表格制作方法l网页中的表格与现实生活中的表格类似，但用途与概念有一些区别。网页中的表格除了展示格式化的数据信息外，还具有美化网页的重要作用，常常用来排版网页。l尽管表格布局网页的技术正逐渐被后来发展起来的“DIV+CSS”技术取代，但其作为排版数据的功能依然受到很多网页设计人员的喜爱。l网页设计制作人员可以利用表格技术快速地表示价格列表、统计比较、图表等，还能高效快捷地把图像、文本、数据和表单元素等有序地显示在页面上，让我们可以设计出清晰的网页布局和漂亮的网页界面。3.5.1 表格的代码结构l在网页中使用表格技术，需要了解表格基本的代码结构l网页中的表格是通过表标签创建，再由行标签创建表格行，最后通过单元格标签创建表格的单元。多行的表格单元构成了一个完整的表格。l从表格的代码结构上看，表格的数据实例放在单元格的开始标签和结束标签的中间。3.5.2 制作表格的方法l生活中的表格可以用笔画，或者用Ecxel等工具制作，而网页中的表格必须用纯文本的方式来定义和描述。l创建表格应当使用表标签、表头标签、行标签、单元格标签及其相关属性。创建表格首先要创建表，然后按照创建行、创建该行的单元格，再创建行、创建该行单元格的顺序进行，直至所有表格创建完毕。3.5.3 单元格合并的方法l单元格合并分为多列单元格合并、多行单元格合并以及多行多列单元格同时合并3种形式，需要使用表格单元格标签的“colspan”属性、“rowspan”属性。1多列单元格合并l多列单元格合并是指当前列与右边连续多列单元格的合并。设置方法为其中，colspan的属性值为整数数字，如1、2、3、4、5等，表示合并连续几列的单元格。表格列合并 项目1 项目2 项目3 项目4 项目5 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 2多行单元格合并l多行单元格合并是指当前行与下边连续多行单元格的合并。设置方法为其中，rowspan的属性值为整数数字，如1、2、3、4、5等，表示合并几行。表格行合并 项目1 项目2 项目3 项目4 项目5 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 l思考：行合并后，当前行还应当制作几个单元格？下行单元格如何制作？从哪个位置开始？制作单元格的数量怎么计算？l另，表头的合并与单元格合并的方法完全相同，只是标签不同，本书不做重复介绍。3多行多列单元格同时合并l多行多列单元格同时合并是指一个单元格与右列、下行的单元格同时合并。设置方法为要点：观察表格，计算行列合并后，需要制作的单元格数量。表格行列同时合并 项目1 项目2 项目3 项目4 项目5 单元格 单元格 单元格 单元格 单元格 单元格 3.5.4 制作单元格内容l制作单元格内容主要指引用文本、图像，以及设置单元格背景。1引用文本l引用文本比较简单，直接在单元格标签之间放入文本即可，可按照以前学习的知识设置文本的字体、字号、颜色。l嵌入文字的方法为文字实例2引用图像l引用图像的方法与网页引用图像的方法基本相同，需要使用图像标签及其“src（图像源）”“width（宽度）”“height（高度）”属性。设置方法为：其中，“width”“height”的属性值有绝对像素值、百分比两种表达方式。需要注意的是：在单元格内引用图像时使用百分比赋值，则图像的百分比跟踪的是该单元格的尺寸，而不是浏览器窗口的尺寸。练习：1.制作一个含有5行3列表格的网页;2.制作一个1行2列的表格，表格式样如下：