我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

Css基本样式————表格-创新互联

a.Css表格属性可以帮助我们极大地改善表格的外观

为武昌等地区用户提供了全套网页设计制作服务,及武昌网站建设行业解决方案。主营业务为网站设计、做网站、武昌网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

b.表格边框


    
        
        
        
    
    
        
        
        
    
    
        
        
        
    
    
        
        
        
    
姓名年龄性别
小王20
小王20
小王20

这样可以生成一个没有边框效果的表格

此时可以给表格添加一个边框

但是这种写法并不能应用于所有的table当中

因此可以选择使用Css样式作为一种更好的方式


#tb{
    border: 1px solid blue;
}

这时可以看到表格最外层的蓝色的外边框

可以设置表格内部:

#tb,tr,th,td{
    border: 1px solid blue;
}

这里用到了分组选择器。即一个id选择器和3个元素选择器组合在一起,之间用逗号隔开

c.折叠边框

在上面的表格中显示的是双边框

这样显然是不合理的

可以把双边框合成一条线

#tb,tr,th,td{
    border: 1px solid blue;
    border-collapse: collapse;
}

d.表格宽高

#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
}

e.表格文本对齐

#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
    text-align:center;
}

f.表格内边距

g.表格颜色

#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
    text-align:center;
    background-color: aqua;
}

创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。


文章标题:Css基本样式————表格-创新互联
地址分享:http://shouzuofang.com/article/coggdi.html

其他资讯