实用表格样式汇集 html表格样式

分享人:与自己干杯来源:互联网31

实用表格样式汇集

序号样式代码

001

单实线边框表格

<TABLE borderColor=#000000 height=40cellPadding=1 width=250 align=center border=1>
<TBODY>
<TR>
<TD>
<DIValign=center>单实线边框表格</DIV></TD>

</TR></TBODY></TABLE>

002

虚线边框表格

<TABLE borderColor=#000000 height=40cellPadding=1 width=250 align=center border=1>
<TBODY>
<TR>
<TD>
<DIValign=center>虚线边框表格</DIV></TD>

</TR></TBODY></TABLE>

003

点线边框表格

<TABLE borderColor=#000000 height=40cellPadding=1 width=250 align=center border=2>
<TBODY>
<TR>
<TD>
<DIValign=center>点线边框表格</DIV></TD>

</TR></TBODY></TABLE>

004

双实线边框表格

<TABLE borderColor=#000000height=40 cellPadding=1 width=250 align=centerborder=3>
<TBODY>
<TR>
<TD>
<DIValign=center>双实线边框表格</DIV></TD>

</TR></TBODY></TABLE>

005

槽线边框表格

<TABLE borderColor=#00f901 height=40cellPadding=1 width=250 align=centerborder=10>
<TBODY>
<TR>
实用表格样式汇集 html表格样式
<TD>
<DIValign=center>槽线边框表格</DIV></TD>

</TR></TBODY></TABLE>

006

脊线边框表格

<TABLE borderColor=#00f901 height=40cellPadding=1 width=250 align=centerborder=10>
<TBODY>
<TR>
<TD>
<DIValign=center>脊线边框表格</DIV></TD>

</TR></TBODY></TABLE>

007

内凹效果边框

<TABLE borderColor=#00f901 height=40cellPadding=1 width=250 align=centerborder=10>
<TBODY>
<TR>
<TD>
<DIValign=center>内凹效果边框</DIV></TD>

</TR></TBODY></TABLE>

008

外凸效果边框

<TABLE borderColor=#00f901 height=40cellPadding=1 width=250 align=centerborder=10>
<TBODY>
<TR>
<TD>
<DIValign=center>外凸效果边框</DIV></TD>

</TR></TBODY></TABLE>

009

内虚外实边框

<TABLEborderColor=#4a4a84 height=40 cellSpacing=8 cellPadding=2 width=250align=center bgColor=#ffffff border=2>
<TBODY>
<TR>
<TD>
<DIValign=center>内虚外实边框</DIV></TD>

</TR></TBODY></TABLE>

010

外虚内实边框

<TABLEborderColor=#4a4a84 height=40 cellSpacing=8 cellPadding=2 width=250align=center bgColor=#ffffff border=2>
<TBODY>
<TR>
<TD>
<DIValign=center>外虚内实边框</DIV></TD>

</TR></TBODY></TABLE>

011

无边框表格

<TABLE borderColor=#000000 height=40cellPadding=1 width=250 align=center bgColor=#fffbecborder=0>
<TBODY>
<TR>
<TD>
<DIValign=center>无边框表格</DIV></TD>

</TR></TBODY></TABLE>

二、不完整边框的表格样式
不完整边框的表格可分为11种：隐藏下边框的表格、隐藏上边框的表格、隐藏左边框的表格、隐藏右边框的表格、隐藏左右边框的表格、隐藏上下边框的表格、只显示上边框的表格、只显示下边框的表格、只显示左边框的表格、只显示右边框的表格、无边框的表格。具体样式及代码如下：

序号样式代码

001

隐藏下边框

<TABLEborderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TDheight=40>隐藏下边框</TD>

</TR></TBODY></TABLE>

002

隐藏上边框

<TABLEborderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TDheight=40>隐藏上边框</TD>

</TR></TBODY></TABLE>

003

隐藏左边框

<TABLEborderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TDheight=40>隐藏左边框</TD>

</TR></TBODY></TABLE>

004

隐藏右边框

<TABLEborderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TDheight=40>隐藏右边框</TD>

</TR></TBODY></TABLE>

005

隐藏左右边框

<TABLE borderColor=#111111 bgColor=#DFFFDFcellSpacing=0 cellPadding=0 width=250 align=centerborder=1>
<TBODY>
<TR align=middle>
<TD height=40>隐藏左右边框</TD>

