分享

Space 简易教程(十九)—— 表格应用实例

 小明 2006-09-25
Space 简易教程(十九)—— 表格应用实例
这篇教程主要介绍一下<Table>语句的应用实例,如果有的朋友对<Table>语句还不是很熟悉,请先读一下我的前一篇简易教程(十八)。等头脑中对表格语句有个基本概念,再回来看这里的例子就比较容易理解了。

 

(一)多栏结构日志

实例:

照例去浏览好友的空间,意外地发现崇蓝的无法访问。一问,果然像我所想的, 被关闭了。自鱼悠森林关闭了自己空间以后,这是第4个了。

一点也不意外,毕竟 MSN space 是个太牵扯人精力的东西。越来越多好友的空间需要一一浏览,回复留言,写新日记,学习更多美化空间的技巧~~~~~~每次都会不知不觉在电脑前坐上几个小时。对于还在念书的崇蓝和小鱼来说,把更多的精力放在学业上是再正确不过的选择。

建这个空间的时候,其实也没想好做什么用。毕竟,单纯的日记是自己的秘密,不希望别人看。这里其实更像一个私人的 BBS,把自己所感的所想的放到这里,引来一些好友来关怀,来评论。在这里结识了很多新朋友:崇蓝,小轩窗的蝴蝶,流浪的猫猫,小鱼~~~~~~也读到了不少美文:长江水,高原的风筝,臭猫猫~~~~~~再后来,开始学习各种美化空间的技巧,SINO2000,綺羅香~~~~~~

于是,建设自己的空间成了我赋闲生活唯一的事业,每天在这上面耗费的时间,牵扯的精力也越来越多。看到自己的空间越建越好,也颇为自豪。

不知道如此这般的花费心血和大把的时间放在这上面是对还是不对。回过头仔细看看,一般上班族的空间相对会比较简单,长江水,高原的风筝等都是以文见长;空间美化的比较好的一般都是学生,更以留学生居多,想来一来读书期间有比较多的时间,二来学生时代一般是人最爱钻研、最有热情的时代。工作很忙的人,一般会很长时间更新日志,那是因为在重压之下,没有更多的时间去感悟,去感慨。

其实到现在我也说不清自己对网络空间是怎样的感情。不过,等到再忙起来,也会无暇照顾这里。到时候我的空间会不会也遇到被关闭的命运呢?

 

以上文字引自:猫言猫语

语句: 

<DIV align=center>
<TABLE cellSpacing=10 cellPadding=2 width="95%">
<TBODY>
<TR>
<TD vAlign=top width="50%"><P>左栏文字</P></TD>
<TD vAlign=top width="50%"><P>右栏文字</P></TD>
</TR></TBODY></TABLE></DIV>
 
这个例子不仅是为了表现两栏结构,而且还想说明通过表格可以在一段文字的上下左右设置空白,以某些满足排版的需要,使一篇日志内的文字不显得过于拥挤。
 

 

(二)图文排版

实例:




登 鹳 雀 楼

王之涣(唐)

白 日 依 山 尽
黄 河 入 海 流
欲 穷 千 里 目
更 上 一 层 楼

赏析:在《登鹳雀楼》一诗中,王之涣不仅刻画了祖国的壮丽山河,而且写出了登高远望的襟怀。向西远看,夕阳贴着高山落下,黄河滚滚流向大海。要想看到千里之远,就得再登上一层高楼。后二句揭示了只有站得高,才能看得远这一生活哲理,成为不朽的名句。

语句: 

<DIV align=center>
<TABLE cellSpacing=10 cellPadding=3 width="90%">
<TBODY>
<TR>
<TD vAlign=top width="50%"><P>左上栏图片</P></TD>
<TD vAlign=top width="50%"><P style="WRITING-MODE: tb-rl" align=center>右上栏文字</P></TD>
</TR><TR>
<TD vAlign=top colspan=2><P>下栏文字</P></TD>
</TR></TBODY></TABLE></DIV>
 
从这个例子可以看到,利用表格可以把日志中的图文安排在一定位置上,还可以采取不同的表现手法,互不干扰。其中 style="WRITING-MODE: tb-rl" 是控制所写文字由右向左,竖排书写。如果竖排文字出来的方向不对,请将竖排文字全部选中,然后给这些文字指定一个字体,比如:“宋体”或者“Arial”,就应该没问题了。
 

 

