欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

表格table tr td CSS花色设置 给table表格设置CSS花式表

在一个网页中多处运用了表格table标签,这个时候给指定的表格对象设置装备摆设款式仿照照旧概略经由CSS发展管束配置。

着实无意偶尔我们这样考虑将table标签当作DIV标签来机关设置装备摆设CSS,就变得简单多了。

一、对table设置技俩

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. .CSS5{ width:400px} 
  8. .CSS5 table{ background:#CCC; color:#F00} 
  9. .CSS5 table td{ bac千克round:#FFF} 
  10. </style>
  11. </head>
  12. <body>
  13. <div class="CSS5">
  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配置零丁id或class

多处运用table表格机关,这个时分假定直接对table标签配置花色,这个时候网页中table表格结构均会受设置装备摆设。这个时刻只紧要对table加id或class设置装备摆设便可分辨性对table配置重要CSS款式。

二、对表格td设置装备摆设CSS

在表格网页组织中,一般环境下都必要对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款式。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/jiqiao/j52718.shtml