CSS表格

指定一个表的Th,TD元素和黑色边框



	
		 
		自学教程(如约智惠.com) 
		
	
	
		
Firstname Lastname
Peter Griffin
Lois Griffin

使用border-collapse



	
		 
		自学教程(如约智惠.com) 
		
	
	
		
Firstname Lastname
Peter Griffin
Lois Griffin

注意: 如果没有指定 !DOCTYPE border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。

指定表格的宽度和高度



	
		 
		自学教程(如约智惠.com) 
		
	
	
		
Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250

设置内容的水平对齐方式(文本对齐)



	
		 
		自学教程(如约智惠.com) 
		
	
	
		
Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250

设置内容的垂直对齐(垂直对齐)



	
		 
		自学教程(如约智惠.com) 
		
	
	
		
Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250

指定TH和TD元素的填充



	
		 
		自学教程(如约智惠.com) 
		
	
	
		
Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250

指定表格边框的颜色



	
		 
		自学教程(如约智惠.com) 
		
	
	
		
Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250

指定表格标题的位置



	
		 
		自学教程(如约智惠.com) 
		
	
	
		
Table 1.1 Customers
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
North/South Simon Crowther UK

注意:如果 !DOCTYPE 指定 IE 8 支持 caption-side 属性 .

创建一个奇特的表



	
		 
		自学教程(如约智惠.com) 
		
	
	
		
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
North/South Simon Crowther UK
Paris spécialités Marie Bertrand France

参考:

https://www.yuque.com/docs/share/5c252603-873c-4f5c-9cc9-44e46c2ecf5f

你可能感兴趣的:(CSS,CSS,实例)