(三)给文字添加背景图片/颜色

实例:

 

今天作业: 

1、仔细阅读教程(十八)和(十九)

2、请在自己的 MSN 日志中尝试一下

3、如发现问题,请及时反馈,谢谢!

 

语句:

<DIV align=center>
<TABLE height=表格高度 width=表格宽度 background=背景图片网址>
<TBODY>
<TR>
<TD align=center valign=top><P>你的日志文字或图片</P></TD>
</TR></TBODY></TABLE></DIV>

 

上例中,因为背景图片比较大,我选择的表格的高度和宽度就是背景图片的高度和宽度。如果背景图片比表格小,就会在表格内自动复制,以充满表格。不想图片自动复制,可以在<Table>语句中再加一个属性。语句如下:

<TABLE height=表格高度 width=表格宽度 background=背景图片网址 style="background-repeat:no-repeat">

如只想用背景颜色,则<Table>语句变为:

<TABLE height=表格高度 width=表格宽度 bgcolor=背景颜色代码或名称>

其他增加背景颜色和背景图片的方法,请参考简易教程(三)的内容。

 


 

(四)用<Table>语句来制作圆角表格 

实例:

用<TABLE>语句来实现圆角表格可以省去制作圆角图片之苦!

语句:

<DIV align=center>
<TABLE style="" height=28 cellSpacing=0 cellPadding=0 width="100%">
<TBODY>
<TR height=1>
<TD width=1></TD><TD width=1></TD><TD width=1></TD>
<TD bgColor=边框颜色></TD>
<TD width=1></TD><TD width=1></TD><TD width=1></TD></TR>
<TR height=1>
<TD></TD><TD bgColor=边框颜色 colSpan=2></TD>
<TD bgColor=背景色></TD>
<TD bgColor=边框颜色 colSpan=2></TD><TD></TD></TR>
<TR height=1>
<TD></TD><TD bgColor=边框颜色></TD>
<TD bgColor=背景色 colSpan=3></TD>
<TD bgColor=边框颜色></TD><TD></TD></TR>
<TR>
<TD width=1 bgColor=边框颜色></TD>
<TD bgColor=背景色 colSpan=5>
<TABLE style="" height="100%" cellSpacing=0 cellPadding=3>
<TBODY>
<TR>
<TD align=center>
你要写的文字、图片、或表格</TD>
</TR></TBODY></TABLE>
</TD>
<TD width=1 bgColor=边框颜色></TD></TR>
<TR height=1>
<TD></TD><TD bgColor=边框颜色></TD>
<TD bgColor=背景色 colSpan=3></TD>
<TD bgColor=边框颜色></TD><TD></TD></TR>
<TR height=1>
<TD></TD><TD bgColor=边框颜色 colSpan=2></TD>
<TD bgColor=背景色></TD>
<TD bgColor=边框颜色 colSpan=2></TD><TD></TD></TR>
<TR height=1>
<TD colSpan=3></TD>
<TD bgColor=边框颜色></TD>
<TD colSpan=3></TD></TR>
</TBODY></TABLE></DIV>

 

虽然代码看起来很长,其实原理很简单,昨天我把原代码精简了一下,将嵌套的表格从四个减少到两个,应该更好理解了吧。需要指出一点,“cellPadding=3”是避免表格内文字过于贴近表格边框而特意添加的!

制作这个圆角表格的主要目的有两个:一是可以用来作为带背景色的日志模板,实例参考教程(一);二是可以制作自己日志标题档或者签名档,用处还是很大的。用<Table>语句制作圆角表格,和网上其他常见方法相比,不仅省去了制作、使用圆角图片的麻烦,而且此圆角表格具有“自适应性”——因为语句中使用的是相对宽度(width=100%),所以此表格会随着发布日志栏的宽度变化而自我调节,这比一般图片做出来的圆角表格更具灵活性!

从今天下午开始找图片、查资料、设计构思,一直写到了现在,都已经将近九个小时(其中有两三段内容在发布的时候,莫名其妙的丢失了,只好重头写过)。希望能对大家能有所帮助,如有问题也欢迎大家指正。其实表格的用途还很多,比如:表格与图片相配合,可以制作出各式各样的日志模板;表格还可以插在文章段落中,形成文绕图的模式……大家要是感兴趣,可以参考这教程(十八)(十九)的内容,自己研究一下吧!

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约