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

天南地北太极城人

满城灯火列星案 一曲洵水绕太极

 
 
 

日志

 
 

表格的嵌套格式和图片美化。  

2008-03-23 13:56:10|  分类: 博客技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |


 

边框对于一个表格的美化很重要,这里通过基本的表格代码,再深入讲解表格的嵌套,以及表格的美等问题,为发表音乐贴打好基础。

一、边框表格的基本语法

先来看一个简单的边框:

代码:

<table width="360" height="250" border="18" cellspacing="10" cellpadding="10" align="center" valign="middle" bgcolor="#f0ffff" bordercolor=#c3c3c3><tr><td>博客秘籍(小强版)</td></tr></table>

效果:

博客秘籍(小强版)

 

在这段代码里的<table.........><tr><td>博客秘籍(小强版)<*/td><*/tr><*/table>就组成边框表格的基本语法:开始标签,内容,结束标签.这三个标记<table><tr><td>是定义表格的最重要的标记,可以说学懂这三个就足己制作一个边框表格了.

先看懂这个代码:

table:这是一个做表格的元素,要描述内容的属性都写在由它组成的开始标签里.

tr:描述列的元素,列就是从上到下的行.

td:描述格的元素,格就是每行里的格(大概意思).

table的属性常用的有:

width= 表格宽度,接受绝对值(如180)及相对值(如 80%,相对可显示的宽度)

height= 表格高度,接受绝对值(如 180)

border= 表格框的厚度.

cellspacing= 表格格线离边框距离

cellpadding= 文字图片离格线的距离.

align= 表格的摆放位置(水平),可选值为: left, right,center(左,右,中心)

valign= 表格内字画等的摆放贴位置(垂直)可选值为: top, middle, bottom。(顶,中间,底部 ) background= 表格的背景图,与 bgcolor 不要同用。 bgcolor= 表格背景颜色,与background 不要同用. bordercolor= 表格边框颜色. bordercolorlight= 表格边框向光部分的颜色. bordercolordark= 表格边框背光部分的颜色,(使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效)

 

二、边框的制作

1.颜色框: 简单地只要写上表格边框颜色属性 bordercolor 和边框的厚度属性 border,再写上表格的宽 width 和高 height 就会显示一个你所指定的颜色框.

据此写一个代码:

<table bordercolor=#c3c3c3 border=8 align=center width=360 height=250 cellspacing=0><tr><td>博客秘籍(小强版)</td></tr></table>

显示效果为:

博客秘籍(小强版)

 

这里多写了一个格线属性cellspacing=0,格线就是上面第一个边框里的那根细线(打表格用的),不写格线属性浏览器就默认为1.我们不需要格线时,请一定写上cellspacing=0,这个默认有时会捣乱的. 下面是不写的效果:

博客秘籍(小强版)

 

那么有的新手会问:为什么我已经定好尺寸的框仍会被图片撑大?其实这是因为框定好宽和高以后,如果放在里面的内容大于它,则按大的显示.

例如还是上面那个尺寸的框,放进一张大的图片:

代码:

<table align=center bordercolor=#0000ff border=8 width=360 height=250 cellspacing=0><tr><td><img src=http://blog.163.com/photo/6NoQUdDf0ZBSFYfCMYhEDw==/1154328879490405551.jpg width=450></td></tr></table>

显示效果为:

 

以上的效果提示我们要注意两点:

1)有时按需要定好框的尺寸,不容许再变的,那就要注意放进去的内容不能大于框的尺寸,以免撑大.

2)因为放进去的内容会撑大框,有时干脆不写表格的尺寸,让内容自动撑大反而会服贴.

 

三、素材框:

利用素材图片做框的原理是:把素材图片做成各种背景图,再把背景图一张张覆盖上去,每后一张都比前一张小一点,这些边上露出来的小一点就组成了一个框的效果. 边框要做多少层就要做多少个背景图,要做成多少个背景图也就是要做多少个表格.每后一个表格都要放到前一个表格里. 要使每后一张都比前一张小一点的方法:只要在前一张代码里设定格线厚度cellspacing=就行了,设定多大就露多大.

下面是已经选好的两张素材图.

 

用第一张做背景图:

代码:

<table align="center" border="0" cellpadding="0" cellspacing="10" width="90%" background="http://blog.163.com/photo/B7TMAhMlqOMLo9QTio714A==/1412159958157367961.jpg">

<tr><td>博客秘籍(小强版)</td></tr></table>

效果如下:

博客秘籍(小强版)

 

应用注意点:代码中设了格线cellspacing="10",这在下一张背景图放进去后才能看到, 表格宽用了相对值90%,相对可显叶面的90%. 下面把第二张做背景图,将格线设为5,width="100%".

将代码

<table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="http://www.zhulintingyu.com/non-cgi/usr/60/60_52_5.jpg">

<tr><td>博客秘籍(小强版)</td></tr></table>

放到前一张里的如下代码:

<table align="center" border="0" cellpadding="0" cellspacing="10" width="90%" background="http://blog.163.com/photo/B7TMAhMlqOMLo9QTio714A==/1412159958157367961.jpg">

<tr><td><table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="http://blog.163.com/photo/EMOsGjMXarhVwNEJOL05bg==/1412159958157367310.jpg">

<tr><td>博客秘籍(小强版)</td></tr></table></td></tr></table>

效果如下:

博客秘籍小强版

 

现在加一张图片,看看整体效果如何:

看看这两层边框的代码:

<TABLE cellSpacing=10 cellPadding=0 align=center background=http://blog.163.com/photo/B7TMAhMlqOMLo9QTio714A==/1412159958157367961.jpg border=0>
<TBODY><TR><TD>
<TABLE cellSpacing=5 cellPadding=0 width="100%" align=center background=http://blog.163.com/photo/EMOsGjMXarhVwNEJOL05bg==/1412159958157367310.jpg border=0>
<TBODY><TR><TD>

<IMG src=http://blog.163.com/photo/6NoQUdDf0ZBSFYfCMYhEDw==/1154328879490405551.jpg width=450 twffan="done"></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 

看懂这些代码的意思了吗?其实最重要的还是应该做到前面有几个开始标签,结束就必须有收尾标签。

音画帖往往做框用很多表格,里面又大框套小框的用很多表格,由于疏忽经常会出现少写或多写收尾。使得整个帖变形. 所以,做了几个表格,就必须有几组收尾标签,多一个少一个都不行.( 即:多少<td><tr><table>对应多少</td></tr></table>)。

 

四、图和文字放进框里的方法及注意点

代码格式:<table ......><tr><td>内容</td></tr></table>

将图和文字的代码从上到下按顺序代替上面的"内容"放到表格里. 代码安放的一些注意点:

1.竖向处理:,首先,表格属性里不写高 height ,这样可让内容自动撑高. 凡是要空行的地方可用换行标签<br>来设定,不够可以多加几个<*br>,到满意为止, 也可用分段标签<P>......</P>,不够再加<br>

2.横向处理:首先,在最后一层表格里写上文字图片离格线的距离属性: cellpadding= .不让内容靠边. 再强调一遍,放进去的所有内容的宽度不要大于框的内宽,为了美观还要它们小一点. 图片宽度好设定,文字一般也用<br>分行的方法来限定它的宽度。

3.内容居中:将位置属性align=center放到最后一层表格的<td>标签里,框里的内容就会都居中了,代码格式:<table ......><tr><td align=center>内容</td></tr></table>

 

本教程基于:天籁之声新手学堂编写,这里做些改动,感谢LAN提供!

更多精彩,尽在太极城人博客

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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