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

高雅女人网易博客

任何的限制,都是从自己的内心开始的。

 
 
 

日志

 
 

【转载】表格代码  

2015-01-09 19:30:28|  分类: 【表格制作】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自闲散人也《表格代码》

表格代码


代码:

<TABLE(表格) background="背景地址" borderColor=# (框边的颜色) cellSpacing= (单元格间距) cellPadding= (单元格高度) width= (总宽度) height= (总高度) bgColor=# (背景颜色) align=center(居中) border= (框边宽度) >
<TBODY>
<TR>
<TD>填入内容</TD>
<TD>填入内容</TD>
<TD>填入内容</TD></TR>
<TR>
<TD>填入内容</TD>
<TD>填入内容</TD>
<TD>填入内容</TD></TR>
<TR>
<TD>填入内容</TD>
<TD>填入内容</TD>
<TD>填入内容</TD></TR></TBODY></TABLE>

 ★ <P style="TEXT-INDENT: 2em"> colSpan= (占列数)  rowSpan= (占行数)  ★

这是一个完整的表格代码,我称他为万能代码。设置相应的参数、增减行列数、插入一些特殊的代码,即可得到预想的表格效果。

一般情况下:cellPadding(单元格高度)、height(表格总高度)均设为0,由日志内容找齐;width(表格总宽度)根据实际设置。另外,各单元格的宽度可设为等宽,也可不等宽。

这里的 width=700,cellSpacing=2,border=4,borderColor=#7744ff,bgColor=#000060。没有置入背景,background="背景地址"可以不动。在此为了演示的需要,设height=500。

此表格设计的是5列8行,各单元格等宽,单元格高度根据内容而定,基本格式是:

         
         
         
         
         
         
         
         

 

表格的变化(代码 colSpan= 、rowSpan= 、vAlign=top 、vAlign=bottom 、align=middle 的运用):

<TD colSpan=3>合并第1行的前三列单元格    
  <TD  vAlign=top>表示与上对齐 <TD vAlign=bottom>表示与下对齐 <TD align=middle>表示居中  
         
        <TD rowSpan=4>合并第五列4、5、6、7行四个单元格
<TD colSpan=2  rowSpan=3>合并第一、二列5、6、7行六个单元格    
   
   
         

 

上述表格代码最简单的形式就是只有一个单元格,也就是一个单边的边框,如下图:

可在此处写日志、贴图或flash。也可用此单边边框一个套一个做套装边框。

 

表格代码,是美化博客不可缺少的工具。可做出精美的边框,编排图文并茂的各式日志版面、模块,亦可独出心裁地搞出各种博客创意。

表格的多种款式:

1 2
3 4

最简表格 代码

<TABLE width=220 border=1>
<TBODY>
<TR>
<TD>1</TD><TD>2</TD></TR>
<TR >
<TD>3</TD><TD>4</TD></TR></TBODY></TABLE>

1 2
3 4

单线表格 代码

<TABLE cellSpacing=0 cellPadding=0 width=220 border=1>
<TBODY>
<TR>
<TD>1</TD><TD>2</TD></TR>
<TR>
<TD>3</TD><TD>4</TD></TR></TBODY></TABLE>

1 2
3 4

细线表格1 代码

<TABLE cellSpacing=1 cellPadding=0 width=220 bgColor=#000000 border=0>
<TBODY>
<TR bgColor=#ffffff>
<TD>1</TD><TD>2</TD></TR>
<TR bgColor=#ffffff>
<TD>3</TD><TD>4</TD></TR></TBODY></TABLE>

1 2
3 4

细线表格2  代码

<TABLE cellSpacing=0 cellPadding=0 width=220 bgColor=#900000>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px groove; BORDER-TOP: rgb(0,0,0) 1px groove; BORDER-LEFT: rgb(0,0,0) 1px groove; BORDER-BOTTOM: rgb(0,0,0) 1px groove">1</TD>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px groove; BORDER-TOP: rgb(0,0,0) 1px groove; BORDER-BOTTOM: rgb(0,0,0) 1px groove">2</TD></TR>
<TR>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px groove; BORDER-TOP: rgb(0,0,0) 1px groove; BORDER-LEFT: rgb(0,0,0) 1px groove; BORDER-BOTTOM: rgb(0,0,0) 1px groove">3</TD>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px groove; BORDER-BOTTOM: rgb(0,0,0) 1px groove">4</TD></TR></TBODY></TABLE>

