财经社区女性社区汽车社区军事社区文学社区社会社区娱乐社区游戏社区个人空间
上一主题：路过温暖路过爱 下一主题：2007年01月19日推荐用帖
巧用表格标签(仅供本坛朋友参考,勿推荐)
[楼主] 作者:蓝天是我故乡  发表时间:2007/01/21 22:42
 收藏 修改 取消加精 置顶 锁定 标题 来源 删除
点击:230次

巧用表格标签

    前几天向朋友们介绍了《认识html》（可查看）《贴上心爱的片片》（可查看）    言归正传，今天这一节，我们探讨巧用表格标签的问题。

    在帖子中引入表格标签，能够使自己的帖子得到有效的固定，不会在屏幕上或大或小，游移不定。编辑得当，页面得到美化，也增添了帖子的视觉效果。网页的制作便是大量地引入了表格标签。

    表格标签最主要的有三个元素：

    表格的开始与结束：<table>...</table>

    表格行的开始与结束：<tr>...</tr>

    表格格子的开始与结束：<td>...<td>

    每个元素的开始标签，又可以携带若干个属性。各属性之间无先后秩序，属性也可以省略（即取默认值）。属性主要有位置（align=left\center\right）、背景图片的路径(background=图片地址)、边框大小(border=数字)、背景颜色(bgcolor=颜色码)、边框颜色(borderclor=颜色码)、内容与网格线之间的距离(cellpadding=数字)、网格线与网格线之间的距离(cellspacing=数字)、表格元素的宽度（width=数字或百分比）、高度（height=数字）等等。

    在一个帖子里，我们可以使用多个表格，或者多个行，或者多个格子。也可以表格套表格，格子套格子，可以随着自己的心愿来编辑。如蓝天在《大话绿洲》（可点击这里查看效果）<TABLE cellSpacing=0 cellPadding=2 width=800 border=0>
<TBODY>
<TR>
<TD vAlign=top align=middle>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width="35%">
注：此格子为一系列小图片
</TD>
<TD width="65%">
注：此格子为文字
</TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>

    以下再讲一个四层表格的实例，其中最后一层贴图的表格是由两个表格行组成的，一行为图片，一行为文字。

    源代码如下：

<P align=center>
<TABLE id=table1 style="LEFT: 0px; WIDTH: 762px; POSITION: relative; TOP: 0px" cellSpacing=40 background=http://sarah2001.myrice.com/wyzf/bg8/30.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=6 borderColorDark=#d0afba cellPadding=0 width="96%" align=center borderColorLight=#d0afba background=http://ex-c.com/FREE/free30.gif border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#d0afba cellPadding=0 width="100%" borderColorLight=#d0afba background=http://sarah2001.myrice.com/wyzf/bg1/bjsc014.gif border=0>
<TBODY>
<TR>
<TD>
<DIV align=center><FONT style="FONT-SIZE: 18pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #add8e6; LINE-HEIGHT: 150%; FONT-FAMILY: 宋体; HEIGHT: 3px" size=7><strong>图片及注释</strong></FONT></DIV>
<table align=center width=510 border=0 bgcolor="#E9F5D9" cellspacing=5>
<tr>
<td>
<img border=0 width=100% src=http://gb.chinabroadcast.cn/mmsource/images/2005/10/13/pa051013096.jpg>
</td>
</tr>
<tr>
<td>
<font class=p4><P align=center>绒布冰川　(西 藏)</P></font>
</td>
</tr>
</table>
<table align=center width=510 border=0 bgcolor="#E9F5D9" cellspacing=5>
<tr>
<td>
<img border=0 width=100% src=http://gb.chinabroadcast.cn/mmsource/images/2005/10/13/pa051013097.jpg>
</td>
</tr>
<tr>
<td>
<font class=p4><P align=center>托木尔冰川　(新 疆)</P></font>
</td>
</tr>
</table>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>

    在这个源代码中，LEFT: 0px表示边框与页面边界的距离。px前面的值取0，即为与左边界重合；取负数，边框就会突破页面左边界；取正数，边框右边就会突破页面的右边界。width：762PX表示边框的整体外延的宽度，762正好是正常页面的宽度。TOP：0PX表示边框上延与页面顶部的距离，一般取0。cellSpacing=40 是第一层边框与第二层边框的距离，数字越大，边框外层的宽度越大，根据需要调整。 效果如下：

图片及注释

绒布冰川　(西 藏)

托木尔冰川　(新 疆)

本帖地址：http://club.xilu.com/211003/msgview-135820-88757.html[复制地址]
上一主题：路过温暖路过爱 下一主题：2007年01月19日推荐用帖
 [2楼]  作者:zkoct  发表时间: 2007/01/21 22:48 
