DW网页设计—第8章表格讲解.ppt

8.4.2 修饰单元格中的内容 通过CSS定义单元格中的文本时，可以专门地指定某一行、某一列，或者是整个表格，比如文本颜色、背景、背景图片等。例如： td { text-align:center; font:.7em 幼圆; color:#334542; background-color:#ddd; } 样式表中可放入的属性有很多，也有一些是专门的属于表格的样式表，如下表所示，有兴趣的读者可以尝试一下效果。 8.4.2 修饰单元格中的内容 8.5 案例：制作球赛积分表 足球是一项非常有魅力的比赛，每当大赛来临，都能吸引一大批狂热的球迷，每每看到大赛的时间表、积分表都显得特别有活力。下面的例子中将介绍如何用表格制作出一个鲜亮的球赛积分表。可以把它放在个人博客上或是个人网站内，借助它和其他球友们一起享受球迷的生活。 8.6 小结 本章介绍了表格的用法，可以发现，设置表格的方法不难。但是表格缺少一些固定的规律，编辑的方式多而灵活。由于不同浏览器支持的效果大不相同，所以，表格一直是比较难控制的一样东西。好在现在设计者不用再考虑用表格来布局页面了，虽然偶然也会使用，但是更多的时候，表格只是用来制作表格。 第8章 表格 没有CSS之前，表格是最流行的布局页面的方式。它表示一种布局页面的方法，而不仅仅只是指单元格组成的表格，不过那已经是很久以前的事情了。现在谈论Web设计的时候，再说到“表格”，那么它就是一个普通的由单元格组成的表格。 8.1 理解页面中的表格 表格看上去虽然只是一个一个的小格子组成的，但是，谈及在HTML中制作表格，远远不是看上去的那么直接。表格涉及的属性很多，因为人们在表述表格的时候，不是说“某某表格左上角的那个格子”，而是通过描述某一行和某一列来定位某个单元格的位置，这里就已经描述了3个属性了。 8.2 普通表格的应用 这种表格常见于类似于课程表、出勤表、或者价目表这种形式的表格，被使用的频率很高。因此，如果只是针对于简单的文本内容，仅仅是希望这些内容横排或者竖排，那么表格是一个比较好的方法。 8.2.1 制作普通表格 表格属于结构性标签，使用table标签来进行创建。一个最简单的表格也需要具备表头、行、列的信息。所以它的代码是这样的。 8.2.1 制作普通表格 table tr thHead1/th thHead2/th /tr tr tdrow 1, cell 1/td tdrow 1, cell 2/td /tr tr tdrow 2, cell 1/td tdrow 2, cell 2/td /tr /table 8.2.1 制作普通表格 这样看代码真的很难想象这个表格是什么样子，如果用表格的形式去表达这段代码，则下图8所示。 8.2.1 制作普通表格 当然，表格的代码也可能写成如下代码。 table tr thHead1/th tdrow1，cell2/th /tr tr thHead2/th tdrow 2, cell 2/td /tr tr thHead3/th tdrow 3, cell 2/td /tr /table 8.2.1 制作普通表格 这是以列为表头的表格，其结果如下图所示。 8.2.1 制作普通表格 或者也可以写成如下代码，将第一组的tr标签内的对象全部定义为表头。此后每一组tr标签内的第一个标签定义为th标签，即之后的每一行的第一个单元格表示为表头。这样就是分别以行和列的第一个单元格作为表头。 8.2.1 制作普通表格 table tr thHead1/th thHEAD1/th /tr tr thHead2/th tdrow 1, cell 2/td /tr tr thHead3/th tdrow23, cell 2/td /tr /table 8.2.2 表格的基本属性 表格的基本属性就是指表格的行、列和单元格，但并不是每一个表格的单元格都是统一大小，所以这就需要设计者通过一些属性参数去修改表格的样子，让它们可以变得更多样性一些。 1．行高HEIGHT属性 默认情况下，一个空白表格的单元格是平均分配的，所以如果需要自定义行高，可以使用height属性来设置每一行单元格的行高。可以使用CSS样式表先定义table，然后定义th或者tr。若想改变表格的表头行高，则样式表应该写为： style type=text/css table {height:185px; } table th {height:32px; } /style 1．行高HEIGHT属性 当使用这个CSS时，结果如下图所示。 2．宽度WIDTH属性 如果只是需要修改表格列的宽度，则只使用width属性就可以了。但是不同于行高的是，表格中的宽度是针对整个表格或者每一个单元格的，所