1 2
3 4

单虚线表格 代码

<TABLE cellSpacing=0 cellPadding=0 width=220 bgColor=#E5E5E5>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-TOP: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">1</TD>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-TOP: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">2</TD></TR>
<TR>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">3</TD>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">4</TD></TR></TBODY></TABLE>

1 2
3 4

双虚线表格 代码

<TABLE cellSpacing=3 cellPadding=0 width=220 bgColor=#FFFFCC>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-TOP: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">1</TD>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-TOP: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">2</TD>
<TR>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-TOP: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">3</TD>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-TOP: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">4</TD></TR></TR></TBODY></TABLE>

1 2
3 4

立体表格 代码

<TABLE cellSpacing=0 borderColorDark=#ffffff cellPadding=0 width=220 borderColorLight=#ffffff border=1>
<TBODY>
<TR>
<TD borderColorLight=#000000 bgColor=#b7b7b7 borderColorDark=#eeeeee>1</TD>
<TD borderColorLight=#000000 bgColor=#b7b7b7 borderColorDark=#eeeeee>2</TD></TR>
<TR>
<TD borderColorLight=#000000 bgColor=#b7b7b7 borderColorDark=#eeeeee>3</TD>
<TD borderColorLight=#000000 bgColor=#b7b7b7 borderColorDark=#eeeeee>4</TD></TR></TBODY></TABLE>

标题1

正文内容

标题表格1  代码

<FIELDSET style="WIDTH: 220px" align=center><LEGEND><FONT color=#cc99ff>标题1 </FONT></LEGEND>
<P style="TEXT-INDENT: 2em"><FONT color=#993399>正文内容</FONT></P></FIELDSET>

标题2

正文内容

标题表格2  代码

 <FIELDSET style="WIDTH: 220px" align=center><LEGEND align=center><FONT color=#cc99ff>题目2 </FONT></LEGEND>
<P style="TEXT-INDENT: 2em"><FONT color=#993399>正文内容</FONT></P></FIELDSET>

标题3

正文内容

标题表格3   代码

<FIELDSET style="WIDTH: 220px; COLOR: #000000; BORDER-TOP-STYLE: groove; BORDER-RIGHT-STYLE: groove; BORDER-LEFT-STYLE: groove; BORDER-BOTTOM-STYLE: groove" align=center><LEGEND style="BORDER-RIGHT: #f66600 1px solid; BORDER-TOP: #f66600 1px solid; BORDER-LEFT: #f66600 1px solid; WIDTH: 50px; COLOR: #cc99ff; BORDER-BOTTOM: #f66600 1px solid; HEIGHT: 0px">标题2</LEGEND>
<P style="TEXT-INDENT: 2em"><FONT color=#995599>正文内容</FONT></P></FIELDSET>

标题4

正文内容

标题表格4  代码

 <FIELDSET style="WIDTH: 220px; COLOR: #000000; BORDER-TOP-STYLE: groove; BORDER-RIGHT-STYLE: groove; BORDER-LEFT-STYLE: groove; BORDER-BOTTOM-STYLE: groove" align=center><LEGEND style="BORDER-RIGHT: #f66600 1px solid; BORDER-TOP: #f66600 1px solid; BORDER-LEFT: #f66600 1px solid; WIDTH: 50px; COLOR: #cc99ff; BORDER-BOTTOM: #f66600 1px solid; HEIGHT: 0px" align=center>标题4</LEGEND>
<P style="TEXT-INDENT: 2em"><FONT color=#995599>正文内容</FONT></P></FIELDSET>

1 2
3 4

闪底表格 代码

<TABLE cellSpacing=2 width=220 background=http://img838.ph.126.net/KqL9raSTWeliWxXM1CKH-w==/812899732741320166.gif border=1>
<TBODY>
<TR>
<TD>1</TD><TD>2</TD></TR>
<TR>
<TD>3</TD><TD>4</TD></TR></TBODY></TABLE>


表格代码 - 闲散人也 - .

★10
  评论这张
 
阅读(77)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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