第15章 CSS控制表格元素的演示文稿.PPTVIP

第15章 CSS控制表格元素的显示 表格元素，一般用来显示矩阵格式的数据。在CSS中，可以通过相应的表现属性，来定义表格元素的表现效果。除了可以定义表格的边框、补白、边界等属性之外，还可以使用表格独有的CSS属性，例如边框合并属性（border-collapse）等，对表格进行进一步的控制。通过本章学习，应该掌握以下知识要点： 熟悉CSS控制表格元素边框的各个属性及其应用。 属性单元格的制约关系。 精确控制表格与单元格的大小。 15.1 控制表格元素的显示 在CSS中，表格元素的控制，包括控制表格边框是否合并、控制表格边框间距、表格标题位置等几个方面的内容。由于浏览器对CSS属性的支持情况不同，部分属性只有在特定的浏览器中才能够显示相应的效果。下面进行详细讲解。 15.1.1 边框合并属性boder-collapse 边框合并属性（boder-collapse），用来定义表格中边框是独立显示还是合并显示。在边框合并属性中，使用的属性值有两个，separate、collapse。 15.1.2 表格边框间距属性border-spacing 表格边框间距属性（border-spacing），用来定义表格中独立边框之间的距离。在表格边框间距属性中，使用的属性值是长度值。 15.1.2 表格边框间距属性border-spacing 15.1.3 表格标题位置属性caption-side 表格标题位置属性（caption-side），用来定义表格中标题元素caption显示的位置。在表格标题位置属性中，可以使用4个属性值：top、right、bottom、left。 15.1.4 表格布局属性table-layout 表格布局属性（table-layout），用来定义表格和表格内容之间的关系。在表格布局属性中，可以使用两个属性值：auto和fixed，其语法结构如下所示。 table-layout : auto | fixed; 15.1.4 表格布局属性table-layout 15.2 单元格的制约关系 在使用表格元素的时候，通过定义CSS样式，可以控制单元格的高度、宽度等显示效果。当在某个单元格中定义了相应的属性，与该单元格相邻的单元格也将会受到影响。同时当多个单元格中，定义的高度和宽度与表格高度、宽度发生矛盾时，表格中单元格也会做相应的调整。其中具体的内容，如下所示。 15.2.1 确定单行或列的宽度或高度 在使用表格元素的时候，由于表格中存在多个行或列，同时在每个单元格中都可以定义宽度和高度。当在某一列中，单元格中定义的宽度不同（并且不超过表格的宽度）时，会使用较大的宽度值。但是在某一行中，当定义某个单元格的高度属性值时，如果其他行没有定义任何高度属性，则按照最小的高度显示。 15.2.2 确定多行或列的宽度或高度 如果再同个行或列中，每个单元格中都定义了宽度或者高度属性值。并且所有单元格宽度或高度之和与表格的宽度或高度不相等。此时每个单元格，将按照各自定义的宽度比例确定最终的宽度。而在高度方面，每个单元格均保持各自的高度。 15.2.2 确定多行或列的宽度或高度 15.2.3 单元格与嵌套的div元素 在制作页面的时候，表格中单元格宽度和高度之间存在着制约的关系。当某个单元格内容变动的时候，相关联的行或列都会自动的适应单元格的变化。 15.3 本章习题 一．选择题。 二．填空题。 三．实战练习。