admin 管理员组

文章数量: 1086019


2024年7月4日发(作者：plc编程教程全过程)

普通表格样式及代码大全

序

样式

号

borderColor=#000000 height=40 cellPadding=1 width=250

align=center border=1>

代码

001

单实线边框表格

单实线边框表格

BORDER-TOP: #333333 1px dashed; BORDER-LEFT: #333333 1px

dashed; BORDER-BOTTOM: #333333 1px dashed;

BORDER-COLLAPSE: collapse" borderColor=#000000 height=40

002

cellPadding=1 width=250 align=center border=1>

虚线边框表格

虚线边框表格

BORDER-TOP: #333333 2px dotted; BORDER-LEFT: #333333 2px

dotted; BORDER-BOTTOM: #333333 2px dotted;

BORDER-COLLAPSE: collapse" borderColor=#000000 height=40

003

cellPadding=1 width=250 align=center border=2>

点线边框表格

点线边框表格

align=center border=3>

004

双实线边框表格

双实线边框表格

BORDER-TOP: #00f901 10px groove; BORDER-LEFT: #00f901 10px

groove; BORDER-BOTTOM: #00f901 10px groove;

BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40

005

cellPadding=1 width=250 align=center border=10>

槽线边框表格

槽线边框表格

BORDER-TOP: #00f901 10px ridge; BORDER-LEFT: #00f901 10px

ridge; BORDER-BOTTOM: #00f901 10px ridge;

BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40

006

cellPadding=1 width=250 align=center border=10>

脊线边框表格

脊线边框表格

#00f901 10px inset; BORDER-LEFT: #00f901 10px inset;

BORDER-BOTTOM: #00f901 10px inset; BORDER-COLLAPSE:

collapse" borderColor=#00f901 height=40 cellPadding=1 width=250

007

align=center border=10>

内凹效果边框

内凹效果边框

BORDER-TOP: #00f901 10px outset; BORDER-LEFT: #00f901 10px

outset; BORDER-BOTTOM: #00f901 10px outset;

008

外凸效果边框

BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40

cellPadding=1 width=250 align=center border=10>

外凸效果边框

BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid;

BORDER-BOTTOM-STYLE: solid" borderColor=#4a4a84 height=40

cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff

border=2>

009

内虚外实边框

#4a4a84 2px dashed; BACKGROUND: #ffffff; BORDER-LEFT:

#4a4a84 2px dashed; BORDER-BOTTOM: #4a4a84 2px dashed">

内虚外实边框

BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed;

BORDER-BOTTOM-STYLE: dashed" borderColor=#4a4a84

height=40 cellSpacing=8 cellPadding=2 width=250 align=center

bgColor=#ffffff border=2>

010

外虚内实边框

#4a4a84 2px solid; BACKGROUND: #ffffff; BORDER-LEFT: #4a4a84

2px solid; BORDER-BOTTOM: #4a4a84 2px solid">

外虚内实边框

borderColor=#000000 height=40 cellPadding=1 width=250

align=center bgColor=#fffbec border=0>

011

无边框表格

无边框表格

二、不完整边框的表格样式

不完整边框的表格可分为11种：隐藏下边框的表格、隐藏上边框的表格、隐藏左边框的表格、隐藏右边框的表格、

隐藏左右边框的表格、隐藏上下边框的表格、只显示上边框的表格、只显示下边框的表格、只显示左边框的表格、只显

示右边框的表格、无边框的表格。具体样式及代码如下：

序

样式

号

BORDER-COLLAPSE: collapse" borderColor=#111111

bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250

align=center border=1>

代码

001

隐藏下边框

隐藏下边

框

collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0

cellPadding=0 width=250 align=center border=1>

002

隐藏上边框

隐藏上边框

collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0

cellPadding=0 width=250 align=center border=1>

003

隐藏左边框

隐藏左边框

BORDER-RIGHT-WIDTH: 0px" borderColor=#111111

bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250

align=center border=1>

004

隐藏右边框

隐藏右边框

collapse; BORDER-RIGHT-WIDTH: 0px" borderColor=#111111

bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250

align=center border=1>

005

隐藏左右边框

medium none" height=40>隐藏左右边框

BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse"

borderColor=#111111 bgColor=#DFFFDF cellSpacing=0

cellPadding=0 width=250 align=center border=1>

006

隐藏上下边框

medium none" height=40>隐藏上下边框

cellPadding=0 width=250 align=center border=1 frame=above>

007

只显示上边框

只显示上边框

cellPadding=0 width=250 align=center border=1 frame=below>

