css边框线样式,html边框线型

怎么用CSS设置网页table边框样式

对table设置css样式边框,分为几种情况:

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:空间域名、雅安服务器托管、营销软件、网站建设、爱辉网站维护、网站推广。

1、只对table设置边框

2、对td设置边框

3、对table和td技巧性设置表格边框

4、对table和td设置背景,实现完美表格边框

以下DIVCSS5对以上几种实现html 表格边框样式进行讲解与案例演示。为了便于观察,divcss5均设置所有案例表格为1px实线红色边框为例;table宽度为400px;表格为三列三行,对以上四种情况表格外层加个div盒子,分别CSS命名为“.table-a”、“.table-b”、“.table-c”、“.table-d”。

一、只对表格table标签设置边框 - TOP

只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式。

案例详细如下:

1、对应css代码

style .table-a table{border:1px solid #F00} /* css注释:只对table标签设置红色边框样式 */ /style

2、对应html代码片段

div class="table-a" table width="400" border="0" cellspacing="0" cellpadding="0" tr td width="105"站名/td td width="181"网址/td td width="112"说明/td /tr tr tdDIVCSS5/td td;/td tdCSS学习/td /tr tr tdCSS5/td td;/td tdCSS切图/td /tr /table /div

二、对td设置边框 - TOP

对table表格td设置边框样式,表格对象内td将实现边框样式,但中间部分td会导致出现双边框。

详细案例教程如下:

1、对应css代码

style .table-b table td{border:1px solid #F00} /* css注释:只对table td标签设置红色边框样式 */ /style

2、对应html源代码片段

div class="table-b" table width="400" border="0" cellspacing="0" cellpadding="0" tr td width="105"站名/td td width="181"网址/td td width="112"说明/td /tr tr tdDIVCSS5/td td;/td tdCSS学习/td /tr tr tdCSS5/td td;/td tdCSS切图/td /tr /table

三、对table和td技巧性设置表格边框 - TOP

如上第二点,只对表格对象td设置单一边框样式,中间部分td与td标签之间就会出现双边框现象。

解决方法:对td只设置两个边的边框,对table也设置两个边的边框样式。

解释:对td设置左与上边框,这样td与td相邻就会只出现单一边框样式,这样就会出现表格右侧和下部没有边框,这个时候我们设置table右和下 边框解决显示右侧和下侧td剩下未显示边框。

1、对应css代码:

style .table-c table{border-right:1px solid #F00;border-bottom:1px solid #F00} .table-c table td{border-left:1px solid #F00;border-top:1px solid #F00} /* css 注释: 只对table td设置左与上边框; 对table设置右与下边框; 为了便于截图,我们将css 注释说明换行排版 */ /style

2、对应html源代码片段:

div class="table-c" table width="400" border="0" cellspacing="0" cellpadding="0" tr td width="105"站名/td td width="181"网址/td td width="112"说明/td /tr tr tdDIVCSS5/td td;/td tdCSS学习/td /tr tr tdCSS5/td td;/td tdCSS切图/td /tr /table

css怎么 设置table的边框样式

代码示例 .a {border:#000 3px solid;其中CSS中border属性为边框线属性 第一个值设置边框线颜色,可为颜色英文单词或16进制代码 第二个值设置边框线粗细 第三个值设置线体样式 solid为实线 dotted为点线 double为双边框线 还有个虚线

怎么用CSS设置html中的表格边框样式

设置表格的样式可以直接使用css的border样式来设置的。

工具原料:编辑器、浏览器

1、设置一个表格的外边框为红色,内边框的为黄色,代码如下:

body 

table

tr

td知道/td

td知道/td

td知道/td

/tr

tr

td知道/td

td知道/td

td知道/td

/tr

tr

td知道/td

td知道/td

td知道/td

/tr

/table

style

table {

border:1px solid red;

}

td{

border: 1px solid yellow;

}

/style

/body

2、运行的效果如下:

css表格的边框线怎么设置

border-collapse 属性:设置表格的边框是否被合并为一个单一的边框,即:用于设置表格边框是合并显示还是分开显示。

border-collapse 属性设置表格的边框是否被合并为一个单一的边框。它有以下几个值:

-- separate 默认值:边框会被分开,不会忽略 border-spacing 和 empty-cells 属性;

-- collapse:如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性;

-- inherit:规定应该从父元素继承 border-collapse 属性的值。

双线表格边框的实现

html代码:

table

tr

td内容/tdtd内容/tdtd内容/tdtd内容/tdtd内容/td

/tr

tr

td内容/tdtd内容/tdtd内容/tdtd内容/tdtd内容/td

/tr

tr

td内容/tdtd内容/tdtd内容/tdtd内容/tdtd内容/td

/tr

tr

td内容/tdtd内容/tdtd内容/tdtd内容/tdtd内容/td

/tr

/table

css代码:

table,table td{

text-align: center;

border: 1px solid #000;

border-collapse:separate;

}

table td{

padding: 10px 30px;

}

表格边框的双线样式其实很简单,只要同时设置表格外边框和table里的每个单元格的边框,就可以实现了。

因为separate是默认值,就算是不设置border-collapse:separate;表格也会呈现双线效果。

我们主要是来看看border-collapse属性合并边框,实现单线边框的方法,html代码一样,只需设置css样式:

css代码:

table,table tr td {

border: 1px solid #000;

text-align: center;

border-collapse: collapse;

}table tr td {

padding: 10px 30px;

}

单线边框的实现也很简单,它是在双线样式的基础上,设置border-collapse: collapse;

把相邻的两个table边框合并成一个,使得相邻的两条线并在一起,边框就以单线的形式显示了。

总结:表格边框的无论是单线边框样式,还是双线边框样式都在前端页面中应用广泛,大家可以根据自己

【css】边框border的属性和使用方法

顾名思义,就是元素外面的一圈边框,下图中虚线圈起的部分是内容,外面橙色的一圈是它的边框,可以理解成在照片外面加一个相框,使用border属性。

边框样式border-style必须写!否则其它属性全部失效。

边框的样式:

border后面可跟多个值,中间用空格分离,含义如下:

注意顺序, 边框样式不可省略 ,颜色和宽度可以省略,会显示默认的效果。

——以上规律在padding和margin一样适用。

边框样式border-style必须设置

如果我们的四条边框属性都是一样的,那么统一设置就可以啦,注意边框类型不可省略。

首先我们放置一个宽高为200px的粉色盒子。

接下来我们为它加上一条宽度为10px,样式为实线,颜色为红色的边框。

我们可以看到,添加边框的时候,是在盒子外面套一圈边框,而不是加在里面,在Chrome浏览器中点击右键检查,可以看到div的大小变成了220x220。

套在外面的边框的宽度是会加进盒子尺寸的(上下左右各增加了10px),如果我们想盒子保持大小不变,要对div本身的width和height进行减小,在这个样例中,通过计算可得,减少到180px即可保持大小不变。

当我们使用点状、虚线等边框样式时,多出来的缝隙,会使用元素本身的 背景颜色 填充。

点和虚线的具体样式,不同浏览器中可能会不一样。

我们为刚刚的盒子设置上边框为红色,左边框为绿色,效果如下图所示:

我们会发现在两条边框交界处的小方块,通过一条对角线分隔,上边框和左边框各占一半。当边框不一样宽时,同样也是用对角线把交界处的小长方形一分为二,如下图所示:

当被添加边框的元素宽度为0,不设置高度(高度默认是0)的情况下,我们可以巧妙利用 边框组合 和 transparent(透明) 绘制三角形,可以体验下哦。

三角形1-css:

三角形2-css:

多彩三角形-css:

绘制梯形只要对应添加宽度或者高度就可以啦

梯形1-css:

梯形2-css:

CSS border(边框)样式写法总结

border属性 :在网页中设置元素的边框样式。可同时设置边框宽度、边框样式、边框颜色。也可以单独设置上边、右边、下边、左边的边框。

语法:border: border-width | border-style | border-color;

border-width :边框宽度。可以指定长度值。如1px,1em(单位为px,pt,em等)。或者使用关键字medium(默认),thick,thin。

 border-top-width:设置元素上边框宽度

 border-right-width:设置元素右边框宽度

 border-bottom-width:设置元素下边框宽度

 border-left-width:设置元素左边框宽度

border-style :边框样式。

 border-top-style:设置元素上边框样式

 border-right-style:设置元素右边框样式

 border-bottom-style:设置元素下边框样式

 border-left-style:设置元素左边框样式

 属性值有:

  none:无边框。

  hidden:隐藏边框。对于表,hidden 用于解决边框冲突。

  dotted:点状边框。

  dashed:虚线边框。

  solid:实线边框。

  double:双线边框。两条单线与其间隔的和等于指定的border-width值。

  groove:3D凹槽边框。

  ridge:3D垄状边框。

  inset:凹边框。

  outset:凸边框。

border-color :边框颜色。

1.1 边框各样式效果图

1.2 四条边颜色样式相同

1.3 四条边颜色不同,样式相同

1.4 四条边颜色相同,样式不同

1.5 设置上边框宽度、样式、颜色

1.6 设置右边框宽度、样式、颜色

1.7 设置下边框宽度、样式、颜色

1.8 设置左边框宽度、样式、颜色

以上对border边框属性进行了基础操作,大家可以根据自己的经验为边框制作出更漂亮的样式。如若大家有什么更好的见解,那就在回复区畅所欲言吧,我定会吸取精华~如有写错欢迎大家回复,我以后定会更加细心 _


文章题目:css边框线样式,html边框线型
文章出自:http://scjbc.cn/article/dscdcop.html

其他资讯