,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,ppt课件,*,单击此处编辑母版标题样式,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,ppt课件,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,ppt课件,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,ppt课件,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,ppt课件,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,ppt课件,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,ppt课件,*,第,8,章 表格,没有,CSS,之前，表格是最流行的布局页面的方式。它表示一种布局页面的方法，而不仅仅只是指单元格组成的表格，不过那已经是很久以前的事情了。现在谈论,Web,设计的时候，再说到“表格”，那么它就是一个普通的由单元格组成的表格。,1,ppt课件,第8章 表格没有CSS之前，表格是最流行的布局页面的方式。,8.1,理解页面中的表格,表格看上去虽然只是一个一个的小格子组成的，但是，谈及在,HTML,中制作表格，远远不是看上去的那么直接。表格涉及的属性很多，因为人们在表述表格的时候，不是说“某某表格左上角的那个格子”，而是通过描述某一行和某一列来定位某个单元格的位置，这里就已经描述了,3,个属性了。,2,ppt课件,8.1 理解页面中的表格表格看上去虽然只是一个一个的小格子,8.2,普通表格的应用,这种表格常见于类似于课程表、出勤表、或者价目表这种形式的表格，被使用的频率很高。因此，如果只是针对于简单的文本内容，仅仅是希望这些内容横排或者竖排，那么表格是一个比较好的方法。,3,ppt课件,8.2 普通表格的应用这种表格常见于类似于课程表、出勤表、,8.2.1,制作普通表格,表格属于结构性标签，使用,标签来进行创建。一个最简单的表格也需要具备表头、行、列的信息。所以它的代码是这样的。,4,ppt课件,8.2.1 制作普通表格表格属于结构性标签，使用tabl,8.2.1,制作普通表格,Head1,Head2,row 1, cell 1,row 1, cell 2,row 2, cell 1,row 2, cell 2,5,ppt课件,8.2.1 制作普通表格5ppt课件,8.2.1,制作普通表格,这样看代码真的很难想象这个表格是什么样子，如果用表格的形式去表达这段代码，则,下图,8,所示。,6,ppt课件,8.2.1 制作普通表格这样看代码真的很难想象这个表格是什,8.2.1,制作普通表格,当然，表格的代码也可能写成如下代码。,Head1,row1,，,cell2,Head2,row 2, cell 2,Head3,row 3, cell 2,7,ppt课件,8.2.1 制作普通表格当然，表格的代码也可能写成如下代码,8.2.1,制作普通表格,这是以列为表头的表格，其结果如下图所示。,8,ppt课件,8.2.1 制作普通表格这是以列为表头的表格，其结果如下图,8.2.1,制作普通表格,或者也可以写成如下代码，将第一组的,标签内的对象全部定义为表头。此后每一组,标签内的第一个标签定义为,标签，即之后的每一行的第一个单元格表示为表头。这样就是分别以行和列的第一个单元格作为表头。,9,ppt课件,8.2.1 制作普通表格或者也可以写成如下代码，将第一组的,8.2.1,制作普通表格,Head1,HEAD1,Head2,row 1, cell 2,Head3,row23, cell 2,10,ppt课件,8.2.1 制作普通表格10ppt课件,8.2.2,表格的基本属性,表格的基本属性就是指表格的行、列和单元格，但并不是每一个表格的单元格都是统一大小，所以这就需要设计者通过一些属性参数去修改表格的样子，让它们可以变得更多样性一些。,11,ppt课件,8.2.2 表格的基本属性表格的基本属性就是指表格的行、列,1,行高,height,属性,默认情况下，一个空白表格的单元格是平均分配的，所以如果需要自定义行高，可以使用,height,属性来设置每一行单元格的行高。可以使用,CSS,样式表先定义,table,，然后定义,th,或者,tr,。若想改变表格的表头行高，则样式表应该写为：,table height:185px;,table th height:32px;,12,ppt课件,1行高height属性默认情况下，一个空白表格的单元格是平,1,行高,height,属性,当使用这个,CSS,时，结果如下图所示。,13,ppt课件,1行高height属性当使用这个CSS时，结果如下图所示。,2,宽度,width,属性,如果只是需要修改表格列的宽度，则只使用,width,属性就可以了。但是不同于行高的是，表格中的宽度是针对整个表格或者每一个单元格的，所以像下面这样的写法是错误的。,table width:400px;,table th width:100px;,14,ppt课件,2宽度width属性如果只是需要修改表格列的宽度，则只使用,3,单元格大小属性,height,和,width,单元格的大小其实就是由高和宽两个因素组成的。所以如果要准确定位一个单元格的具体大小，这两个因素是缺一不可的，必须要同时具备，这样才能定位每个单元格的大小。,15,ppt课件,3单元格大小属性height和width单元格的大小其实就,8.2.3,合并单元格,合并同行单元格使用,colsplan,属性。在需要修改的那一行中，先删除多余的单元格，这是重要的一步，如果删错了单元格，很可能最后呈现的表格会面目全非。这之后再定义合并的单元格。合并同列的单元格使用,rowspan,属性，这里介绍一种合并单元格的方法。,16,ppt课件,8.2.3 合并单元格合并同行单元格使用colsplan属,8.2.4,表格标题,表格标题是一个表格的内容的总结，通常被居中显示在表格的上方。,标签是用来定义表格的标题的，它必须紧随,标签之后，并且每个表格只能定义一个标题。其语法结构如下：,表格的名字,表示标签添加的标题，默认情况下在表格上方居中的位置，它会根据不同表格的宽度来改变位置。,17,ppt课件,8.2.4 表格标题表格标题是一个表格的内容的总结，通常被,8.2.5,拆分表格,为了便于将表格定位给,CSS,样式表，有时候不希望代码中一直都是,标签，可以使用,thead,、,tfoot,、,tbody,来拆分表格。,thead,定义了表格的首行，,tfoot,定义了表格的尾行，,tbody,定义了表格的主体部分。这里有意思的是，如果使用了其中一个，那么全部元素都要用上。而且它们的出现次序是,thead,、,tbody,、,tfoot,，如以下代码所示。,18,ppt课件,8.2.5 拆分表格为了便于将表格定位给CSS样式表，有时,8.2.5,拆分表格,thead,tbody,tfoot,19,ppt课件,8.2.5 拆分表格19ppt课件,8.2.6,设置表格的列,虽然,HTML,页面中表格是按照一行一行这样的概念建立起来的，但是可以使用,定义表格列的分组。这个标签常和其他,2,个标签配合用，一个是,标签，一个是,标签。,标签表示为表格中一个或多个列定义属性值，是仅包含属性的空元素，只能在表格或,colgroup,中使用此元素。,20,ppt课件,8.2.6 设置表格的列虽然HTML页面中表格是按照一行一,8.3,修饰单元格,当了解了表格的构建原理之后，进一步该讨论的就是如何使设计的表格更美观一些。表格是由一个一个的单元格组成，美化表格的要点就在于如何去美化这些单元格。谈到修饰，最好的方法还是使用样式表。设计者可以利用很多优秀的属性彻底改变表格的样式。,21,ppt课件,8.3 修饰单元格当了解了表格的构建原理之后，进一步该讨论,8.3.1,通过,CSS,修饰单元格的边框,修改边框可以使用,border,属性，其不仅仅可以修改边框的粗细，也能修改边框的颜色和样式。默认情况下，边框的值是,0,，即没有边框。边框颜色和文本颜色默认情况下是相同的。一个标准的边框定义在样式表中可以写成这样：,border:2px solid red;,22,ppt课件,8.3.1 通过CSS修饰单元格的边框修改边框可以使用bo,8.3.2,合并相邻单元格,标签制定的表格，会在所有的单元格之外，再框上一个“四边形”，而每一个单元格又是独立存在的。所以单元格和单元格之间总像是有一条缝隙，有一种方式可以消除这条缝隙，就是使用“边框挤压”的属性,border-collapse,，如下代码所示。,border-collapse: collapse;,23,ppt课件,8.3.2 合并相邻单元格标签制定的表格，会,8.4,编辑单元格中的内容,表格是由许多个单元格组成，而这些单元格中又可以放入多种类型的页面内容，诸如文本、图像或者超链接等，甚至可以再放入新的表格。这种表格的嵌套曾经是非常流行的布局页面的方法，只是这种方法太过繁琐。通过样式表来修饰表格中的内容就容易多了。,24,ppt课件,8.4 编辑单元格中的内容表格是由许多个单元格组成，而这些,8.4.1,单元格中文本与单元格大小,单元格的大小会随着格内文本的长度自行缩放。虽然通过数值可以固定单元格的大小，但是如果文本的长度超过所设置的单元格长度，那么依然会根据文本的长度来做决定。使用,table-layout,属性可以限制单元格随文本长度而改变，如下代码所示。,table-layout : fixed;,25,ppt课件,8.4.1 单元格中文本与单元格大小单元格的大小会随着格内,8.4.2,修饰单元格中的内容,通过,CSS,定义单元格中的文本时，可以专门地指定某一行、某一列，或者是整个表格，比如文本颜色、背景、背景图片等。例如：,td text-align:center;,font:.7em,幼圆,;,color:#334542;,background-color:#ddd;,样式表中可放入的属性有很多，也有一些是专门的属于表格的样式表，如下表所示，有兴趣的读者可以尝试一下效果。,26,ppt课件,8.4.2 修饰单元格中的内容通过CSS定义单元格中的文本,8.4.2,修饰单元格中的内容,27,ppt课件,8.4.2 修饰单元格中的内容 27ppt课件,8.5,案例：制作球赛积分表,足球是一项非常有魅力的比赛，每当大赛来临，都能吸引一大批狂热的球迷，每每看到大赛的时间表、积分表都显得特别有活力。下面的例子中将介绍如何用表格制作出一个鲜亮的球赛积分表。可以把它放在个人博客上或是个人网站内，借助它和其他球友们一起享受球迷的生活。,28,ppt课件,8.5 案例：制作球赛积分表足球是一项非常有魅力的比赛，每,8.6,小结,本章介绍了表格的用法，可以发现，设置表格的方法不难。但是表格缺少一些固定的规律，编辑的方式多而灵活。由于不同浏览器支持的效果大不相同，所以，表格一直是比较难控制的一样东西。好在现在设计者不用再考虑用表格来布局页面了，虽然偶然也会使用，但是更多的时候，表格只是用来制作表格。,29,ppt课件,8.6 小结本章介绍了表格的用法，可以发现，设置表格的方法,