商务网页第8课.pptxVIP

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