Live™ 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="TABLE-LAYOUT: fixed" 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="TABLE-LAYOUT: fixed" 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%），所以此表格会随着发布日志栏的宽度变化而自我调节，这比一般图片做出来的圆角表格更具灵活性！
从今天下午开始找图片、查资料、设计构思，一直写到了现在，都已经将近九个小时（其中有两三段内容在发布的时候，莫名其妙的丢失了，只好重头写过）。希望能对大家能有所帮助，如有问题也欢迎大家指正。其实表格的用途还很多，比如：表格与图片相配合，可以制作出各式各样的日志模板；表格还可以插在文章段落中，形成文绕图的模式……大家要是感兴趣，可以参考这教程（十八）和（十九）的内容，自己研究一下吧！
Tools 
