html css网页设计指南 17课件.pptVIP

第8章 表格 在CSS出现之前，表格是最流行的页面布局方式。那时，表格指的是一种页面布局方法，而不仅仅指单纯的表格。但现在，谈论Web设计时再提到“表格”，指的就是单纯的由单元格组成的表格了。 虽然现在表格的使用率大不如以前，但却仍是页面设计中不可或缺的一个元素。在一些服务性网站中，经常要使用表格传递信息和方便用户下载，如电信公司的话费单等。当然，如果你在老板要求你整理工作报表时，告诉他在你的个人主页上有每个月的工作报表，那不定是一件很酷的事情。现在，我们就一起来看看本章的内容。 本章的主要知识点有： 制作表格 修饰表格的单元格 拆分与合并表格 使用CSS样式表来表现表格 表格的实际应用 8.1 理解页面中的表格 表格看上去虽然只是一个个的小格子组成的样子，但是，谈及在HTML中制作表格，远远不是看上去的那么直接。表格涉及的属性很多。人们在表述表格的时候，不能简单地说“某某表格左上角的那个格子”，而是必须通过指定具体的行和列来定位某个单元格。这就已经出现3个属性了。一个普通的表格看上去如图8.1所示。 8.2 普通表格的应用 普通表格的使用频率很高，如课程表、出勤表、价目表等。对于某些内容，如果只是简单的文本信息，而且仅仅希望这些信息横排或竖排，那么表格是一种比较好的解决方法。 8.2.1 制作普通表格 表格属于结构性标签，使用的是table标签。一个最简单的表格也必须具备表头和行、列信息。它的代码如下所示： 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.2 表格的基本属性 表格的基本属性是指表格的行、列和单元格，但并不是每个表格的单元格大小都是统一的，所以需要设计者通过一些属性参数来修改表格的样子，让它们可以更更多样化。这些属性参数包括行高、宽度等。 1．行高height属性 2．宽度width属性 3．单元格大小属性height和width 8.2.3 合并单元格 合并同一行的单元格时，要用到 colsplan 属性。在需要修改的行中，先删除多余的单元格——注意，这是非常重要的一步，如果删错了单元格，很可能表格最后会变得面目全非——然后，再定义需要合并的单元格。 合并同一排的单元格时，要用到 rowspan 属性。书中的代码8-2即为合并单元格的一个范例，这里不再叙述。 8.2.4 表格的标题 caption标签是用来给表格添加标题的。这个标签需要置于table标签中，具体写法如下： table caption表格的名字/caption … caption表示标签添加的标题，默认情况下将位于表格上方居中的位置，且会根据表格的宽度自行调整位置。 8.2.5 拆分表格 为了便于给表格应用CSS样式表，有时候不希望代码中一直都是tr标签，这时，可以使用thead、tfoot、tbody来拆分表格。 thead定义了表格的首行。 tfoot定义了表格的尾行。 这里有意思的是，三个中无论你想使用哪一个，最终全部元素都要被用上。而且它们出现的次序是thead、tfoot、tbody。 8.2.6 设置表格的列 虽然HTML页面中表格是按照一行一行这样的概念建立起来的。但可以使用colgroup定义表格列的分组。这个标签常和其他2个标签配合使用，一个是col标签，一个是span标签。col标签表示为表格中一个或多个列定义属性值，是仅包含属性的空元素，只能在表格或 colgroup 中使用此元素。如图8.7是使用colgroup和col定义表格的列，图8.8是使用colgroup和span定义表格的列。 8.3 修饰单元格 在了解了表格的构建原理后，进一步需要了解的就是如何使设计的表格更美观一些。 表格是由一个个单元格组成的，美化表格的要点就在于美化这些单元格，而最好的方法还是使用样式表。 设计者可以通过设置一些属性来彻底改变表格的样式。 8.3.1 通过CSS修饰单元格的边框 修改边框可以使用border属性，它不仅仅能修改边框的粗细，还能修改边框的颜色和样式。在默认情况下，边框的值为0，即没有边框。边框的颜色和文本的颜色在默认情况下是相同的。 一个标准的边框定义在样式表中可以写成这样： border:2px solid red; 这里定义了边框的各项属性：宽度是2px，红色，实线。 在表格中如何应用多样化的边框样式，可参见书中的代码8-4，这里不再叙述，图8.9为应用不同边框样式后的表格。 8.3.2 合并相邻单元格 table标签制定的表格，会在所有的单元格之外，再