CSS表格样式设置方法

07-01 13:01 854浏览

举报 T字号

大字

中字

小字

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

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

有时我们这样想将表格标签当作DIV标签来布局设置CSS，就可以简单的收集起来。

对表格设置样式

1.通过对应表父级样式指定对象内表样式

(1)案例完整HTML +CSS代码

<!DOCTYPE html > 
< html xmlns = "http://www.w3.org/1999/xhtml" >  
<头> 
<元字符集= "utf-8" />   
< title >指定对象内表设置样式</ title > 
<风格> 
.divcss5{ 宽度：400px} 
.divcss5 表{背景：#CCC；颜色：#F00} 
.divcss5 表 td{ 背景：#FFF} 
</风格> 
</头> 
<身体> 
< div类= “divcss5” >  
<表格宽度= “100%”边框= “0” cellpacing = “1” cellpadding = “0” >     
< tr > 
< td >内容一</ td > 
< td >内容一</ td > 
< td >内容一</ td > 
</ tr > 
< tr > 
< td >内容二</ td > 
< td >内容</ td > 
< td >内容</ td > 
</ tr > 
</表> 
</ div > 
</正文> 
</ html >

(2)案例截图

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

(3)小结：

以上通过父级指定table和td进行CSS样式设置。

2.通过对表设置单独id或class

多处使用表格表格表格，这个时候如果直接对表格标签设置样式，这个时候网页中表格会统一接受设置。

对表格td设置CSS

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

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

<!DOCTYPE html > 
< html xmlns = "http://www.w3.org/1999/xhtml" >  
<头> 
<元字符集= "utf-8" />   
< title >指定对象内表td设置样式</ title > 
<风格>  
.div-td{ 宽度：400px} 
.div-td 表 td{ 背景：#CCC; 颜色：#000；行高：40px} 
</风格> 
</头> 
<身体> 
< div类= “div-td” >  
<表格宽度= “100%”边框= “0” cellpacing = “1” cellpadding = “0” >     
< tr > 
< td >内容一</ td > 
< td >内容一</ td > 
< td >内容一</ td > 
</ tr > 
< tr > 
< td >内容二</ td > 
< td >内容</ td > 
< td >内容</ td > 
</ tr > 
</表> 
</ div > 
</正文> 
</ html >

2.截图：

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

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

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

动力节点在线课程涵盖零基础入门，高级进阶，在职提升三大主力内容，覆盖Java从入门到就业提升的全体系学习内容。全部Java视频教程免费观看，相关学习资料免费下载!对于火爆技术，每周一定时更新!如果想了解更多相关技术，可以到动力节点在线免费观看CSS视频教程学习哦!

0人推荐

共同学习，写下你的评论

0条评论

代码小兵652

113篇文章贡献392215字

CSS表格样式设置方法

对表格设置样式

对表格td设置CSS

相关课程更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

CSS表格样式设置方法

对表格设置样式

对表格td设置CSS

相关课程 更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

相关课程更多>