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

Good fun网易博客

图片文字素材库,时尚音乐,生活百科,精品博客

 
 
 

日志

 
 

博客表格边框的制作及应用  

2010-12-02 19:20:42|  分类: 博客制作技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

博客表格边框的制作及应用

Good fun编辑

本文是写给初学者看的,高手勿扰!

首先来讲一下,博客本来就携带的表格添加功能

点击日志菜单右上角的全部功能(如下图):

博客表格的制作及应用 - Good fun - Good fun网易博客

 再点击添加表格按钮(如下图):

博客表格的制作及应用 - Good fun - Good fun网易博客

出来如下对话框,按照下面截图设置 各参数(本例是一个3行2例的表格设置)

博客表格的制作及应用 - Good fun - Good fun网易博客

本例设置的表格宽度是400像素,效果如下: 

   
   
   

 你可以在表格中编辑你的内容(如下效果):

 博客名称  博客地址
 11111  2222
 33333  44444
     

         好了,这是最基本的表格!但你在编辑中汇发现当,这个两列的表格,左右两列的字数不一样的时候,宽度会不均匀了(如下效果)!

 123456  123
   
   
   

        我要它宽度相等,或者设置宽度的大小比例,那么就的去代码编辑状态更改了!点击全部功能菜单上的这个“<>”符号,去代码编辑状态,代码编辑状态的代码如下:

 <TABLE  cellSpacing=1 cellPadding=1   width=400 border=1>
<TBODY>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR></TBODY></TABLE></P>

 下面简单说明一下这个代码:

1、代码中的“cellPadding=1  ”是指单元格边距,可以改变数字“1”来改变表格内内容离边框线的距离!

2、代码“cellSpacing=1”是单元格间距,可以改变数值“1”来改变每个单元格之间的距离!

3、“width=400 ”表格的宽度大小,用像素表示,改变数值“400”改变表格宽度!

4、“border=1”是表格线的粗细,改变数值改变粗细!

5、代码中的每一个“<TR>”是指每一行,有几个“<TR>”就是几行,“<TD>”是列,每个<TR><TD>后面都必须有结束语,即“</TR>”和“</TD>”

了解完基本属性后,继续说怎么设置各列的高度和宽度!


上面说了,每个<TR>是指一行,那么设置行的高度,我们就在它后面添加一个高度属性就可以了,比如:“height=50”,设置列的宽度,我们就在<TD>后面添加宽度属性就可以了,例:“width=300”,我们把三行的高度分别设置为50/30/20像素,两列的宽度设置为300/100像素,看看效果:

设置好后的代码如下:

 <TABLE cellSpacing=1 cellPadding=1    width=400 border=1>
<TBODY>
<TR  height=50>
<TD  width=300>&nbsp;</TD>
<TD  width=100>&nbsp;</TD></TR>
<TR  height=30>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR>
<TR  height=20>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR></TBODY></TABLE></P>

 效果如下:
   
   
   

 

        你设置宽度后,文字多的那列就不会长了,多的话会自动换行!宽度设置好了,可是这个表格背景是透明的,我想要设置颜色!那么你就的添加背景颜色属性“bgcolor=颜色代码”本例就用白色举例,白色的代码是“#ffffff”,即“bgcolor=#ffffff”,如果你是设置整个表格的背景,你就把它添加到“<TABLE”的后面,如果你是每列都想不同颜色,你就把它添加到“<TD ” 的后面,如下两个我设置的代码,

 

<TABLE  bgcolor=#ffffff   cellSpacing=1 cellPadding=1   width=400 border=1>
<TBODY>
<TR  height=50>
<TD  bgcolor=#336699    width=300>&nbsp;</TD>
<TD    bgcolor=#33ff99  width=100>&nbsp;</TD></TR>
<TR  height=30>
<TD    bgcolor=#11ddcc  >&nbsp;</TD>
<TD    bgcolor=#5566aa  >&nbsp;</TD></TR>
<TR  height=20>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR></TBODY></TABLE></P>

 

