网站地图    收藏   

子栏目

主页 > 前端 > css教程 >

表格CSS样式设置 给table表格设置CSS样式表

来源：未知    时间：2014-10-30 10:00 作者：xxadmin 阅读:次

[导读] 表格table tr td CSS样式设置 给 table 表格设置 CSS样式表 在一个网页中多处使用了表格 table标签 ，这个时候给指定的表格对象设置样式依然可以通过 CSS 进行控制设置。 其实有时我们这样...

表格table tr td CSS样式设置 给table表格设置CSS样式表

在一个网页中多处使用了表格table标签，这个时候给指定的表格对象设置样式依然可以通过CSS进行控制设置。

其实有时我们这样思考将table标签当作DIV标签来布局设置CSS，就变得简单多了。

一、对table设置样式   -   TOP

1、通过对应table父级样式命名指定对象内table样式

1）、案例完整HTML+CSS代码



    
	
  1. 
		<!DOCTYPE html> 
    2. 
	
  2. 
		<html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
	
  3. 
		<head> 
    4. 
	
  4. 
		<meta charset="utf-8" /> 
    5. 
	
  5. 
		<title>指定对象内table设置样式</title> 
    6. 
	
  6. 
		<style> 
    7. 
	
  7. 
		.divcss5{ width:400px} 
    8. 
	
  8. 
		.divcss5 table{ background:#CCC; color:#F00} 
    9. 
	
  9. 
		.divcss5 table td{ background:#FFF} 
    10. 
	
  10. 
		</style> 
    11. 
	
  11. 
		</head> 
    12. 
	
  12. 
		<body> 
    13. 
	
  13. 
		<div class="divcss5"> 
    14. 
	
  14. 
		<table width="100%" border="0" cellspacing="1" cellpadding="0"> 
    15. 
	
  15. 
		<tr> 
    16. 
	
  16. 
		<td>内容一</td> 
    17. 
	
  17. 
		<td>内容一</td> 
    18. 
	
  18. 
		<td>内容一</td> 
    19. 
	
  19. 
		</tr> 
    20. 
	
  20. 
		<tr> 
    21. 
	
  21. 
		<td>内容二</td> 
    22. 
	
  22. 
		<td>内容</td> 
    23. 
	
  23. 
		<td>内容</td> 
    24. 
	
  24. 
		</tr> 
    25. 
	
  25. 
		</table> 
    26. 
	
  26. 
		</div> 
    27. 
	
  27. 
		</body> 
    28. 
	
  28. 
		</html> 
    29. 




	2）、案例截图



	指定对象内table和td设置CSS样式案例效果 指定对象内table和td设置CSS样式案例效果截图



	3）、小结： 以上通过父级指定table和td进行CSS样式设置。



	2、通过对table设置单独id或class



	多处使用table表格布局，这个时候如果直接对table标签设置样式，这个时候网页中table表格布局均会受设置。这个时候只需要对table加id或class设置即可区别性对table设置需要CSS样式。



	二、对表格td设置CSS   -   TOP



	在表格网页布局中，一般情况下都需要对td设置样式，比如对td设置行高，padding等均是有效果的。



	1、完成HTML+CSS代码如下：




    
	
  1. 
		<!DOCTYPE html> 
    2. 
	
  2. 
		<html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
	
  3. 
		<head> 
    4. 
	
  4. 
		<meta charset="utf-8" /> 
    5. 
	
  5. 
		<title>指定对象内table td设置样式</title> 
    6. 
	
  6. 
		<style> 
    7. 
	
  7. 
		 
    8. 
	
  8. 
		.div-td{ width:400px} 
    9. 
	
  9. 
		.div-td table td{ background:#CCC; color:#000; line-height:40px} 
    10. 
	
  10. 
		</style> 
    11. 
	
  11. 
		</head> 
    12. 
	
  12. 
		<body> 
    13. 
	
  13. 
		<div class="div-td"> 
    14. 
	
  14. 
		<table width="100%" border="0" cellspacing="1" cellpadding="0"> 
    15. 
	
  15. 
		<tr> 
    16. 
	
  16. 
		<td>内容一</td> 
    17. 
	
  17. 
		<td>内容一</td> 
    18. 
	
  18. 
		<td>内容一</td> 
    19. 
	
  19. 
		</tr> 
    20. 
	
  20. 
		<tr> 
    21. 
	
  21. 
		<td>内容二</td> 
    22. 
	
  22. 
		<td>内容</td> 
    23. 
	
  23. 
		<td>内容</td> 
    24. 
	
  24. 
		</tr> 
    25. 
	
  25. 
		</table> 
    26. 
	
  26. 
		</div> 
    27. 
	
  27. 
		</body> 
    28. 
	
  28. 
		</html> 
    29. 




	2、截图：



	对指定表格里td设置样式效果 对指定表格里td设置样式效果截图



	以上通过CSS指向，设置指定对象里table的td样式。



	发散思维：如果想特定表格td设置不同CSS样式，可以对td再加class实现不同样式设置。


                    
                    

                		
            

        
 
          
          
    
          
          
 

              
        


        

            

                
最新评论

                

                
    
                
    
                    加载更多~~
                
    
                
    
            
    
            
            
    
                
    添加评论
    
                
    
                    
    
                  
                        
                        
    
                        
    
                        
                    
                
    
                
    
                    
                
    
            
    
            

        
    

        
    
            
    更多文章推荐
    
            
        
    
                
        
    
    

    
    
      
    
    
    

    
    




    


    
    	
    
            
    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
    
            
    京ICP备14009008号-1@版权所有www.zixuephp.com
    
            
    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
    
        
    

    


    
    
    
    
        
    添加评论