网站地图    收藏   

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

2)、案例截图

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

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

2、通过对table设置单独idclass

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

二、对表格td设置CSS   -   TOP

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

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


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

2、截图:

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

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

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

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论