资源描述
,单击此处编辑母版标题样式,单击此处编辑文本,第二级,第三级,第四级,第五级,2019/10/17,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2019/10/17,#,模块六,创建表格,6.1,创建表格标记,表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。,语法如下。,内容,6.1,创建表格标记,【例,6-1,】,添加表格标记。,表格标记,第一行第一列,第一行第二列,第二行第一列,第二行第二列,6.1,创建表格标记,【例,6-1,】,运行结果如图6,-,1所示。,图6,-,1 【例6,-,1】在IE浏览器中的运行结果,6.1,创建表格标记,对标签通常设置如下属性。,03,04,05,02,01,width、height：规定表格的宽度和高度。,border：表格边框的宽度。,bordercolor：规定边框的颜色。,cellspacing：规定单元格之间的间距。,cellpadding：规定单元格边界与单元格内容之间的间距，默认为0。,6.2,创建带有标题的表格标记,【例,6-2,】,添加带有标题的表格标记。,带有标题的表格标记,表格的标题,第一行第一列,第一行第二列,第二行第一列,第二行第二列,6.2,创建带有标题的表格标记,【例,6-2,】,运行结果如图6,-,2所示。,图6,-2,【例6,-,2】在IE浏览器中的运行结果,6.3,编辑表格,给表格设置背景颜色。,6.3.1 设置表格背景,【例,6-3,】,设置表格背景颜色,图像软件,Fireworks,网页制作,Dreamweaver,动画制作,Flash,6.3,编辑表格,运行结果如图6,-,3所示。,6.3.1 设置表格背景,【例,6-3,】,图6,-3,【例6,-,3】在IE浏览器中的运行结果,6.3,编辑表格,给表格设置背景图片。,6.3.1 设置表格背景,【例,6-4,】,设置表格背景图片,图像软件,Fireworks,网页制作,Dreamweaver,动画制作,Flash,6.3,编辑表格,运行结果如图6,-,4所示。,6.3.1 设置表格背景,【例,6-4,】,图6,-4,【例6,-4,】在IE浏览器中的运行结果,6.3,编辑表格,给单元格设置背景颜色。,6.3.2 设置单元格背景,【例,6-5,】,设置单元格背景,表格的标题,第一行第一列,第一行第二列,第二行第一列,第二行第二列,6.3,编辑表格,运行结果如图6,-,5所示。,6.3.2 设置单元格背景,【例,6-5,】,图6,-5,【例6,-5,】在IE浏览器中的运行结果,说明：,一般来说,，在企业开发中通常使用CSS样式表来进行背景设置。给单元格设置背景图片可以在标签中通过设置background属性来完成,。,6.3,编辑表格,6.3.3 合并单元格,在实际的表格应用中，经常会看到单元格的合并，有的是一行中多个单元格合并，有的是一列中多个单元格合并。如果需要横向合并单元格，则需要在标签中设置colspan属性；如果需要纵向合并单元格，则需要设置rowspan属性。,colspan是column span（跨列）的缩写。colspan属性用在td标签中，用来指定单元格横向跨越的列数。,6.3,编辑表格,6.3.3 合并单元格,横向合并表格单元格。,【例,6-6,】,单元格合并,单元格1,单元格2,单元格3,单元格4,6.3,编辑表格,6.3.3 合并单元格,运行结果如图6,-,6所示。,【例,6-6,】,图6,-6,【例6,-6,】在IE浏览器中的运行结果,【例6,-,6】通过把colspan设为3，使所在单元格横跨了三列。如果将colspan设为2，则该单元格将只跨两列，所以有必要在第一行插入另外一个单元格，以确保两行占据相同的列数。,6.3,编辑表格,6.3.3 合并单元格,在三列的表格中横向合并两个单元格。,【例,6-7,】,单元格合并,单元格1,单元格2,单元格3,单元格4,单元格5,6.3,编辑表格,6.3.3 合并单元格,运行结果如图6,-,7所示。,【例,6-7,】,图6,-7,【例6,-7,】在IE浏览器中的运行结果,rowspan的作用是指定单元格纵向跨越的行数。,6.3,编辑表格,6.3.3 合并单元格,纵向合并表格中的单元格。,【例,6-8,】,单元格纵向合并,单元格1,单元格2,单元格3,单元格4,6.3,编辑表格,6.3.3 合并单元格,运行结果如图6,-,8所示。,【例,6-8,】,图6,-8,【例6,-8,】在IE浏览器中的运行结果,【例6,-,8】中的单元格1的rowspan被设为3，这表示该单元格必须跨越三行（本身一行，加上另外两行）。因此，单元格1和单元格2在同一行，而单元格3和单元格4形成独立的两行。,6.3,编辑表格,6.3.4 设置单元格的行高与列宽,默认情况下，单元格的宽度和高度根据内容自动调整，也可以手动设置单元格的宽度和高度。,语法如下。,说明：,通过,width属性定义单元格的宽度，height属性定义单元格的高度，单位为像素或百分比。,6.3,编辑表格,6.3.4 设置单元格的行高与列宽,设置单元格的行高与列宽。,【例,6-9,】,设置单元格的行高与列宽,图像软件,Fireworks,网页制作,Dreamweaver,动画制作,Flash,6.3,编辑表格,6.3.4 设置单元格的行高与列宽,运行结果如图6,-,9所示。,【例,6-9,】,图6,-9,【例6,-,9】在IE浏览器中的运行结果,说明：,某一个,td的width与所处的一列每个td的width都是相关的。取其中最大的宽度作为这一列中每个td的列宽。而从某一个width设置的值就断言它的宽度是多少是不准确的。各td的height要由该td所在行的最大高度来确定。,6.4,案例,【案例描述】,新的学期开始了，小李同学想把这学期的课程表做成一个网页，以方便随时查看。,【源代码展示】,具体见书本,P98-99,。,6.4,案例,【运行结果】,运行结果如图6,-,10所示。,图6,-,10 模块6案例运行结果,【分,析】,小李同学设置标题，通过单元格合并将课程的安排信息有序地展示了出来，对于时间显示较长的单元格设置了列宽，并设置了整个表格的背景颜色。,6.5,思考与练习,一、选择题,1.创建表格的标签是（）。,A,.,B,.,C,.,D,.,2.表格中创建一行需要用到的标签是（）。,A,.,B,.,C,.,D,.,3.表格中创建一个单元格的标签是（）。,A,.,B,.,C,.,D,.,6.5,思考与练习,4.在表格中设置表格标题的标签是（）。,A,.,B,.,C,.,D,.,二、填空题,1.要给表格添加表格线，可以在标签中设置,属性，但是该属性只改变表格的,边框。,2.表格的背景颜色和背景图片分别需要在对应的标签中设置,和,属性。,3.表格如果需要横向单元格合并，则在标签中设置,属性，如果要纵向合并，则设置,属性。,6.5,思考与练习,4.表格标签中通过,属性定义单元格的宽度，单位,为或,。,5.表格一行中所有单元格的高度取决于该行中,标签设置的最大高度。,三、操作题,编写图6,-,11所示的表格，看谁做得又快又好。,图6,-,1,1,操作题图,THANKS,
展开阅读全文