效果如下:

   
   
   

 

          请注意看上面的代码,最后的两个<TD>没有设置颜色,所以它显示的是表格的整体背景颜色,就是<TABLE>后面的颜色代码所代表的颜色!

下面说一下,怎么使用图片作为表格的背景呢?

方法很简单,其实就是在表格代码“<TABLE ”后面,添加一个表格背景图片属性代码“background=图片地址”就可以了:

本文最初的表格是三行两列的表格(如下代码):

<TABLE cellSpacing=1 cellPadding=1   width=400 border=1>
<TBODY>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR></TBODY></TABLE></P>

 

我们给它添加一个表格背景图片属性“background=图片地址”,图片地址,你只要右击博客或者相册的照片,属性就有了!复制黏贴就可以!

博客表格的制作及应用 - Good fun - Good fun网易博客

 就像这张图片,你右击图片,属性后就有如下对话框:

博客表格的制作及应用 - Good fun - Good fun网易博客

 从这个属性对话框,我们知道了这个图片的地址和大小,为了使表格好看,我们把表格的宽度和高度设置为和图片一样,加入图片更改表格宽度和高度后代码如下:

<TABLE cellSpacing=1 cellPadding=1    width=720    height=482   background=http://img767.ph.126.net/mf801zcEh8q-PlH1O7tegQ==/4914553093368305738.jpg 

   border=1>
<TBODY>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR></TBODY></TABLE></P>


效果如下:

 
   
   
   

 

我们也可以在表格编辑你的内容,这个代码你也可以作为在图片上写文字用!也可以直接在图片上加图片或者透明flash!如下效果:

 

 11111111  2222222
 33333333  相关链接 - Good fun - Good fun网易博客

 

 

 

这个是三行两列的表格,如果说是一行一列(可以在代码编辑状态对代码通过增删<TR>....</TR>和<TD>......</TD>来增加行和列),边框粗细是“0”,那么效果就只是显示一张图片一样了,但这个图片上面你可以鼠标直接图片,就可以在上面编辑你的文章了!

 

表格来使图片的拼合没有接缝

新朋友做了音画,图片切割了,可是在博客上传后,图片间有间隙,也可以用表格来使图片的拼合没有接缝,如下图片:

博客表格的制作及应用 - Good fun - Good fun网易博客

 为了音画打开速度快点,把大图切割,本例把上面的图片切割成如下四块:

博客表格的制作及应用 - Good fun - Good fun网易博客 博客表格的制作及应用 - Good fun - Good fun网易博客
 

 博客表格的制作及应用 - Good fun - Good fun网易博客 博客表格的制作及应用 - Good fun - Good fun网易博客

 

