注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

美天阳光

音乐是人类灵魂的避难所!

 
 
 

日志

 
 

【转载】表格的编制(代码)  

2016-01-18 21:15:49|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 【蓝波制作】

 

一行效果:↓

要写的文字

一行代码:↓

<TABLE cellSpacing=1 cellPadding=0 width=600 align=center  bgColor=#ff0000 border=1>
<TBODY>
<TR bgColor=#00cd00 height=20>
<TD><A href="链接地址">要写的文字</A></TD></TR>
</TBODY></TABLE>
 

 

 

一行两列效果↓

要写的文字1 要写的文字2

一行两列代码↓:

<TABLE cellSpacing=1 cellPadding=0 width=600 align=center bgColor=#ff0000 border=1>
<TBODY>
<TR bgColor=#00cd00 height=20>
<TD width="50%"><A href="链接地址">要写的文字1</A></TD>
<TD width="50%"><A href="链接地址">要写的文字2</A></TD></TR>
</TBODY></TABLE>

 

 

两行三列效果:↓

要写的文字1 要写的文字2 要写的文字3
要写的文字4 要写的文字5 要写的文字6

两行三列代码:↓

<TABLE cellSpacing=1 cellPadding=0 width=600 align=center bgColor=#ff0000 border=1>
<TBODY>
<TR bgColor=#00cd00 height=20>
<TD width="33%"><A href="链接地址">要写的文字1</A></TD>
<TD width="33%"><A href="链接地址">要写的文字2</A></TD>
<TD width="33%"><A href="链接地址">要写的文字3</A></TD></TR>
<TR bgColor=#00cd00 height=20>
<TD width="33%"><A href="链接地址">要写的文字4</A></TD>
<TD width="33%"><A href="链接地址">要写的文字5</A></TD>
<TD width="33%"><A href="链接地址">要写的文字6</A></TD></TR>
</TBODY></TABLE>

 

 

四行五列效果:↓

要写的文字1 要写的文字2 要写的文字3 要写的文字4 要写的文字5
要写的文字6 要写的文字7 要写的文字8 要写的文字9 要写的文字10
要写的文字11 要写的文字12 要写的文字13 要写的文字14 要写的文字15
要写的文字16 要写的文字17 要写的文字18 要写的文字19 要写的文字20

 四行五列代码:↓

 <TABLE cellSpacing=1 cellPadding=0 width=600 align=center bgColor=#ff0000 border=1>
<TBODY>
<TR bgColor=#00cd00 height=20>
<TD width="20%"><A href="链接地址">要写的文字1</A></TD>
<TD width="20%"><A href="链接地址">要写的文字2</A></TD>
<TD width="20%"><A href="链接地址">要写的文字3</A></TD>
<TD width="20%"><A href="链接地址">要写的文字4</A></TD>
<TD width="20%"><A href="链接地址">要写的文字5</A></TD></TR>
<TR bgColor=#00cd00 height=20>
<TD width="20%"><A href="链接地址">要写的文字6</A></TD>
<TD width="20%"><A href="链接地址">要写的文字7</A></TD>
<TD width="20%"><A href="链接地址">要写的文字8</A></TD>
<TD width="20%"><A href="链接地址">要写的文字9</A></TD>
<TD width="20%"><A href="链接地址">要写的文字10</A></TD></TR>
<TR bgColor=#00cd00 height=20>
<TD width="20%"><A href="链接地址">要写的文字11</A></TD>
<TD width="20%"><A href="链接地址">要写的文字12</A></TD>
<TD width="20%"><A href="链接地址">要写的文字13
</A></TD>
<TD width="20%"><A href="链接地址">要写的文字14</A></TD>
<TD width="20%"><A href="链接地址">要写的文字15</A></TD></TR>
<TR bgColor=#00cd00 height=20>
<TD width="20%"><A href="链接地址">要写的文字16</A></TD>
<TD width="20%"><A href="链接地址">要写的文字17</A></TD>
<TD width="20%"><A href="链接地址">要写的文字18</A></TD>
<TD width="20%"><A href="链接地址">要写的文字19</A></TD>
<TD width="20%"><A href="链接地址">要写的文字20</A></TD></TR>
</TBODY></TABLE>

 

 