</TR></TBODY></TABLE>

006

隐藏上下边框

<TABLE borderColor=#111111 bgColor=#DFFFDFcellSpacing=0 cellPadding=0 width=250 align=centerborder=1>
<TBODY>
<TR align=middle>
<TDheight=40>隐藏上下边框</TD>

</TR></TBODY></TABLE>

007

只显示上边框

<TABLE borderColor=#111111bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=centerborder=1 frame=above>
<TBODY>
<TR align=middle>
<TDheight=40>只显示上边框</TD>

</TR></TBODY></TABLE>

008

只显示下边框

<TABLE borderColor=#111111bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=centerborder=1 frame=below>
<TBODY>
<TR align=middle>
<TDheight=40>只显示下边框</TD>

</TR></TBODY></TABLE>

009

只显示左边框

<TABLE borderColor=#111111bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=centerborder=1 frame=lhs>
<TBODY>
<TR align=middle>
<TDheight=40>只显示左边框</TD>

</TR></TBODY></TABLE>

010

只显示右边框

<TABLE borderColor=#111111bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=centerborder=1 frame=rhs>
<TBODY>
<TR align=middle>
<TDheight=40>只显示右边框</TD>

</TR></TBODY></TABLE>

011

不显示任何边框

<TABLE borderColor=#111111cellSpacing=0 cellPadding=0 width=250 align=center bgColor=#fffbecborder=1 frame=void>
<TBODY>
<TR align=middle>
<TDheight=40>不显示任何边框</TD>

</TR></TBODY></TABLE>

三、不同结构的表格样式
表格按其结构不同可分为：单行单列表格、一行多列表格、一列多行表格、多行多列表格、合并列的表格、合并行的表格、复杂表格、隐藏横向分隔线表格、隐藏纵向分隔线表格、隐藏纵横分隔线表格等十种。具体样式及代码如下：

序号样式代码
001
单行单列

<TABLE borderColor=#000000 cellSpacing=0width=300 align=center bgColor=#ffffffborder=1>
<TBODY>
<TR>
<TD height=40>
<DIValign=center>单行单列</DIV></TD>

</TR></TBODY></TABLE>

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

<TABLE borderColor=#000000 cellSpacing=0width=300 align=center bgColor=#ffffffborder=1>
<TBODY>
<TR>
<TD width=100>
<DIValign=center>一行多列</DIV></TD>
<TD width=100>
<DIValign=center>一行多列</DIV></TD>
<TD width=100>
<DIValign=center>一行多列</DIV></TD>

</TR></TBODY></TABLE>

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

<TABLE borderColor=#000000 cellSpacing=0width=300 align=center bgColor=#ffffffborder=1>
<TBODY>
<TR>
<TD>
<DIValign=center>一列多行</DIV></TD>
<TR>
<TD>
<DIValign=center>一列多行</DIV></TD>
<TR>
<TD>
<DIValign=center>一列多行</DIV></TD></TR></TR>

</TR></TBODY></TABLE>

004
多行多列多行多列多行多列
多行多列多行多列多行多列
多行多列多行多列多行多列

<TABLE borderColor=#000000 cellSpacing=0width=300 align=center bgColor=#ffffffborder=1>
<TBODY>
<TR>
<TD width=100>
<DIValign=center>多行多列</DIV></TD>
<TD width=100>
<DIValign=center>多行多列</DIV></TD>
<TD width=100>
<DIValign--=center>多行多列</DIV></TD>
<TR>
<TD>
<DIValign=center>多行多列</DIV></TD>
<TD>
<DIValign=center>多行多列</DIV></TD>
<TD>
<DIValign=center>多行多列</DIV></TD>
<TR>
<TD>
<DIValign=center>多行多列</DIV></TD>
<TD>
<DIValign=center>多行多列</DIV></TD>
<TD>
<DIValign=center>多行多列</DIV></TD></TR></TR>

</TR></TBODY></TABLE>

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

