css写表格 table的高级属性

作用：显示数据

（一）关于表格的css属性

1、单元格间距（该属性必须给table添加）

border-spacing:value;

2、合并相邻单元格边框

border-collapse:separate（边框分开）/collapse（边框合并）

3、无内容单元格显示、隐藏

empty-cells：show（显示）/hide（隐藏）

4、表格布局算法（加快运行的速度）

table-layout:auto/fixed（固定宽度，不会随内容多少改变单元格宽度）

必须在table上写这个  不然单元格的宽度会随内容变多而撑大

在表格中 即使给td宽度  单元格的大小也会因为它内容增多而撑大

在html中 全部写英文  浏览器会默认这全部是一个英文单词 

5、表格标题

标题内容

表格标题位置：caption-side:top/right/bottom/left

说明：left,right,top,bottom位置只有火狐识别，top,bottom IE7以上版本支持，IE7及以下版本不支持其他属性值，只识别top

6、表格布局元素

表格基本组成

table（表格）  tr（行） td（列）

th 表格列标题（放在tr里）

给表单写边框注意细节

在表格里面  tr单独给边框   table和td不给边框   表格是不会显示出边框的 如下写就可以在tr里写边框

tr{border: 1px solid #d6d6d6;}

table{border-collapse:collapse;}

效果如下

在表格里空的单元格必须用 ；代替  不然就会出现bug

html里tabled的重要属性

1）

colspan="所要合并的单元格的列数"  横向合并

rowspan="所要合并的单元格的行数"  纵向合并

2）   水平对齐方式：align="left/center/right"；

3）  垂直对齐方式：valign="top/middle/bottom"；

4）rules="rows/cols/all/none/groups"添加分隔线

说明：

rows：位于行之间的线条

cols：位于列之间的线条

all：位于行和列之间的线条  

none：没有线条

groups：位于行组和列组之间的线条

 

2、数据行分组

 表头

 表体

 表尾

说明：一个table中，只能包含一个thead，一个tfoot，但可包含多个tbody。

 

3、数据列分组

 

说明：

1）col和colgroup元素会根据从左到右的顺序依次对数据表格进行列分组

2）span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组

3）可以通过给table添加rules="groups"属性来给分组列添加组分割线

注意：虽然col和colgroup具有相同的功能，但是，我们只能使用colgroup元素来决定表格内容部分割线（rules）应该处于的位置，而col没有这个功能

 

 

4、css伪类选择器：

nth-child() ：nth-child(5)选择器匹配属于其父元素的第N个子元素，不论元素的类型。

odd 奇数  even 偶数

IE8不识别

ie浏览器的识别方法

eg：tbody tr:nth-child(odd){background:#fef0f5;}   tbody下的行数为奇数的行

可以看下  nth-child（）选择器的效果案例  直接复制

	
	
	
	



	
	

		
aaaaaaa
		
aaaaaaa
		
aaaaaaa
		
aaaaaaa
		
aaaaaaa
		
aaaaaaa
	
	

		
h1
		
h2
		
ppppppppp
		
h2
		
pppppppp