表格table tr td CSS花色设置 给table表格设置CSS花式表
在一个网页中多处运用了表格table标签,这个时候给指定的表格对象设置装备摆设款式仿照照旧概略经由CSS发展管束配置。
着实无意偶尔我们这样考虑将table标签当作DIV标签来机关设置装备摆设CSS,就变得简单多了。
一、对table设置技俩
1、经由对应table父级格式定名指定对象内table格局
1)、案例完整HTML+CSS代码
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta charset="utf-8" />
- <title>指定对象内table设置款式</title>
- <style>
- .CSS5{ width:400px}
- .CSS5 table{ background:#CCC; color:#F00}
- .CSS5 table td{ bac千克round:#FFF}
- </style>
- </head>
- <body>
- <div class="CSS5">
- <table width="100%" border="0" cellspacing="1" cellpadding="0">
- <tr>
- <td>模式一</td>
- <td>内容一</td>
- <td>模式一</td>
- </tr>
- <tr>
- <td>内容二</td>
- <td>内容</td>
- <td>内容</td>
- </tr>
- </table>
- </div>
- </body>
- </html>
2)、案例截图
指定对象内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代码如下:
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta charset="utf-8" />
- <title>指定对象内table td设置装备摆设名堂</title>
- <style>
- .div-td{ width:400px}
- .div-td table td{ background:#CCC; color:#000; line-height:40px}
- </style>
- </head>
- <body>
- <div class="div-td">
- <table width="100%" border="0" cellspacing="1" cellpadding="0">
- <tr>
- <td>模式一</td>
- <td>内容一</td>
- <td>形式一</td>
- </tr>
- <tr>
- <td>内容二</td>
- <td>形式</td>
- <td>模式</td>
- </tr>
- </table>
- </div>
- </body>
- </html>
2、截图:
对指定表格里td设置名堂成绩截图
以上颠末CSS指向,配置指定对象里table的td款式。
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/jiqiao/j52718.shtml