<TABLE borderColor=#000000 cellSpacing=0width=300 align=center bgColor=#ffffffborder=1>
<TBODY>
<TR>
<TD colSpan=3>
<DIValign=center>合并列的表格</DIV></TD>
<TR>
<TD width=100>
<DIValign=center>合并列的表格</DIV></TD>
<TD width=100>
<DIValign=center>合并列的表格</DIV></TD>
<TD width=100>
<DIValign=center>合并列的表格</DIV></TD>
<TR>
<TD>
<DIValign=center>合并列的表格</DIV></TD>
<TD>
<DIValign=center>合并列的表格</DIV></TD>
<TD>
<DIValign=center>合并列的表格</DIV></TD></TR></TR>

</TR></TBODY></TABLE>

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

<TABLE borderColor=#000000 cellSpacing=0width=300 align=center bgColor=#ffffffborder=1>
<TBODY>
<TR>
<TD width=100 rowSpan=3>
<DIValign=center>合并行的表格</DIV></TD>
<TD width=100>
<DIValign=center>合并行的表格</DIV></TD>
<TD width=100>
<DIValign=center>合并行的表格</DIV></TD>
<TR>
<TD>
<DIValign=center>合并行的表格</DIV></TD>
<TD>
<DIValign=center>合并行的表格</DIV></TD>
<TR>
<TD>
<DIValign=center>合并行的表格</DIV></TD>
<TD>
<DIValign=center>合并行的表格</DIV></TD></TR></TR>

</TR></TBODY></TABLE>

007
复杂表格复杂表格复杂表格
复杂表格复杂表格复杂表格复杂表格复杂表格
复杂表格复杂表格复杂表格
复杂表格复杂表格复杂表格
复杂表格复杂表格

<TABLE borderColor=#000000 cellSpacing=0width=300 align=center bgColor=#ffffffborder=1>
<TBODY>
<TR>
<TD width=60>
<DIValign=center>复杂表格</DIV></TD>
<TD width=180 colSpan=3>
<DIValign=center>复杂表格</DIV></TD>
<TD width=60>
<DIValign=center>复杂表格</DIV></TD>
<TR>
<TD rowSpan=4>
<DIValign=center>复杂表格</DIV></TD>
<TD rowSpan=3>
<DIValign=center>复杂表格</DIV></TD>
<TD>
<DIValign=center>复杂表格</DIV></TD>
<TD>
<DIValign=center>复杂表格</DIV></TD>
<TD>
<DIValign=center>复杂表格</DIV></TD>
<TR>
<TD>
<DIValign=center>复杂表格</DIV></TD>
<TD>
<DIValign=center>复杂表格</DIV></TD>
<TD>
<DIValign=center>复杂表格</DIV></TD>
<TR>
<TD>
<DIValign=center>复杂表格</DIV></TD>
<TD>
<DIValign=center>复杂表格</DIV></TD>
<TD>
<DIValign=center>复杂表格</DIV></TD>
<TR>
<TD>
<DIValign=center>复杂表格</DIV></TD>
<TD colSpan=3>
<DIValign=center>复杂表格</DIV></TD>

</TR></TR></TR></TR>

</TR></TBODY></TABLE>

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

<TABLE borderColor=#ff0033 cellSpacing=0rules=cols width=300 align=center bgColor=#e1f8ffborder=1>
<TBODY>
<TR>
<TDwidth=100>隐藏</TD>
<TDwidth=100>横向</TD>
<TDwidth=100>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>横向</TD>
<TD>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>横向</TD>
<TD>分隔线</TD></TR></TR>

</TR></TBODY></TABLE>

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

<TABLE borderColor=#ff0033 cellSpacing=0rules=rows width=300 align=center bgColor=#e1f8ffborder=1>
<TBODY>
<TR>
<TDwidth=100>隐藏</TD>
<TDwidth=100>纵向</TD>
<TDwidth=100>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>纵向</TD>
<TD>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>纵向</TD>
<TD>分隔线</TD></TR></TR>

</TR></TBODY></TABLE>

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

<TABLE borderColor=#ff0033 cellSpacing=0rules=none width=300 align=center bgColor=#e1f8ffborder=1>
<TBODY>
<TR>
<TDwidth=100>隐藏</TD>
<TDwidth=100>纵横</TD>
<TDwidth=100>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>纵横</TD>
<TD>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>纵横</TD>
<TD>分隔线</TD></TR></TR>

</TR></TBODY></TABLE>

