css去掉表格内边框Word文档下载推荐.docx
《css去掉表格内边框Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《css去掉表格内边框Word文档下载推荐.docx(5页珍藏版)》请在冰豆网上搜索。
然后再为table定义样式:
1001,这样就可做作成一个完整的1px表格了。
例二:
粗边框的1px表格
此表格的内格线为1px而外边框为3px,有了例一的基础做起来就不难了,只要修改border-width值就行了。
对table所使用的样式的代码是:
bluesolid;
3223对td所使用的样式的代码是:
0110例三:
虚线框表格做法和例一类似,border-style从solid改为dashed。
blackdashed;
1001对td所使用的样式的代码是:
0110例四:
点线边框表格注意点线(dotted)的最小象素为2。
greendotted;
20xx对td所使用的样式的代码是:
0220例五:
双线边框表格注意双线(double)的最小象素为3。
teal4double对td所使用的样式的代码是:
teal1solid例六:
outset外框表格
对table所使用的样式的代码是:
3outset对td所使用的样式的代码是:
1solid例七:
inset外框表格对table所使用的样式的代码是:
3inset对td所使用的样式的代码是:
1solid例八:
ridge外框表格对table所使用的样式的代码是:
#ee00003ridge对td所使用的样式的代码是:
1solid例九:
综合使用一这个表格的外框采用的是脊线,内单元格边框是槽线,注意表格插入时cellspacing设为1了。
skyblue4ridge对td所使用的样式的代码是:
navy1groove
例十:
综合使用二别以为这是九个表格,其实他们是一个表格中的九个单元格,由于表格外边框为0,所以你看不到罢了。
只需对td使用样式:
maroon3double,另外别忘了把表格的cellspacing设为1哦。
例十一:
综合使用三此表格的上下左右边框采用了不同的样式,你可以根据喜好自行更改。
purple4;
border-style:
dasheddouble对td所使用的样式的代码是:
1solid例十二:
综合使用四这是一个双线边框的1px表格,和例五比较起来要显得精巧,具体做法是这样的:
1.先做一个1x1的1px表格,并将cellspacing设为1;
2.再做一个3x3的1px表格,将width和height均设为100%;
3.将后做的表格插入先前做的表格中即可。
例十三:
背景边框一:
利用改变cellspacing的值可以把背景做成边框,上面的表格的制作方法是:
1.首先做一个1x1的表格,并设置好背景,将cellspace的值设为3;
2.再做一个3x3的1px表格,width和height均设为100%;
如果你采用一幅会变色的gif动画,那么表格的边框就会自动连续改变颜色。
例十四:
背景边框二这个表格的制作方法和前面一个类似,你肯定能研究出来!
例十五:
3d边框表格这是一个具有3d边框效果的表格,做起来有点窍门。
我们先来学做1x1的:
第一步:
建立两个样式如下:
篇二:
三、使用css处理表格边框样式化
使用css处理表格边框样式化
在以前的web开发栏目中,我介绍了不少处理html表格的方法,尽管现在使用表格来布局网页的方法已经不再时髦了,但是您依然可以使用表格来显示表列数据。
显示和样式化表格的方法有很多种,在这篇文章中,我将介绍使用css对表格边框进行样式化的方法。
链接
css2表格模型是基于html4.01表格模型的。
表格包含了一个可选的锚标记和单元格以及数据行,表格模型包含以下的元素:
表格、锚、数据行、数据行组、数据列、数据列组和单元格。
这篇文章将集中讲解表格中各个元素的边框处理方法。
边框
根据不同的需求,您可以对表格和单元格应用不同的边框。
您可以定义整个表格的边框也可以对单独的单元格分别进行定义。
css的边框属性可以指定边框的大小以及颜色和类型。
以下的代码定义了宽度为5个像素的黑色实线边框:
table{5pxsolidblack;
}
除此以外,您还可以使用相同的语法为表格中单独的单元格分别指定边框属性。
您可以使用以下的属性值来定义边框类型:
lnone:
指定表格没有边框,所以边框宽度为0。
ldotted:
由点线组成的表格边框。
ldashed:
由虚线组成的表格边框。
lsolid:
由实线组成的表格边框。
ldouble:
由双实线组成的表格边框。
lgroove:
槽线效果边框。
lridge:
脊线效果边框,和槽线效果相反。
linset:
内凹效果边框。
loutset:
外凸效果边框,和内凹效果相反。
篇三:
与表格边框有关的css语法
表格是数据的载体,不再是布局的方式,虽然我们不需要表格来进行网页布局了,但很多表格式的数据,还是需要表格这一形式发挥它的作用!
我们知道dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框。
1.上边框宽度以下是引用片段:
语法:
border-top-width:
允许值:
thin|medium|thick|
初始值:
medium
适用于:
所有对象
向下兼容:
否
上边框宽度属性用于指定一个元素上边框的宽度。
值可以是三个关键字其中的一个,都不受字体大小或长度的影响,可以用于实现成比例的宽度。
不允许使用负值。
也可以用在上边框、边框的宽度或边框的属性略写。
2.右边框宽度以下是引用片段:
border-right-width:
右边框宽度属性用于指定元素的右边框的宽度。
也可以用在右边框、边框的宽度或边框的属性略写。
3.下边框宽度以下是引用片段:
border-bottom-width:
下边框宽度属性用于指定元素的下边框的宽度。
也可以用在下边框、边框的宽度或边框的属
性略写。
4.左边框宽度以下是引用片段:
border-left-width:
左边框宽度属性用于指定元素的左边框的宽度。
也可以用在左边框、边框的宽度或边框的属性略写。
5.边框宽度以下是引用片段:
[thin|medium|thick|]{1,4}
未定义
边框宽度属性用一到四个值来设置元素的边界,值是一个关键字或长度。
不允许使用负值长度。
如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。
如果给出一个值,它将被运用到各边上。
如果两个或三个值给出了,省略了的值与对边相等。
这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。
也可以使用略写的边框属性。
6.边框颜色以下是引用片段:
border-color:
{1,4}
颜色属性的值
边框颜色属性设置一个元素的边框颜色。
可以使用一到四个关键字。
7.边框样式
以下是引用片段:
[none|dotted|dashed|solid|double|groove|ridge|inset|outset]{1,4}
none
边框样式属性用于设置一个元素边框的样式。
这个属性必须用于指定可见的边框。
以下是引用片段:
none:
无样式;
dotted:
点线;
dashed:
虚线;
solid:
实线;
double:
双线;
groove:
槽线;
ridge:
脊线;
inset:
内凹;
outset:
外凸
8.上边框
border-top:
||||
上边框属性是一个用于设置一个元素上边框的宽度、式样和颜色的略写。
注意只能给出一个边框式样。
9.右边框
border-right:
||||颜色>
右边框属性是一个用于设置一个元素右边框的宽度、式样、和颜色的略写。
注意只能给出一个边框式
样。
10.下边框以下是引用片段:
border-bottom:
下边框属性是一个用于设置一个元素的下边框的宽度、式样和颜色的略写。
11.左边框以下是引用片段:
border-left:
左边框属性是一个用于设置一个元素左边框的宽度、式样和颜色的略写。