合并2格效果:↓

水果类 苹果 香蕉 哈密瓜
葡萄 菠萝 脐橙
动物类 兔子 大灰狼 狗熊

 合并2格代码:↓

<TABLE cellSpacing=1 cellPadding=0 width=600 align=center bgColor=#ff0000 border=1>
<TBODY>
<TR align=middle bgColor=#00cd00 height=20>
<TH width="15%" rowSpan=2>水果类</TH>
<TD width="28%">苹果</TD>
<TD width="28%">香蕉</TD>
<TD width="28%">哈密瓜</TD></TR>
<TR align=middle bgColor=#00cd00 height=20>
<TD width="28%">葡萄</TD>
<TD width="28%">菠萝</TD>
<TD width="28%">脐橙</TD></TR>
<TR align=middle bgColor=#00cd00 height=20>
<TD width="15%"><STRONG>动物类</STRONG></TD>
<TD width="28%">兔子</TD>
<TD width="28%">大灰狼</TD>
<TD width="28%">狗熊</TD></TR></TBODY></TABLE>

 

 

一行不分 几行细分效果:↓

治安巡逻值班表
星期一 张三 李四 王老五
星期二 王麻子 李麻子 张麻子
星期三 肖张 刘级 万精油

 一行不分 几行细分代码:↓

<DIV>
<TABLE cellSpacing=1 cellPadding=0 width=600 align=center bgColor=#ff0000 border=1>
<TBODY>
<TR align=middle bgColor=#00cd00 height=20>
<TD colSpan=4>
<DIV align=center><FONT color=#ffff00 size=5>治安巡逻值班表</FONT></DIV></TD></TR>
<TR align=middle bgColor=#00cd00 height=20>
<TD width="15%">星期一</TD>
<TD width="28%">张三</TD>
<TD width="28%">李四</TD>
<TD width="28%">王老五</TD></TR>
<TR align=middle bgColor=#00cd00 height=20>
<TD width="15%">星期二</TD>
<TD width="28%">王麻子</TD>
<TD width="28%">李麻子</TD>
<TD width="28%">张麻子</TD></TR>
<TR align=middle bgColor=#00cd00 height=20>
<TD width="15%">星期三</TD>
<TD width="28%">肖张</TD>
<TD width="28%">刘级</TD>
<TD width="28%">万精油</TD></TR></TBODY></TABLE></DIV>

 

 

※  ※  ※  ※  ※  ※  ※  ※  ※  ※  ※  ※  ※  ※  ※  ※  ※  ※  ※  ※  ※  ※  ※  ※ ※  ※  ※  ※  ※  ※  ※  

 

部分代码说明:

 bgColor=背景颜色

 cellSpacing=边框的大小(即看到的红色边框)

 width=表格长度

<TR>.........</TR>这里代表行

<TD>........</TD>这里代表列

<TD width="20%">列占行的比例

<TR bgColor=#00cd00> 本行的背景色(绿色)

<TR height=20> 本行的高度

rowSpan=2 表示2行合并

 colSpan=4 表示4列合并

★ 表格里的文字大小、颜色、连接要不要 都可以自己设定~!


 

表格样式及代码总汇

 

序号 样式 代码

001

单实线边框表格

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>单实线边框表格</DIV></TD>

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

002

虚线边框表格

<TABLE style="BORDER-RIGHT: #333333 1px dashed; BORDER-TOP: #333333 1px dashed; BORDER-LEFT: #333333 1px dashed; BORDER-BOTTOM: #333333 1px dashed; BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>虚线边框表格</DIV></TD>

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

003

点线边框表格

