CSS控制表格元素的.ppt

1、第15章 CSS控制表格元素的显示,表格元素，一般用来显示矩阵格式的数据。在CSS中，可以通过相应的表现属性，来定义表格元素的表现效果。除了可以定义表格的边框、补白、边界等属性之外，还可以使用表格独有的CSS属性，例如边框合并属性（border-collapse）等，对表格进行进一步的控制。通过本章学习，应该掌握以下知识要点： 熟悉CSS控制表格元素边框的各个属性及其应用。 属性单元格的制约关系。 精确控制表格与单元格的大小。,15.1 控制表格元素的显示,在CSS中，表格元素的控制，包括控制表格边框是否合并、控制表格边框间距、表格标题位置等几个方面的内容。由于浏览器对CSS属性的支持情况不同

2、，部分属性只有在特定的浏览器中才能够显示相应的效果。下面进行详细讲解。,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,表

3、格标题位置属性（caption-side），用来定义表格中标题元素显示的位置。在表格标题位置属性中，可以使用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样式，可以控制单元格的高度、宽度等显示效果。当在某

4、个单元格中定义了相应的属性，与该单元格相邻的单元格也将会受到影响。同时当多个单元格中，定义的高度和宽度与表格高度、宽度发生矛盾时，表格中单元格也会做相应的调整。其中具体的内容，如下所示。,15.2.1 确定单行或列的宽度或高度,在使用表格元素的时候，由于表格中存在多个行或列，同时在每个单元格中都可以定义宽度和高度。当在某一列中，单元格中定义的宽度不同（并且不超过表格的宽度）时，会使用较大的宽度值。但是在某一行中，当定义某个单元格的高度属性值时，如果其他行没有定义任何高度属性，则按照最小的高度显示。,15.2.2 确定多行或列的宽度或高度,如果再同个行或列中，每个单元格中都定义了宽度或者高度属性值。并且所有单元格宽度或高度之和与表格的宽度或高度不相等。此时每个单元格，将按照各自定义的宽度比例确定最终的宽度。而在高度方面，每个单元格均保持各自的高度。,15.2.2 确定多行或列的宽度或高度,15.2.3 单元格与嵌套的元素,在制作页面的时候，表格中单元格宽度和高度之间存在着制