[加为好友][发送消息][个人空间]
回复 修改 来源 删除

回复:俺倒是并非没耐心
主要是没有时间，先收藏，回头有时间好好研究。

※※※※※※
http://211003.bbs.xilu.com/ 欢迎光临随缘楼论坛
 [3楼]  作者:回家路不远  发表时间: 2007/01/22 06:08 
[加为好友][发送消息][个人空间]
回复 修改 来源 删除

回复:原来蓝天老师
贴子制作的精美是师从多家啊。
今儿俺拜你为师了，收俺这徒弟不？

呵呵，蓝天老师有关贴子制作的贴，
俺都转俺以前的小屋了。
珍藏，有时间仔细研读。
谢谢！

※※※※※※
中年随缘楼：http://211003.bbs.xilu.com 觉醒之光：http://cnmanpxp.bbs.xilu.com
 [4楼]  作者:清秋月影  发表时间: 2007/01/22 09:28 
[加为好友][发送消息][个人空间]
回复 修改 来源 删除

回复:感觉越来越难了
刚才开始学感觉还行,可是越学越觉得内容多且深奥!
老师,如果我咬着牙学下去,你说小月能学会不啊?
还有,我发的音乐怎么不会动呢,也没声音,一点开始按扭,就是准备就绪,可立刻又死悄悄了:(
感谢老师,天天努力,减肥了都!哈哈~~

※※※※※※
 [5楼]  作者:骄阳如炽  发表时间: 2007/01/22 09:41 
[加为好友][发送消息][个人空间]
回复 修改 来源 删除

回复:请教
您教的东西，俺都收藏了。

另请教一下：自己做的POWERPOINT，怎么上传至论坛？
[楼主]  [6楼]  作者:蓝天是我故乡  发表时间: 2007/01/22 10:35 
[加为好友][发送消息][个人空间]
回复 修改 来源 删除

回复:你做的POWERPOINT课件~~
在西陆论坛是不能直接上传的。有一些网站，如制作flash并能上传的网站，一般也能上传POWERPOINT文件。但我没有试过，你自己试验一下好吗？
问好！

※※※※※※
蓝天的博客:http://blog.sina.com.cn/u/1229956314
[楼主]  [7楼]  作者:蓝天是我故乡  发表时间: 2007/01/22 10:37 
[加为好友][发送消息][个人空间]
回复 修改 来源 删除

回复:小月一定能学会
要不我这老师白当了：））

你前面发的帖子就有很大进步。如果再加上表格标签，作一些固定和调整，效果会更好。

※※※※※※
蓝天的博客:http://blog.sina.com.cn/u/1229956314
[楼主]  [8楼]  作者:蓝天是我故乡  发表时间: 2007/01/22 10:38 
[加为好友][发送消息][个人空间]
回复 修改 来源 删除

回复:呵呵
如果你愿意，咱们就互相学习吧：））

※※※※※※
蓝天的博客:http://blog.sina.com.cn/u/1229956314
 [9楼]  作者:骄阳如炽  发表时间: 2007/01/22 10:38 
[加为好友][发送消息][个人空间]
回复 修改 来源 删除

回复:哦，不是课件，只是贺卡，或小文
谢谢。我在试呢。时间允许的话。
[楼主]  [10楼]  作者:蓝天是我故乡  发表时间: 2007/01/22 10:39 
[加为好友][发送消息][个人空间]
回复 修改 来源 删除

回复:Z老师辛苦
做网页确实需要时间，尤其刚开始学习的时候，费神费时呀：））

※※※※※※
蓝天的博客:http://blog.sina.com.cn/u/1229956314
[楼主]  [11楼]  作者:蓝天是我故乡  发表时间: 2007/01/22 10:41 
[加为好友][发送消息][个人空间]
回复 修改 来源 删除

回复:如果你改变文件格式，
比如图片格式，或许能上传。有些图片也是动态的呀，呵呵。
问好！

※※※※※※
蓝天的博客:http://blog.sina.com.cn/u/1229956314
 [12楼]  作者:温柔稻草人  发表时间: 2007/01/22 21:57 
[加为好友][发送消息][个人空间]
回复 修改 来源 删除

回复:今天偶草人学了你教的东东
点击查看原图

※※※※※※

精彩推荐>>

  简捷回复 [点此进入编辑器回帖页]  文明上网 理性发言
 推荐到西陆名言:
签  名: 一 二 三 无
作  者:
密  码:
游客来访 
注册用户 提 交
西陆网(www.xilu.com )版权所有 点击拥有西陆免费论坛  联系西陆小精灵

0.18111300468445