怎么使这四个图片拼合,没有间隙,那么我们用一个两行两列的表格就可以(这个根据你的实际切割来定义,一般音画只要横着切割就可以了,你可能的切割成好多张小图来拼合,方法一样,你要是只是把音画切割成横长的小图片,你有几张图片,就用多少行一列的表格来定义就可以了),继续我们的话题,两行两列的代码如下(你可以按本文最初添加表格按钮来实现,但这里的表格边框线粗细“border=0"最好设置为0,不然图片拼合处有一条线):
 

<TABLE cellSpacing=1 cellPadding=1    width=400 border=1>
<TBODY>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR></TBODY></TABLE></P>
 

拼合图片的话的加一些单元格图片背景、单元格宽度,单元格高度属性,还的把代码第一行中的三个属性“cellSpacing=1 cellSpacing=1  border=1 ”的值都设置为“0”,本例基本代码如下:

<TABLE cellSpacing=0 cellPadding=0     border=0>
<TBODY>
<TR   height=第一张图片高度(这里第二张图片的高度和第一张必须一样高的)>
<TD   width=第一张图片宽度    background=第一张图片地址     >&nbsp;</TD>
<TD   width=第二张图片宽度    background=第二张图片地址>&nbsp;</TD></TR>
<TR  height=第三张图片高度(这里第三张图片的高度和第四张必须一样高的)>
<TD   width=第三张图片宽度    background=第三张图片地址>&nbsp;</TD>
<TD   width=第四张图片宽度    background=第四张图片地址>&nbsp;</TD>

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


 

应用到上面的四张图片拼合,更改后代码如下:

 

 

<TABLE cellSpacing=0   cellPadding=0   border=0>
<TBODY>
<TR   height=241>
<TD   width=360    background=http://img154.ph.126.net/30rtHsu9-DBcXR5obwwqew==/2266999462429055948.jpg >&nbsp;</TD>
<TD  width=360    background=http://img.ph.126.net/vlrw5GeBh0UIIpPUpdQd1A==/2321324132933303529.jpg>&nbsp;</TD>

</TR>
<TR  height=241>
<TD   width=360    background=http://img762.ph.126.net/bAqvWD-Hb40CIpYgz3Zk3Q==/4933130441831217949.jpg>&nbsp;</TD>
<TD   width=360    background=http://img238.ph.126.net/9-YRZ-FYCItBHUfF2M98yg==/1418915357599805888.jpg>&nbsp;</TD>

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

拼合效果如下:

 

   
   

 

博客表格边框的制作及应用 - Good fun - Good fun网易博客 博客表格边框的制作及应用 - Good fun - Good fun网易博客 博客表格边框的制作及应用 - Good fun - Good fun网易博客 博客表格边框的制作及应用 - Good fun - Good fun网易博客 博客表格边框的制作及应用 - Good fun - Good fun网易博客 博客表格边框的制作及应用 - Good fun - Good fun网易博客 博客表格边框的制作及应用 - Good fun - Good fun网易博客 博客表格边框的制作及应用 - Good fun - Good fun网易博客 博客表格边框的制作及应用 - Good fun - Good fun网易博客 表格在日志边框中的应用:

我们先看一段一行一列的表格基本代码如下:

<P align=center >

<TABLE  cellSpacing=1 cellPadding=1  height=300  width=400 border=1>
<TBODY>
<TR>
<TD>

&nbsp;

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

</P>

效果如下:

 

 

 

 这个最简单的日志边框,你可以在里面直接写文章了,你可以按本文最初的说法,给背景加颜色,但好像太单调,那么我们就在表格内再添加这样一个或者多个表格,使表格多层,看上去更漂亮!

上面这个表格的代码中只有一组“

<TABLE  cellSpacing=1 cellPadding=1  height=300  width=400 border=1>
<TBODY>
<TR>
<TD>

。。。。。。

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

我们把他变成两组(就是两层),代码如下:

<P align=center>

<TABLE  cellSpacing=15 cellPadding=1  height=300  width=400 border=1>
<TBODY>
<TR>
<TD>

<TABLE  cellSpacing=1 cellPadding=1  height=300  width=100%   border=1>
<TBODY>
<TR>
<TD>

&nbsp;

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

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

</P>

 

效果如下:

 

 

 

 

 这个是透明背景的,我们给这两层边框分别添加个背景颜色,即添加属性“bgcolor=背景颜色代码”,添加后代码如下:

<P align=center>

<TABLE  cellSpacing=15 cellPadding=1  height=300  width=400  bgcolor=#ff3366    border=1>
<TBODY>
<TR>
<TD>

<TABLE  cellSpacing=1 cellPadding=1  height=300  width=100%    bgcolor=#009955   border=1>
<TBODY>
<TR>
<TD>

&nbsp;

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

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

</P>

 

效果如下: 

 

 

 本效果的边框线没有设置颜色,是本博客默认的灰色,那么你想设置边框线的颜色,可以添加属性“bordercolor=颜色码”来设置,设置后代码如下(为了更看得清楚,我把边框线粗细设置为4):

 

<P align=center>

<TABLE  cellSpacing=15 cellPadding=1  height=300  width=400  bgcolor=#ff3366    bordercolor=#ff6600 border=4>
<TBODY>
<TR>
<TD>
<TABLE  cellSpacing=1 cellPadding=1  height=300  width=100%    bgcolor=#009955  bordercolor=#000000   border=4>
<TBODY>
<TR>
<TD>&nbsp; </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </P>

 

 效果如下:

 

 

也可以分别设置左上边框和右下边框线颜色,使其有个立体投影效果,添加代码属性:(bordercolorlight=颜色码 亮边框线  bordercolordark=颜色码  暗边框线),本例更改设置后代码如下:

 

<P align=center>

<TABLE  cellSpacing=15 cellPadding=1  height=300  width=400  bgcolor=#ff3366    bordercolor=#ff6600 border=4>
<TBODY>
<TR>
<TD>
<TABLE  cellSpacing=1 cellPadding=1  height=300  width=100%    bgcolor=#009955  bordercolorlight=#ffffff      bordercolordark=#333333  border=4>
<TBODY>
<TR>
<TD>&nbsp; </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </P>

 

 

 

也可以按本文最初说的,给表格添加背景图片,边框线大小可以设置为0,当然你不嫌麻烦可以设置大小和颜色,这样更好看!边框层次越多,效果更美观!一般日志边框在9层左右!你可以通过添加几组这个<TABLE  cellSpacing=单元格间距   cellPadding=单元格边距    height=边框高度  width=边框宽度    bgcolor=背景颜色代码(也可以替换成“background=背景图片地址”)     bordercolor=边框线颜色代码    border=边框线粗细>
<TBODY>
<TR>
<TD>

(里面的表格代码。。。。)

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

代码来添加层次,然而每一层代码中的代码“cellSpacing=15 cellPadding=1 ”的数字分别可以自己设置,这关系到每一层背景图片露出的边的宽度大小!

下面来看一个8层日志边框的实例:

 从外到内素材图片如下:

博客表格边框的制作及应用 - Good fun - Good fun网易博客

 

博客表格边框的制作及应用 - Good fun - Good fun网易博客

  

博客表格边框的制作及应用 - Good fun - Good fun网易博客

 

博客表格边框的制作及应用 - Good fun - Good fun网易博客

 

博客表格边框的制作及应用 - Good fun - Good fun网易博客

 

代码如下:

<P align=center>
<TABLE id=table1 title="Good fun边框" cellSpacing=0 borderColorDark=#000000 cellPadding=2 width=740 borderColorLight=#000000 background=http://img848.ph.126.net/MzYebKyfU5xiy6EieyQ2Rw==/693835817593841761.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE title="Good fun边框" cellSpacing=0 borderColorDark=#000000 cellPadding=35 width="100%" borderColorLight=#000000 background=http://img158.ph.126.net/JSwh-kQz8oSRNFMFE2-ieg==/1494632126335482883.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE title="Good fun边框" cellSpacing=0 borderColorDark=#000000 cellPadding=2 width="100%" borderColorLight=#000000 background=http://img848.ph.126.net/MzYebKyfU5xiy6EieyQ2Rw==/693835817593841761.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE title="Good fun边框" cellSpacing=0 borderColorDark=#000000 cellPadding=15 width="100%" borderColorLight=#000000 background=http://img165.ph.126.net/aoFreOefDn51sY6lv0nrLg==/1501106050799013205.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE title="Good fun边框" cellSpacing=0 borderColorDark=#000000 cellPadding=1 width="100%" borderColorLight=#000000 background=http://img848.ph.126.net/MzYebKyfU5xiy6EieyQ2Rw==/693835817593841761.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE title="Good fun边框" cellSpacing=0 borderColorDark=#000000 cellPadding=10 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/uploadfile/2004-8/2004813141196.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE title="Good fun边框" cellSpacing=0 borderColorDark=#000000 cellPadding=1 width="100%" borderColorLight=#000000 background=http://img848.ph.126.net/MzYebKyfU5xiy6EieyQ2Rw==/693835817593841761.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE title="Good fun边框" cellSpacing=0 borderColorDark=#000000 cellPadding=15 width="100%" borderColorLight=#000000 border=1>
<TBODY>
<TR>
<TD>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>

 

效果如下:


 

 

 

      这篇文章写了这么多,希望你看明白了,祝你制作愉快!分享请点击引用,引用不得删除此处链接和删改! 

  评论这张
 
阅读(3213)| 评论(39)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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