Windows LiveWindows Live™
 
 
维江 的个人资料ㄨ　鲫 鱼 汤　ㄨ照片日志列表更多 工具 帮助

日志

    表格怎么用……

          这篇日志，应该算作是"整理帖"吧，讲的东西都不是我最先发现的，最近在 我爱我家 ， 能量魔法 ， MSN Space必读 里看了很多，选了一些比较实用的东西贴出来，一方面自己用着方便，另一方面，就像路边的茶摊一样，方便过路人

          最近，日志编辑窗口的新变化，大家都有目共睹，可一目了然的不多说了，还有一些"隐藏"的变化，有些实用，有些不实用，不实用的也不多说了。

          我想，最实用的，也最稳定的"隐藏"变化，可能当属表格:<table></table>标签了

          什么是表格？就是这个：

       
       


          这就是最基本的2×2的表格，不要小看它，在网页制作里，它可是起到了举足轻重的作用，下面就从代码的分析和范例演示的角度来分别透视一下表格这个东西：

    代码剖析：

    上面那个2×2的表格代码如下：

     
    <table width="100%" border="1">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>

    代码中<table></table>标签表示"表格"，和<div></div>标签形式一样
    <tr></tr>表示表格的一行(字母r应该是row的所写，我觉得这样可以方便记忆)
    <td></td>表示表格的一列
    &nbsp;表示空格，不去管它，表格里添东西后，它就没了
    width="100%" border="1"是表格的属性，标签都有属性的，后面会详细介绍

    看似简单，但要是手写的话，大于2×2的表格的代码写起来真的很烦，一般都是用DreamWeaver或者FrontPage等可视化编辑工具直接生成表格，如果只掌握到表格的这种程度，这些软件用起来很简单，只是要花些时间来用心学而已，不会用这些也没关系，copy别人的，然后在代码中修改一下属性，另外，用这个可以画表格的在线日志编辑器，可以不用写代码就生成表格框架，和大体的属性
    下面就介绍一下表格(极其单元格)的属性设置：

    表格的属性是写到<table>标签里的
    例如，加一条 width＝"100%" 这个属性，就这样写
    <table width="100%">
    属性值，就是等号后面的东西，
    两个属性之间，用空格隔开(英文空格)，例如：
    <table width="100%" height="400">
    常用的表格属性值有：

    1. width="值或百分比" ，表格宽度，可以="100%"(100也可以根据需要改成其他数值),也可以以象素为单位，例如： width＝“355” (355是我这种版式的日志宽度)，后面不用加单位px。
    2.  height="值或百分比" ，表格高度，顾名思义。
    3. align="left"， 表格内容的对齐方式，=left 表示左对齐，=right和=center分别表示右对齐和居中对齐，但这个属性在<table>标签里要慎用，因为它会屏蔽掉内部单元格的对齐方式，一般来说，在<tr>和<td>里应用对其方式的属性比较多。
    4. background＝"图片地址" ，表格的背景图片，这个属性相当实用，比如创建一个1×1的表格，宽度高度定义成100%，然后在表格标签里加入background＝"图片地址" 这个属性，这不就是带背景图片的日志吗。
    5. bgcolor="#000000" ，表格的背景色，值为6位16进制数，但整个表格都用一种颜色，太单调了吧？所以这个属性对于<table>标签来说不太实用，更多的是在<tr>和<td>标签里面用到，可以形成五彩缤纷的表格。
    6. border="1" ，边框，=1表示边框的宽度为1，一般来说，用表格来定位时，就令该属性值=0，但有时也需要它"存在"，有时甚至=2，=3，=5，再配合边框颜色，可以形成丰富多彩的效果。
    7. bordercolor="#000000" ，边框的颜色，#000000 表示纯黑色，#FFFFFF 表示纯白色。
    8. bordercolordark="#000000" ，bordercolorlight="#000000" 分别表示边框暗面和亮面的颜色值，大家试一下其他颜色，看看效果。
    9. style="" 样式，至于样式，我研究得不多，只知道一个比较实用：style="BACKGROUND-REPEAT: no-repeat" 表示表格背景图片禁止重复，一般情况下，当表格尺寸大于图片尺寸时，多余的部分会把图片"平铺"过去，加上这条属性后，多余的部分将显示为表格的背景颜色，或者透明色。

    常用的就这些了，还有些属性也可能用到，但可能不常用，大家慢慢发掘吧，我发现了也会及时更新

    下面说说单元格标签的属性：
          单元格标签<tr>和<td>的属性也很重要和<table>标签的属性差不多，但稍有不同
    <tr>和<td>拥有的属性有：width ， height ， bgcolor ， border ， bordercolor，bordercolordark ， bordercolorlight ， style等等
          <tr>和<td>里还有一个重要的 valign 属性，表示垂直对齐方式，其值为： valign="top" ，表示顶对齐，="middle" 和 ="bottom" 分别表示垂直居中和底端对齐。
          另外<td> 标签里还可以加背景图片属性：<td background＝"图片地址"></td>

    范例演示：

    ①。背景图片的应用：

    代码：
    <TABLE height=图片高度 width=图片宽度 background=图片地址 border=0>
    <TBODY>
    <TR valign=top>
    <TD>日志内容
    </TD>
    </TR>
    </TBODY>
    </TABLE>

          属性值的引号可有可无，加上的话也无所谓，发布日志的时候，空间会会自动清除一些不必要的代码，但对表格及其属性无影响。
          <TBODY></TBODY>标签也是日志自己加进去的，不去管它，没什么影响。

    和原来的背景图片制作方法比起来，有它的好处，但也有它的弊端，

    缺点1：无法调整图片的大小，表格就像一个窗口，"罩"在图片上，窗口太小的话，图片的外圈就被挡住；窗口太小的话，表格内会有空白或者重复的部分，根源就在于无法调整图片的大小。

    缺点2：无法应用图片滤镜图片滤镜形成的多种半透明效果，在这里将无用武之地

    但如果图片大小格式，用这种方法来做日志背景图，还是很方便的，毕竟，表格内部可以通过划分单元格来任意定位元素(任意的范围，不是在整个网页中，只是在表格中)

    ②。多彩表格 No.1：
      日志内容

    代码如下：
    <TABLE height=120 cellSpacing=0 width=270 border=0>
    <TBODY>
    <TR>
    <TD width=15 height=15></TD>
    <TD width=15 bgColor=#ffaaaa></TD>
    <TD></TD>
    <TD width=15 bgColor=#ffaaaa></TD>
    <TD width=15></TD></TR>
    <TR>
    <TD bgColor=#ffdd33 height=15></TD>
    <TD bgColor=#ffdd33></TD>
    <TD bgColor=#ffdd33></TD>
    <TD bgColor=#ffdd33></TD>
    <TD bgColor=#ffdd33></TD></TR>
    <TR>
    <TD>&nbsp;</TD>
    <TD bgColor=#ffaaaa></TD>
    <TD>日志内容</TD>
    <TD bgColor=#ffaaaa></TD>
    <TD></TD></TR>
    <TR>
    <TD bgColor=#aaaaff height=15></TD>
    <TD bgColor=#ffaaaa></TD>
    <TD bgColor=#aaaaff></TD>
    <TD bgColor=#aaaaff></TD>
    <TD bgColor=#aaaaff></TD></TR>
    <TR>
    <TD height=15></TD>
    <TD bgColor=#ffaaaa></TD>
    <TD></TD>
    <TD bgColor=#ffaaaa></TD>
    <TD></TD></TR></TBODY></TABLE>

    然后我们令 border=2 ，来看看这个表格的结构：
     

    <TABLE border=2……

    其实就是一个5×5的表格

    这个表格的高度为120象素，宽度为270象素，四周的16个小单元格都是15×15的，用的时候，这些尺寸可以根据需要自行调整，只要在代码中找到位置即可。
    另外，还有一点要说，就是尺寸单位是用象素还是用百分比，这个问题也不是很好表达，根据实际需要吧，用多了，就用出经验了。

    再令 cellSpacing=2 border=0看一下效果：
     

    <TABLE cellSpacing=2 border=0……
    看到cellSpacing的作用了吧？

    多彩表格 No.2：

    多彩表格 No.2：

    代码如下：
    <TABLE height=120 cellSpacing=0 width=270 border=0>
    <TBODY>
    <TR>
    <TD width=20 bgColor=#808080 height=20></TD>
    <TD bgColor=#cccccc></TD>
    <TD width=20 bgColor=#808080></TD></TR>
    <TR>
    <TD bgColor=#cccccc></TD>
    <TD vAlign=center align=left bgColor=#ffffff><FONT color=#000000>多彩表格 No.2：</FONT></TD>
    <TD bgColor=#cccccc></TD></TR>
    <TR>
    <TD bgColor=#808080 height=20></TD>
    <TD bgColor=#cccccc></TD>
    <TD bgColor=#808080></TD></TR></TBODY></TABLE>

    这是一个3×3的表格，height=120，width=270 ，四个角的小单元格均为20×20


    多彩表格 No.3：

    ★
    		★

    		 green style
    ★
    		★

    代码如下：
    <TABLE cellSpacing=0 width="70%" align=center bgColor=#eeffee border=0>
    <TBODY>
    <TR>
    <TD align=middle width="5%"><FONT color=#99cc99>★</FONT></TD>
    <TD width="90%"><BR></TD>
    <TD align=middle width="5%"><FONT color=#99cc99>★</FONT></TD></TR>
    <TR>
    <TD width="5%"><BR></TD>
    <TD align=middle width="90%"><FONT color=#006666>green style</FONT></TD>
    <TD width="5%"><BR></TD></TR>
    <TR>
    <TD align=middle width="5%"><FONT color=#99cc99>★</FONT></TD>
    <TD width="90%"><BR></TD>
    <TD align=middle width="5%"><FONT color=#99cc99>★</FONT></TD></TR></TBODY></TABLE>

    这个表格和上面那个原理差不多，但是尺寸用了百分比作为单位，整个表格占日志宽度的70％高度默认，没有设定，四个角的小单元格均占表格宽度的5％，至于那4个小星星，其实就是这个字符：★

    多彩表格 No.4：

    ☆--　information　--☆　 ☆--　What's new　--☆　
    AA

    BB


    代码如下：
    <TABLE cellSpacing=0 borderColorDark=#ffffff cellPadding=2 width=403 borderColorLight=#ff44a2 border=1>
    <TBODY>
    <TR>
    <TD style="FONT-SIZE: 10px; FONT-FAMILY: Verdana" align=middle width=205 bgColor=#ffc8e3 height=17><FONT color=#ff4da6>☆--　information　--☆</FONT>　</TD>
    <TD style="FONT-SIZE: 10px; FONT-FAMILY: Verdana" align=middle width=205 bgColor=#ffc8e3 height=17><FONT color=#ff4da6>☆--　What's new　--☆</FONT>　</TD></TR>
    <TR>
    <TD align=middle width=205 bgColor=#ffffff height=80>AA</TD>
    <TD width=203 bgColor=#ffffff height=80>
    <P align=center>BB</P></TD></TR></TBODY></TABLE>
    ☆--　information　--☆　 ☆--　What's new　--☆　
    AA

    BB

     

    以上部分表格样式来自 MSN Space必读和m1net

    如果您有问题，请点击这里进行提问

    

    7月2日 18:13 | 写入日志 | 寂巧
    
 
    
 评论 (25)
 
 
    
 
    
 请稍候...
    
 很抱歉，您输入的评论太长。请缩短您的评论。
    
 您没有输入任何内容，请重试。
    
 很抱歉，我们当前无法添加您的评论。请稍后重试。
    
 若要添加评论，需要您的家长授予您相应权限。请求权限
    
 您的家长禁用了评论功能。
    
 
    
 很抱歉，我们当前无法删除您的评论。请稍后重试。
 
    
 您已超过了一天之内允许提供的评论数上限。请在 24 小时后重试。
    
 因为我们的系统表明您可能在向其他用户提供垃圾评论，您的帐户已禁用了评论功能。如果您认为我们错误地禁用了您的帐户，请联系 Windows Live 支持部门。
    
 完成下面的安全检查，您提供评论的过程才能完成。
    
 您在安全检查中键入的字符必须与图片或音频中的字符一致。
    
 
 
 
 
 
    
 
    
 
    若要添加评论，请使用您的 Windows Live ID 登录（如果您使用过 Hotmail、Messenger 或 Xbox LIVE，您就拥有 Windows Live ID）。登录
    
 
    
 
    还没有 Windows Live ID 吗？请注册
    
 
    
 
    
 
 
 
    
 
 
 
    
 
 
    
 
    
     		
 
 
 
 
 
    
 
    
 
 
 cindy发表:
 
    
 
    谢了,我用了.
    
 
    
 
    
 
 
 5 月 11 日
 
    
 
     		
 
    
 
 
 
    
 
 
    
 
    
     		
 
 
 
 
 
    
 
    
 
 
 春天的味道发表:
 
    
 
    谢谢！真不错。
    
 
    
 
    
 
 
 2 月 23 日
 
    
 
     		
 
    
 
 
 
    
 
 
    
 
    
     		
 
 
 
 
 
    
 
    
 
 
 武岚予发表:
 
    
 
    我喜欢多彩表格1，这个表格朴素大方，灵活机动，真是表格中的上品。再次谢谢你！
    
 
    
 
    
 
 
 2 月 16 日
 
    
 
     		
 
    
 
 
 
    
 
 
    
 
    
     		
 
 
 
 
 
    
 
    
 
 
 王康发表:
 
    
 
    不错的素材，欢迎到我的空间交流。
    
 
    
 
    
 
 
 2 月 11 日
 
    
 
     		
 
    
 
 
 
    
 
 
    
 
    
 
 
    
 
 
 匿名 的图片
 
 
 
    
 
 
    
 
 
    
 
 
    
 
    
     		
 
 
 
 
 
    
 
    
 晋阳鼓手
 
 发表:
 
    
 
    借用了一个，太棒啦！真诚感谢！
    
 
    
 
    
 
 
 2 月 8 日
 
    
 
     		
 
    
 
 
 
    
 
 
    
 
    
 
 
    
 
 
 匿名 的图片
 
 
 
    
 
 
    
 
 
    
 
 
    
 
    
     		
 
 
 
 
 
    
 
    
 浪漫梦驿站
 
 发表:
 
    
 
    谢谢,我用了好多次了~~~不错,希望多发布些这样的知识啊
    
 
    
 
    
 
 
 1 月 7 日
 
    
 
     		
 
    
 
 
 
    
 
 
    
 
    
 
 
    
 
 
 匿名 的图片
 
 
 
    
 
 
    
 
 
    
 
 
    
 
    
     		
 
 
 
 
 
    
 
    
 久美子KUMIKO（雨楓）
 
 发表:
 
    
 
    寂語：多彩表格 No.2：怎麼變成　四欄　十行
    
 
    
 
    
 
 
 12 月 27 日
 
    
 
     		
 
    
 
 
 
    
 
 
    
 
    
 
 
    
 
 
 匿名 的图片
 
 
 
    
 
 
    
 
 
    
 
 
    
 
    
     		
 
 
 
 
 
    
 
    
 冰澌雪融
 
 发表:
 
    
 
    不错的教程,不反对链接吧?
    
 
    
 
    
 
 
 11 月 24 日
 
    
 
     		
 
    
 
 
 
    
 
 
    
 
    
 
 
    
 
 
 匿名 的图片
 
 
 
    
 
 
    
 
 
    
 
 
    
 
    
     		
 
 
 
 
 
    
 
    
 媛子
 
 发表:
 
    
 
    呵呵，是好东西啊，先谢啦~~
    
 
    
 
    
 
 
 11 月 5 日
 
    
 
     		
 
    
 
 
 
    
 
 
    
 
    
 
 
    
 
 
 匿名 的图片
 
 
 
    
 
 
    
 
 
    
 
 
    
 
    
     		
 
 
 
 
 
    
 
    
 loving蓝色魅力loving
 
 发表:
 
    
 
    第一次来到这里，初步看了看，一次有空的话，我会来这里细细的学学
    
 
    
 
    
 
 
 9 月 28 日
 
    
 
     		
 
    
 
 
 
    
 
 
    
 
    
 
 
    
 
 
 匿名 的图片
 
 
 
    
 
 
    
 
 
    
 
 
    
 
    
     		
 
 
 
 
 
    
 
    
 mosquito-ww
 
 发表:
 
    
 
    我还是不懂哎..55 n_n
    
 
    
 
    
 
 
 9 月 23 日
 
    
 
     		
 
    
 
 
 
    
 
 
    
 
    
 
 
    
 
 
 匿名 的图片
 
 
 
    
 
 
    
 
 
    
 
 
    
 
    
     		
 
 
 
 
 
    
 
    
 忘忧草
 
 发表:
 
    
 
    这么漂亮的表格，一起分享啦~~
    谢谢~~
    
 
    
 
    
 
 
 9 月 20 日
 
    
 
     		
 
    
 
 
 
    
 
 
    
 
    
 
 
    
 
 
 匿名 的图片
 
 
 
    
 
 
    
 
 
    
 
 
    
 
    
     		
 
 
 
 
 
    
 
    
 ～仙姑～
 
 发表:
 
    
 
    多彩表格 No.4　很漂亮呐～～
    拿去用了～～谢谢～～～
    
 
    
 
    
 
 
 8 月 20 日
 
    
 
     		
 
    
 
 
 
    
 
 
    
 
    
 
 
    
 
 
 匿名 的图片
 
 
 
    
 
 
    
 
 
    
 
 
    
 
    
     		
 
 
 
 
 
    
 
    
 ╰❤戀℡❤╮
 
 发表:
 
    
 
    多谢呦，link你的教程la，这里好东东好多^.^
    
 
    
 
    
 
 
 8 月 12 日
 
    
 
     		
 
    
 
 
 
    
 
 
    
 
    
 
 
    
 
 
 匿名 的图片
 
 
 
    
 
 
    
 
 
    
 
 
    
 
    
     		
 
 
 
 
 
    
 
    
 古惑の琦琦
 
 发表:
 
    
 
    thanks very much ~~~^^我會加油!
    
 
    
 
    
 
 
 8 月 10 日
 
    
 
     		
 
    
 
 
 
    
 
 
    
 
    
 
 
    
 
 
 匿名 的图片
 
 
 
    
 
 
    
 
 
    
 
 
    
 
    
     		
 
 
 
 
 
    
 
    
 xinglovefreebird
 
 发表:
 
    
 
    看到我好晕哦~~
    
 
    
 
    
 
 
 8 月 9 日
 
    
 
     		
 
    
 
 
 
    
 
 
    
 
    
 
 
    
 
 
 匿名 的图片
 
 
 
    
 
 
    
 
 
    
 
 
    
 
    
     		
 
 
 
 
 
    
 
    
 蓝天清清
 
 发表:
 
    
 
    呵，又学着点罗……多谢。
    
 
    
 
    
 
 
 8 月 7 日
 
    
 
     		
 
    
 
 
 
    
 
 
    
 
    
 
 
    
 
 
 匿名 的图片
 
 
 
    
 
 
    
 
 
    
 
 
    
 
    
     		
 
 
 
 
 
    
 
    
 maxleem
 
 发表:
 
    
 
    原来是这样的啊，也很谦虚啊
    
 
    
 
    
 
 
 7 月 21 日
 
    
 
     		
 
    
 
 
 
    
 
 
    
 
    
 
 
    
 
 
 匿名 的图片
 
 
 
    
 
 
    
 
 
    
 
 
    
 
    
     		
 
 
 
 
 
    
 
    
 Šhärǒn
 
 发表:
 
    
 
    m1的东西很多都是我家搬来的.............
    无语了..........
    
 
    
 
    
 
 
 7 月 15 日
 
    
 
     		
 
    
 
 
 
    
 
 
    
 
    
 
 
    
 
 
 匿名 的图片
 
 
 
    
 
 
    
 
 
    
 
 
    
 
    
     		
 
 
 
 
 
    
 
    
 てるてる坊主-Ｍｉ
 
 发表:
 
    
 
    真的很全哦,谢谢!
    
 
    
 
    
 
 
 7 月 14 日
 
    
 
     		
 
    
 
 
 
    
 
 
    
下一页 >   
最后一页 >>
    
 
    
 引用通告
 
    
 
    
 
    此日志的引用通告 URL 是：
    http://king19120.spaces.live.com/blog/cns!29F140C794516526!1470.trak
    引用此项的网络日志
    • 
无