<TABLE style="BORDER-RIGHT: #333333 2px dotted; BORDER-TOP: #333333 2px dotted; BORDER-LEFT: #333333 2px dotted; BORDER-BOTTOM: #333333 2px dotted; BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=2>
<TBODY>
<TR>
<TD>
<DIV align=center>点线边框表格</DIV></TD>

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

004

双实线边框表格

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

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

005

槽线边框表格

<TABLE style="BORDER-RIGHT: #00f901 10px groove; BORDER-TOP: #00f901 10px groove; BORDER-LEFT: #00f901 10px groove; BORDER-BOTTOM: #00f901 10px groove; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>槽线边框表格</DIV></TD>

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

006

脊线边框表格

<TABLE style="BORDER-RIGHT: #00f901 10px ridge; BORDER-TOP: #00f901 10px ridge; BORDER-LEFT: #00f901 10px ridge; BORDER-BOTTOM: #00f901 10px ridge; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>脊线边框表格</DIV></TD>

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

007

内凹效果边框

<TABLE style="BORDER-RIGHT: #00f901 10px inset; BORDER-TOP: #00f901 10px inset; BORDER-LEFT: #00f901 10px inset; BORDER-BOTTOM: #00f901 10px inset; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>内凹效果边框</DIV></TD>

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

008

外凸效果边框

<TABLE style="BORDER-RIGHT: #00f901 10px outset; BORDER-TOP: #00f901 10px outset; BORDER-LEFT: #00f901 10px outset; BORDER-BOTTOM: #00f901 10px outset; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>外凸效果边框</DIV></TD>

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

009

内虚外实边框

<TABLE style="BORDER-TOP-STYLE: solid; 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>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #4a4a84 2px dashed; BORDER-TOP: #4a4a84 2px dashed; BACKGROUND: #ffffff; BORDER-LEFT: #4a4a84 2px dashed; BORDER-BOTTOM: #4a4a84 2px dashed">
<DIV align=center>内虚外实边框</DIV></TD>

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

010

外虚内实边框

<TABLE style="BORDER-TOP-STYLE: 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>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #4a4a84 2px solid; BORDER-TOP: #4a4a84 2px solid; BACKGROUND: #ffffff; BORDER-LEFT: #4a4a84 2px solid; BORDER-BOTTOM: #4a4a84 2px solid">
<DIV align=center>外虚内实边框</DIV></TD>

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

011

无边框表格

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center bgColor=#fffbec border=0>
<TBODY>
<TR>
<TD>
<DIV align=center>无边框表格</DIV></TD>

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

 

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

序号 样式 代码

001

隐藏下边框

<TABLE style="BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-BOTTOM: medium none" height=40>隐藏下边框</TD>

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

002

隐藏上边框

<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-TOP: medium none" height=40>隐藏上边框</TD>

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

003

隐藏左边框

<TABLE style="BORDER-LEFT-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-LEFT: medium none" height=40>隐藏左边框 </TD>

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

004

隐藏右边框

<TABLE style="BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-RIGHT: medium none" height=40>隐藏右边框 </TD>

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

005

隐藏左右边框

<TABLE style="BORDER-LEFT-WIDTH: 0px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-RIGHT: medium none; BORDER-LEFT: medium none" height=40>隐藏左右边框 </TD>

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

006

隐藏上下边框

<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-TOP: medium none; BORDER-BOTTOM: medium none" height=40>隐藏上下边框</TD>

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

007

只显示上边框

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

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

008

只显示下边框

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

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

009

只显示左边框

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

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

010

只显示右边框

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

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

011

不显示任何边框

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

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

 

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

