课程主题 使用表格列表及定位属性美化网页-网页客户端技术 课程-1728973778717.pptx

;使用表格、列表及定位属性美化网页;五;表格属性;border-collapse属性

表格的边框默认是双线条边框，这是因为table、th、td元素都有独立的边框。如果需要将表格显示为单线条边框，可以使用border-collapse，设置是否将表格边框折叠为单一边框。

基本语法：border-collapse：collapse|separate|inherit

;border-collapse属性

语法说明：

collapse，如果可能，边框会合并为一个单一的边框。会忽略border-spacing和empty-cells属性；

separate，边框会被分开。不会忽略border-spacing和empty-cells属性，默认值；

inherit，规定应该从父元素继承border-collapse属性的值。

例如，以下代码设置表格的边框为单一边框：

table,td,th{border:1pxsolidblack;border-collapse:collapse;};border-spacing属性

border-spacing属性设置相邻单元格到边框间的距离（仅用于“边框分离”模式）。

基本语法：border-spacing：长度|inherit

语法说明：

长度规定相邻单元的边框之间的距离。使用px、cm等单位。不允许使用负值。长度可以定义2个值，如果只取1个值，那么定义的是水平和垂直间距。如果取2个值，第1个设置水平间距，第2个设置垂直间距；

Inherit，规定应该从父元素继承border-spacing属性的值。

例如，以下代码设置类名为one的表格的单元格到边框的距离为10px：

table.one{border-collapse:separate;border-spacing:10px};caption-side属性

caption-side属性设置表格标题相对于表框的位置。表标题显示为好像它是表之前（或之后）的一个块级元素。

基本语法：caption-side：top|bottom|inherit

语法说明：

top，把表格标题定位在表格之上，默认值；

bottom，把表格标题定位在表格之下；

inherit，规定应该从父元素继承caption-side属性的值。

例如，以下代码设置表格的标题显示在表格的下方。

caption{caption-side:bottom;};empty-cells属性

empty-cells属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）。该属性定义了不包含任何内容的表单元格如何表示。如果显示，就会绘制出单元格的边框和背景。

基本语法：empty-cells：hide|show|inherit

语法说明：

hide，不在空单元格周围绘制边框；

show，在空单元格周围绘制边框，默认值；

inherit，规定应该从父元素继承empty-cells属性的值。

例如，以下代码设置隐藏表格中空单元格上的边框和背景。

table{border-collapse:separate;empty-cells:hide;};table-layout属性

table-layout属性指用来显示表格单元格、行、列的算法规则。算法规则有固定表格布局和自动表格布局。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。

table-layout属性指定了完成表格布局时所用的布局算法。固定布局算法比较快，但是不太灵活，而自动算法比较慢，不过更能反映传统的HTML表格。;基本语法：table-layout：automatic|fixed|inherit

语法说明：

automatic，列宽度由单元格内容设定，默认；

fixed，列宽由表格宽度和列宽度设定；

inherit，规定应该从父元素继承table-layout属性的值。

例如，以下代码第1行设置了类名为one的表格布局方式为自动布局，第2行设置了类名为two的表格布局方式为固定布局。

table.one{table-layout:automatic}

table.two{table-layout:fixed};例2-8使用CSS的表格属性美化网页中表格。

!DOCTYPEhtmlPUBLIC-//W3C//