CSS控制表格元素的

《CSS控制表格元素的》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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-spacing15.1.3表格标题位置属性caption-side表格

3、标题位置属性（caption-side），用来定义表格中标题元素显示的位置。在表格标题位置属性中，可以使用4个属性值：top、right、bottom、left。15.1.4表格布局属性table-layout表格布局属性（table-layout），用来定义表格和表格内容之间的关系。在表格布局属性中，可以使用两个属性值：auto和fixed，其语法结构如下所示。table-layout:auto

4、fixed;15.1.4表格布局属性table-layout15.2单元格的制约关系在使用表格元素的时候，通过定义CSS样式，可以控制单元格的高度、宽度等显示效果

5、。当在某个单元格中定义了相应的属性，与该单元格相邻的单元格也将会受到影响。同时当多个单元格中，定义的高度和宽度与表格高度、宽度发生矛盾时，表格中单元格也会做相应的调整。其中具体的内容，如下所示。15.2.1确定单行或列的宽度或高度在使用表格元素的时候，由于表格中存在多个行或列，同时在每个单元格中都可以定义宽度和高度。当在某一列中，单元格中定义的宽度不同（并且不超过表格的宽度）时，会使用较大的宽度值。但是在某一行中，当定义某个单元格的高度属性值时，如果其他行没有定义任何高度属性，则按照最小的高度显示。15.2.2确定多行或列的宽度或高度如果再同个行或列中，每个单元格中都定义了宽

6、度或者高度属性值。并且所有单元格宽度或高度之和与表格的宽度或高度不相等。此时每个单元格，将按照各自定义的宽度比例确定最终的宽度。而在高度方面，每个单元格均保持各自的高度。15.2.2确定多行或列的宽度或高度15.2.3单元格与嵌套的