css去掉表格内边框.docx

css去掉表格内边框.docx

《css去掉表格内边框.docx》由会员分享，可在线阅读，更多相关《css去掉表格内边框.docx（5页珍藏版）》请在冰豆网上搜索。

css去掉表格内边框

竭诚为您提供优质文档/双击可除

css去掉表格内边框

　　篇一：

html的table边框技巧-html表格table边框样式美化

　　运用css语法美化表格table注：

除非特殊声明，本文所举各例插入的表格的cellspacing、cellpadding、border值均为0。

例一：

1px表格很多人热衷于制作1px表格，于是发明了各式各样的方法，用css做起来可就灵活的多。

如果要制作一个1x1的1px表格只要简单定义一下边框值就可以了。

我们首先用dreamweaver插入一个1x1表格，宽度为50，然后在该表格table或者td中定义border:

1solidteal,所做的表格的效果如下：

但是要制作一个非1x1的表格（如2x2）就稍微麻烦些，因为如果直接定义td样式border:

1solidteal，则显示的效果如下：

你会发现表格外框为1px，而里面则变成了2px了，这是由于叠加的原因。

为了解决这么问题我们可以这样做：

首先为td定义样式：

border:

#cc0000solid;border-width:

0110,这样表格表现为：

然后再为table定义样式:

border:

#cc0000solid;border-width:

1001,这样就可做作成一个完整的1px表格了。

例二：

粗边框的1px表格

　　此表格的内格线为1px而外边框为3px，有了例一的基础做起来就不难了，只要修改border-width值就行了。

对table所使用的样式的代码是：

border:

bluesolid;border-width:

3223对td所使用的样式的代码是：

border:

bluesolid;border-width:

0110例三：

虚线框表格做法和例一类似，border-style从solid改为dashed。

对table所使用的样式的代码是：

border:

blackdashed;border-width:

1001对td所使用的样式的代码是：

border:

blackdashed;border-width:

0110例四：

点线边框表格注意点线（dotted）的最小象素为2。

对table所使用的样式的代码是：

border:

greendotted;border-width:

20xx对td所使用的样式的代码是：

border:

greendotted;border-width:

0220例五：

双线边框表格注意双线（double）的最小象素为3。

对table所使用的样式的代码是：

border:

teal4double对td所使用的样式的代码是：

border:

teal1solid例六：

outset外框表格

　　对table所使用的样式的代码是：

border:

3outset对td所使用的样式的代码是：

border:

1solid例七：

inset外框表格对table所使用的样式的代码是：

border:

3inset对td所使用的样式的代码是：

border:

1solid例八：

ridge外框表格对table所使用的样式的代码是：

border:

#ee00003ridge对td所使用的样式的代码是：

border:

1solid例九：

综合使用一这个表格的外框采用的是脊线，内单元格边框是槽线，注意表格插入时cellspacing设为1了。

对table所使用的样式的代码是：

border:

skyblue4ridge对td所使用的样式的代码是：

border:

navy1groove

　　例十：

综合使用二别以为这是九个表格，其实他们是一个表格中的九个单元格，由于表格外边框为0，所以你看不到罢了。

只需对td使用样式：

border:

maroon3double，另外别忘了把表格的cellspacing设为1哦。

例十一：

综合使用三此表格的上下左右边框采用了不同的样式，你可以根据喜好自行更改。

对table所使用的样式的代码是：

border:

purple4;border-style:

dasheddouble对td所使用的样式的代码是：

border:

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%；3.将后做的表格插入先前做的表格中即可。

如果你采用一幅会变色的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:

　　允许值:

thin|medium|thick|

　　初始值:

medium

　　适用于:

所有对象

　　向下兼容:

否

　　右边框宽度属性用于指定元素的右边框的宽度。

值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。

不允许使用负值。

也可以用在右边框、边框的宽度或边框的属性略写。

　　3.下边框宽度以下是引用片段：

　　语法:

border-bottom-width:

　　允许值:

thin|medium|thick|

　　初始值:

medium

　　适用于:

所有对象

　　向下兼容:

否

　　下边框宽度属性用于指定元素的下边框的宽度。

值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。

不允许使用负值。

也可以用在下边框、边框的宽度或边框的属

　　性略写。

　　4.左边框宽度以下是引用片段：

　　语法:

border-left-width:

　　允许值:

thin|medium|thick|

　　初始值:

medium

　　适用于:

所有对象

　　向下兼容:

否

　　左边框宽度属性用于指定元素的左边框的宽度。

值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。

不允许使用负值。

也可以用在左边框、边框的宽度或边框的属性略写。

　　5.边框宽度以下是引用片段：

　　语法:

border-width:

　　允许值:

[thin|medium|thick|]{1,4}

　　初始值:

未定义

　　适用于:

所有对象

　　向下兼容:

否

　　边框宽度属性用一到四个值来设置元素的边界，值是一个关键字或长度。

不允许使用负值长度。

如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。

如果给出一个值，它将被运用到各边上。

如果两个或三个值给出了，省略了的值与对边相等。

这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。

也可以使用略写的边框属性。

　　6.边框颜色以下是引用片段：

　　语法:

border-color:

　　允许值:

{1,4}

　　初始值:

颜色属性的值

　　适用于:

所有对象

　　向下兼容:

否

　　边框颜色属性设置一个元素的边框颜色。

可以使用一到四个关键字。

如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。

如果给出一个值，它将被运用到各边上。

如果两个或三个值给出了，省略了的值与对边相等。

也可以使用略写的边框属性。

　　7.边框样式

　　以下是引用片段：

　　语法:

border-style:

　　允许值:

[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:

　　允许值:

||||

　　初始值:

未定义

　　适用于:

所有对象

　　向下兼容:

否

　　左边框属性是一个用于设置一个元素左边框的宽度、式样和颜色的略写。

注意只能给出一个边框式样。

也可以使用略写的边框属性。