四、带标题的表格样式
带标题的表格大致有四种：标题位于表体外的表格、标题位于表体内的表格、标题位于边框上的表格、表中表效果表格。其中后两种表格若改变其属性(如边框颜色、边框样式、加背景颜色等)，则表格的边框将由圆角矩形变为直角矩形。具体样式及代码如下：

序号样式代码
001
标题
文本内容——标题位于表体外的表格

<TABLE width=250align=center border=0>
<CAPTION>标题</CAPTION>
<TBODY>
<TR>
<TD bgColor=#cccccc>
<DIValign=center>文本内容——标题位于表体外的表格</DIV></TD>

</TR></TBODY></TABLE>

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

<TABLE width=250align=center border=0>
<TBODY>
<TR>
<TD bgColor=#999999>
<DIValign=center><FONTcolor=#ffffff><B>标题</B></FONT></DIV>

</TD></TR>
<TR>
<TD bgColor=#cccccc>
<DIValign=center>文本内容——标题位于表体内的表格</DIV></TD>

</TR>

</TBODY></TABLE>

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

<FIELDSETalign=center><LEGEND>标题</LEGEND>
<DIValign=center>文本内容——标题位于边框上的表格</DIV>
<DIValign=center>&nbsp;

</DIV></FIELDSET>

004
表中表　

文本内容——表中表效果

<TABLE cellSpacing=0cellPadding=0 width=250 align=center>
<TBODY>
<TR>
<TD>
<FIELDSETalign=center><LEGEND><FONTcolor=#000000>表中表</FONT></LEGEND>　
<Palign=center>文本内容——表中表效果</P></FIELDSET></TD>

</TR></TBODY></TABLE>

附：表格常用属性

border：表格的边框宽度。如border=1，表示表格边框的粗细为1个像素(默认值)，为0表示没有边框。
cellspacing：表格中各单元格的间距。属性值为数字。当表格只有一个单元格时，则表示该单元格与表格边框的距离。
cellpadding：单元格内容与单元格边框之间的距离，属性值是数字。
width：表格的宽度。属性值为像素和百分比两种。
height：表格的高度。取值方法同width。
bgcolor：表格的背景颜色。属性值为各种颜色代码。
background：表格的背景图案。属性值为有效的图片地址。
bordercolor：表格边框的颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。
bordercolorlight：亮边框(表格的左边和上边框)颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。
bordercolordark：暗边框(表格的右边和下边框)颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。
align：表格的对齐方式。属性值为left(左对齐，默认)、center(居中)以及right(右对齐)。
colspan：定义合并表格的列数。属性值是数字。
rowspan定义合并表格的行数，属性值是数字。



（转自执着的博客）

查看更多精彩请点这里

  
表格样式 css表格样式 

爱华网本文地址 » http://www.aihuau.com/a/25101015/273328.html

更多阅读

excel套用表格格式怎么用 套用表格格式

excel套用表格格式怎么用——简介我们在编辑工作表的时候有时候会用到套用表格格式，那么这个套用表格格式是怎么用的呢？excel套用表格格式怎么用——工具/原料excel2007excel套用表格格式怎么用——方法/步骤excel套用表格格式怎么用

Excel表格中设置电话号码格式 excel表格中电话号码

Excel表格中设置电话号码格式——简介Excel表格中怎么统一电话号码格式设置Excel表格中设置电话号码格式——工具/原料Excel表格Excel表格中设置电话号码格式——方法/步骤Excel表格中设置电话号码格式 1、看着这11位数字的电话号

如何制作excel表格 word表格的基本操作

如何制作excel表格——简介　本教程为Excel入门教程，详细介绍一般excel表格的制作过程。制作表格前需要你在心里先构思下表格的大致布局和样式，以便实际操作的顺利完成。如何制作excel表格——方法/步骤如何制作excel表格 1、.新建一

excle表格制作教程 word表格的基本操作

excle表格制作教程——简介本教程为Excel入门教程，详细介绍一般excel表格的制作过程。制作表格前需要你在心里先构思下表格的大致布局和样式，以便实际操作的顺利完成。 excle表格制作教程——方法/步骤excle表格制作教程 1、

声明:《实用表格样式汇集 html表格样式》为网友与自己干杯分享！如侵犯到您的合法权益请联系我们删除