博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
table边框设置
阅读量:6371 次
发布时间:2019-06-23

本文共 1687 字,大约阅读时间需要 5 分钟。

一、表格的常用属性

基本属性有:width(宽度)、height(高度)、border(边框值)、cellspacing(表格的内宽,即表格与tr之间的间隔)、 cellpadding(表格内元素的间隔,即tr与tr之间的间隔)、bordercolorlight(表格的亮边框颜色)、 bordercolordark(表格的暗边框颜色)、bgcolor(表格的背景色)、background(表格的背景图片)、 bordercolor(表格边框的颜色),

二、table边框单线的实现方法

现在给出效果图:

1、实现方法一:

<table border="0" cellspacing="1" style="
实现原理:利用table的单元格之间的间距(cellspacing)和table的背景色来实现

2、实现方法二:

<table border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;"><tr>

 

<td style="border: solid 1px #a0c6e5; height: 20px;">

</td>

<td style="border: solid 1px #a0c6e5; height: 20px;">

</td>

<td style="border: solid 1px #a0c6e5; height: 20px;">

</td>

</tr>

</table>

实现原理:利用table的border,bordercolor="#a0c6e5"实现table的边框,但是此时的边框太粗,

这时就可以用到style属性里的border-collapse:collapse样式

 

二、表格内部分隔线的属性

起作用的是rules这个参数,它有三个值(cols,rows,none),当rules=cols时,表格会隐藏横向的分隔线,也就是我们只能看到表 格的列;当rules=rows时,就隐藏了纵向的分隔线,也就是我们只能看到表格的行;而当rules=none时,纵向分隔线和横向分隔线将全部隐 藏,我们就只能看到一个表格的外框了。看一下下面的对比效果你就会明白的

a
b
c
a
b
c
a
b
c
这是最普通的表格形式
a
b
c
a
b
c
a
b
c
这是隐藏了横向分隔线的表格,即rules=cols
a
a
a
b
b
b
c
c
c
这是隐藏了纵向分隔线的表格,即rules=rows
a
b
c
a
b
c
a
b
c
这是隐藏了所有内部分隔线的表格,即rules=none

 

 

 

 

 

 

 

三、表格外部分隔线的属性

表格外边框的显示与隐藏,是可以用frame参数来控制的。注意:只对表格的外边框起作用,对内部边、线不起作用
只显示上边框 <table frame=above>
只显示下边框 <table frame=below>
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void> 

a
b
c
a
b
c
a
b
c
这是最普通的表格形式
a
b
c
a
b
c
a
b
c
这是只显示上边框的表格,即frame=above
a
b
c
a
b
c
a
b
c
这是只显示下边框的表格,即frame=below
a
b
c
a
b
c
a
b
c
这是只显示左、右边框的表格,即frame=vsides
a
b
c
a
b
c
a
b
c
这是只显示上、下边框的表格,即frame=hsides
a
b
c
a
b
c
a
b
c
这是只显示左边框的表格,即frame=lhs
a
b
c
a
b
c
a
b
c
这是只显示右边框的表格,即frame=rhs
a
b
c
a
b
c
a
b
c
这是不显示任何边框的表格,即frame=void

转载地址:http://rxuqa.baihongyu.com/

你可能感兴趣的文章
css知多少(11)——position
查看>>
【Spring】定时任务详解实例-@Scheduled
查看>>
先有的资源,能看的速度看,不能看的,抽时间看。说不定那天就真的打不开了(转)...
查看>>
哪些领域适合开发微信小程序
查看>>
谁说数据库防火墙风险大?可能你还不知道应用关联防护
查看>>
ASP.NET Core应用针对静态文件请求的处理[2]: 条件请求与区间请求
查看>>
怎样做一个企业?尤其是在这个互联网时代
查看>>
DVNA:Node.js打造的开源攻防平台
查看>>
17个案例带你3分钟搞定Linux正则表达式
查看>>
Java 8 比较器:如何对 List 排序
查看>>
苹果是否步思科后尘折戟中国
查看>>
漏洞预警!微软曝光震网三代漏洞,隔离网面临重大危机
查看>>
协鑫集成第二批1000台E-KwBe光伏储能设备即将启运澳洲
查看>>
爱立信物联网广州路演
查看>>
云计算企业业绩分化明显 9家上市公司中期预喜
查看>>
《VMware Virtual SAN权威指南(原书第2版)》一3.5 可能发生的网络配置问题
查看>>
SK电讯发布Q2财报 净利润同比下降26.9%
查看>>
零售品牌如何驾驭大数据主导商业决策?
查看>>
经济模式UPS在数据中心的应用(上)
查看>>
Intel首款32核Xeon E5 v5跑分曝光:史上最强
查看>>