序号 样式 代码
001
单行单列

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD height=40>
<DIV align=center>单行单列</DIV></TD>

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

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

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD width=100>
<DIV align=center>一行多列</DIV></TD>
<TD width=100>
<DIV align=center>一行多列</DIV></TD>
<TD width=100>
<DIV align=center>一行多列</DIV></TD>

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

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

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD></TR></TR>

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

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

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD width=100>
<DIV align=center>多行多列</DIV></TD>
<TD width=100>
<DIV align=center>多行多列</DIV></TD>
<TD width=100>
<DIV align=center>多行多列</DIV></TD>
<TR>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TR>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TD>
<DIV align=center>多行多列</DIV></TD></TR></TR>

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

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

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD colSpan=3>
<DIV align=center>合并列的表格</DIV></TD>
<TR>
<TD width=100>
<DIV align=center>合并列的表格</DIV></TD>
<TD width=100>
<DIV align=center>合并列的表格</DIV></TD>
<TD width=100>
<DIV align=center>合并列的表格</DIV></TD>
<TR>
<TD>
<DIV align=center>合并列的表格</DIV></TD>
<TD>
<DIV align=center>合并列的表格</DIV></TD>
<TD>
<DIV align=center>合并列的表格</DIV></TD></TR></TR>

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

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

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD width=100 rowSpan=3>
<DIV align=center>合并行的表格</DIV></TD>
<TD width=100>
<DIV align=center>合并行的表格</DIV></TD>
<TD width=100>
<DIV align=center>合并行的表格</DIV></TD>
<TR>
<TD>
<DIV align=center>合并行的表格</DIV></TD>
<TD>
<DIV align=center>合并行的表格</DIV></TD>
<TR>
<TD>
<DIV align=center>合并行的表格</DIV></TD>
<TD>
<DIV align=center>合并行的表格</DIV></TD></TR></TR>

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

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

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD width=60>
<DIV align=center>复杂表格</DIV></TD>
<TD width=180 colSpan=3>
<DIV align=center>复杂表格</DIV></TD>
<TD width=60>
<DIV align=center>复杂表格</DIV></TD>
<TR>
<TD rowSpan=4>
<DIV align=center>复杂表格</DIV></TD>
<TD rowSpan=3>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TR>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TR>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TR>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD colSpan=3>
<DIV align=center>复杂表格</DIV></TD>

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

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

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

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#ff0033 cellSpacing=0 rules=cols width=300 align=center bgColor=#e1f8ff border=1>
<TBODY>
<TR>
<TD width=100>隐藏</TD>
<TD width=100>横向</TD>
<TD width=100>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>横向</TD>
<TD>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>横向</TD>
<TD>分隔线</TD></TR></TR>

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

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

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#ff0033 cellSpacing=0 rules=rows width=300 align=center bgColor=#e1f8ff border=1>
<TBODY>
<TR>
<TD width=100>隐藏</TD>
<TD width=100>纵向</TD>
<TD width=100>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>纵向</TD>
<TD>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>纵向</TD>
<TD>分隔线</TD></TR></TR>

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

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

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#ff0033 cellSpacing=0 rules=none width=300 align=center bgColor=#e1f8ff border=1>
<TBODY>
<TR>
<TD width=100>隐藏</TD>
<TD width=100>纵横</TD>
<TD width=100>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>纵横</TD>
<TD>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>纵横</TD>
<TD>分隔线</TD></TR></TR>

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

 

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

 

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

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

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

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

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

</TD></TR>
<TR>
<TD bgColor=#cccccc>
<DIV style="HEIGHT: 60px" align=center>文本内容——标题位于表体内的表格</DIV></TD>

</TR>

</TBODY></TABLE>

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

<FIELDSET style="WIDTH: 250px" align=center><LEGEND>标题</LEGEND>
<DIV align=center>文本内容——标题位于边框上的表格</DIV>
<DIV align=center>&nbsp;

</DIV></FIELDSET>

004
表中表  

文本内容——表中表效果

<TABLE cellSpacing=0 cellPadding=0 width=250 align=center>
<TBODY>
<TR>
<TD>
<FIELDSET style="WIDTH: 250px; BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid" align=center><LEGEND style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; BORDER-LEFT: #808080 1px solid; background-Color: #e1f8ff; BORDER-BOTTOM: #808080 1px solid"><FONT color=#000000>表中表</FONT> </LEGEND> 
<P align=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定义合并表格的行数,属性值是数字。



  评论这张
 
阅读(64)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017