008

只显示下边框

只显示下边框

cellPadding=0 width=250 align=center border=1 frame=lhs>

009

只显示左边框

只显示左边框

010

只显示右边框

cellPadding=0 width=250 align=center border=1 frame=rhs>

只显示右边框

width=250 align=center bgColor=#fffbec border=1 frame=void>

011

不显示任何边框

不显示任何边框

三、不同结构的表格样式

表格按其结构不同可分为：单行单列表格、一行多列表格、一列多行表格、多行多列表格、合并列的表格、合并

行的表格、复杂表格、隐藏横向分隔线表格、隐藏纵向分隔线表格、隐藏纵横分隔线表格等十种。具体样式及代码如下：

序号

样式

代码

borderColor=#000000 cellSpacing=0 width=300

align=center bgColor=#ffffff border=1>

001

单行单列

单行单列

borderColor=#000000 cellSpacing=0 width=300

align=center bgColor=#ffffff border=1>

002

一行多列 一行多列 一行多列

一行多列

一行多列

一行多列

borderColor=#000000 cellSpacing=0 width=300

align=center bgColor=#ffffff border=1>

003

一列多行

一列多行

一列多行

一列多行

一列多行

一列多行

borderColor=#000000 cellSpacing=0 width=300

align=center bgColor=#ffffff border=1>

004

多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

borderColor=#000000 cellSpacing=0 width=300

align=center bgColor=#ffffff border=1>

005

合并列的表格

合并列的表格 合并列的表格 合并列的表格

合并列的表格 合并列的表格 合并列的表格

合并列的表格

合并列的表格

合并列的表格

合并列的表格

合并列的表格

合并列的表格

合并列的表格

borderColor=#000000 cellSpacing=0 width=300

align=center bgColor=#ffffff border=1>

006

合并行的表格 合并行的表格

合并行的表格 合并行的表格 合并行的表格

合并行的表格 合并行的表格

合并行的表格

合并行的表格

合并行的表格

合并行的表格

合并行的表格

合并行的表格

合并行的表格

borderColor=#000000 cellSpacing=0 width=300

align=center bgColor=#ffffff border=1>

复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

007

复杂表格 复杂表格

复杂表复杂表

复杂表格

格 格

复杂表复杂表复杂表

复杂表格

格 格 格

复杂表格

复杂表复杂表

复杂表格

格 格

复杂表

复杂表格

格

复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

复杂表格

borderColor=#ff0033 cellSpacing=0 rules=cols width=300

align=center bgColor=#e1f8ff border=1>

008

隐藏

隐藏

隐藏

横向

横向

横向

分隔线

分隔线

分隔线

隐藏 横向 分隔线
隐藏 横向 分隔线
隐藏 横向 分隔线

borderColor=#ff0033 cellSpacing=0 rules=rows width=300

align=center bgColor=#e1f8ff border=1>

009

隐藏

隐藏

隐藏

纵向

纵向

纵向

分隔线

分隔线

分隔线

隐藏 纵向 分隔线
隐藏 纵向 分隔线
隐藏 纵向 分隔线

borderColor=#ff0033 cellSpacing=0 rules=none width=300

align=center bgColor=#e1f8ff border=1>

010

隐藏

隐藏

隐藏

纵横

纵横

纵横

分隔线

分隔线

分隔线

隐藏 纵横 分隔线
隐藏 纵横 分隔线
隐藏 纵横 分隔线

四、带标题的表格样式

带标题的表格大致有四种：标题位于表体外的表格、标题位于表体内的表格、标题位于边框上的表格、表中表效

果表格。其中后两种表格若改变其属性(如边框颜色、边框样式、加背景颜色等)，则表格的边框将由圆角矩形变为直角

矩形。具体样式及代码如下：

序

样式

号

代码

标题

标题

文本内容——标题位于表体外

的表格

001

文本内容——标题位于表体外的表

格

标题

标题

文本内容——标题位于表体内

的表格

标题

002

文本内容——标题位于表体内的表

格

标题

文本内容——标题位于边框上的表格

文本内容——标题位于边框上的表格

 

BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid;

003

表中表

004

文本内容——表中表效果

BORDER-BOTTOM-STYLE: solid" align=center>

style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080

1px solid; BORDER-LEFT: #808080 1px solid; background-Color:

#e1f8ff; BORDER-BOTTOM: #808080 1px solid">

color=#000000>表中表

文本内容——表中表效果


本文标签： 表格 边框 隐藏 合并 标题

版权声明：本文标题：表格样式 大全 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1720063130a742082.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。