.

日志

关于我

琴棋书画

.

文章分类

教你制作音画（二）

2015-06-29 16:01:45| 分类：【网络课堂】 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

伊杋叶的教你制作音画（二）

HTML做帖子技巧和代码-边框篇（2）

教你制作音画（二） - 琴棋书画 - 琴棋书画阁家园欢迎您！

        表格以<table>和</table>分别作起始标识符。其中，<table>里有一些必要的参数，为容易理解起见，在这里只介绍本节用到的参数，其他的参数今后将陆续提到。border参数定义表格边框的粗细，记为border=数值，数值取0，1，2，3等整数。width是我们要定义的参数，它规定表格的宽度，数值通常用100%，记作width=100%，值得注意的是，如果不设置width值，表格将根据单元格里的内容自动定义宽度。height参数规范表格的高度，通常可以不设置，而是让内容的多少让系统自行设定。

        <table>和</table>之下，还需要由两个成对的标识符号定义表格的行、列，它们分别是<tr>……</tr>，<td>……</td>，tr标识符定义表中的行，td标识符定义数据表元，即每行中的每一列。<td>……</td>要包含在<tr>……</tr>里面。此外，要求在<table>下有<tbody>（表体），它也是成对出现，包含<tr>...</tr>。一张完整的表格全部语法如下：

<table border=2 width=80%>
<tbody>
    <tr>
    <td>Hello Table</td>
</tr>
</tbody></table>

      效果如下：

Hello Table

HTML之表格篇：表格的修饰（一）

No.1 表格边框的修饰

教你制作音画（二） - 琴棋书画 - 琴棋书画阁家园欢迎您！

上一讲我们讲到border属性，border即为边框，除了有粗细的数值定义以外，还有其他的属性。

我们先来看看亮边框的颜色和暗边框的颜色设置。亮边框记作bordercolorlight，暗边框记作bordercolordark。它们的数值可以用red、green、blue等表达，也可以用#11ee00这样的方式来表达，比如：bordercolorlight=red，bordercolorlight=#808000。请看下面的表格：

Hello Table

       以上表格的全部代码清单如下：

<table border=6 width=100% bordercolorlight=#008000 bordercolordark=#808000>
  <tbody>
   <tr>
     <td width=100%>Hello Table</td>
   </tr>
</tbody>
</table>

       上表中，左、上边框是亮边框，右、下边框为暗边框。怎么样？这么一修饰就好看多了吧？

边框颜色方面还有一个属性：bordercolor。当同时设置了暗、亮边框的颜色，bordercolor的颜色设置是多余的，这一点应该注意。现在我们用bordercolor来设置一下表格边框，看看有什么效果：

Hello Table

代码清单：

<table border="10" width=100% bordercolor=#FF0000>
<tbody>
  <tr>
    <td width="100%">Hello Table</td>
  </tr>
</tbody>
</table>

       上面我们学习的有关表格边框颜色的设置，下面继续学习表格边框其他方面的知识。

        内容不多了，还讲两个表格边框的属性：一是边框线（cellpadding）粗细和边框空白处的大小，取值范围从0开始，用正整数。下面是代码和表格效果：

<table border=2 cellpadding=2 cellspacing=8 width=100%>
<tbody>
   <tr>
     <td width=100%>Hello Table 边框线:2 ，边框空白处:8</td>
   </tr>
</tbody>
</table>

HTML表格篇——表格的修饰（二）
No.2 表格背景的修饰

教你制作音画（二） - 琴棋书画 - 琴棋书画阁家园欢迎您！

默认情况下，HTML网页里表格的背景色是白色的。这显然不总是符合我们的要求，我们通常会设置各种背景颜色，以配合网页或贴子主题。

        设置表格的背景色很简单，给其bgcolor属性赋值即可，写作bgcolor=数值，其数值取值方式和上一讲讲到的边框颜色是一致的，比如：bgcolor=black或bgcolor=#000000。bgcolor属性应该放置在表格初始符<table......>当中。下面举个实例，先是代码，后是效果：

<table border=10 cellpadding=2 width=100% bordercolorlight=#008000 bordercolordark=#008060 bgcolor=#CCCC00>
<tbody>
  <tr>
    <td>
      <p align=left><font face=黑体 size=5 color=#800080>背景色：bgcolor=#CCCC00<br>
      暗边框颜色：#008000<br>
      亮边框颜色：#008060</font>
    </td>
   </tr>
  </tbody>
</table>

背景色：bgcolor=#CCCC00
暗边框颜色：#008000
亮边框颜色：#008060

[      注一：代码中用上了设置字体对齐方式，在<td>和</td>之间用<p align=left>来定义左对齐，这种方式的定义无需终止标识符，而定义字体的那句<font face=黑体 size=5 color=#800080>则需要在结束字体定义处有终止标识符号</font>。

       注二：细心的朋友可能已经发现，表格代码里多了一组<tbody>……</tbody>，这是怎么回事呢？又是什么意思呢？在纯粹的HTML表格里本来可以不要这个的，但论坛有论坛的语法规范，它用<tbody>来定义表格体，如果没有，系统也会自动在<table>和</table>之间加上，且它要把<tr>……</tr>包含在里面。今后在论坛里制作表格应该养成加<tbody>和</tbody>的习惯。

        除了使用背景色，我们还可以使用图片来修饰表格背景，应该说，用图片来修饰表格的外观会更漂亮得多。不过应该注意，用来作表格背景图的文件不要太大，太大了打开网页速度较慢，图片的尺寸方面，要么是有规则图案的小图片，要么就是和表格大小相一致的，否则做出的表格也不会有理想的外观效果。下面我们在上面表格的基础上，用这幅图来作表格的背景图片：

教你制作音画（二） - 伊杋叶 - 伊杋叶的小屋

代码及效果如下：

代码中红色那句就是加背景图的语法，放在<table……>当中合适的位置即可。

<TABLE style="WIDTH: 660px; HEIGHT: 157px" borderColorDark=#008060 cellPadding=2 width=660 align=center bgColor=#cccc00 borderColorLight=#008000background=http://img.blog.163.com/photo/LwE_D4DO8AiVipmK1NIeUQ==/5655113757094404337.jpg border=10>
<TBODY>
<TR>
<TD>
<P align=left><FONT face=黑体 color=#800080 size=5>背景色：bgcolor=#CCCC00<BR>暗边框颜色：#008000<BR>亮边框颜色：#008060</FONT> </P></TD></TR></TBODY></TABLE></DIV>

效果：

背景色：bgcolor=#CCCC00
暗边框颜色：#008000
亮边框颜色：#008060

Hello Table 边框线:2 ，边框空白处:8

HTML之表格篇——表格的嵌套（一）

教你制作音画（二） - 琴棋书画 - 琴棋书画阁家园欢迎您！

表格的嵌套一方面是为使页面（贴子）的外观更为漂亮，利用表格嵌套来编辑出复杂而精美的效果，另一方面是出于布局需要，用一些嵌套方式的表格来做精确的编排，或者二者兼而有之。熟练地掌握表格的嵌套技巧并不是很困难的，只要你思路清晰，对表格的整体嵌套构架做到心中有数，在实际编辑时就不会出乱，发布出来的作品也就不会只是一堆代码。

这里将从最简单的表格嵌套开始演示和讲解，不会太难的。

两张表格的嵌套：

代码如下

<TABLE borderColor=#0099cc width="100%" align=center border=8>
<TBODY>
<TR>
<TD><FONT color=#99cc00><BR></FONT>
<TABLE borderColor=#ccffcc width="100%" border=8>
<TBODY>
<TR>
<TD><BR><FONT color=#99cc00><BR></FONT></TD></TR></TBODY></TABLE><FONT color=#99cc00></FONT></TD></TR></TBODY></TABLE>

从上面的代码中，我们看得出来，第二张表格代码包含在第一张表格代码中的<td>和</td>里面，这一点一定要弄清楚。不然，终止符不正确或缺少时，由于系统的容错性不好、自动修正功能不够智能化等问题，效果将会很糟糕，错误太严重的话还会使浏览器在运算的时候进入死循环而造成机器死机。

下面是三个表格的嵌套代码及效果，由于表格里没有内容，所以在此指定了三级表格的高度。代码中，每一个表格的代码用一种颜色来区分。

代码：

<TABLE style="WIDTH: 682px; HEIGHT: 288px" borderColor=#6633ff width=682 align=center border=8>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cc9966 width="100%" align=center border=8>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#003300 height=200 width="100%" align=center border=8>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>

HTML之表格篇——表格的嵌套（二）

教你制作音画（二） - 琴棋书画 - 琴棋书画阁家园欢迎您！

先来看看以下表格：

你应该可以看得出来，上表中有一个一级表格（父表格），里面有两个二级表格（子表格），二级表格一上一下，位置十分清楚。如果你愿意，你还可以在二级表格里再嵌套次级别的表格。

现在我们来看代码，每一种颜色的文字代码一个表格的完整代码，注意观察起始标识符号的前后关系。

HTML之表格篇——表格的嵌套（三）

教你制作音画（二） - 琴棋书画 - 琴棋书画阁家园欢迎您！

与上一讲的嵌套效果相比，我们可以明显地看到：上面表格中的两个二级表格是并列放在父表里的。如何做到这个效果呢？

首先，在父表格里，我们用两次“<td>……</td>”将父表分隔成左右各一半，即父表是一个有一行两列的表格。其次，我们在父表的左、右单元格里分别放置一个表格，就形成了以上效果。请研究以下代码清单，为了区分层次，黑马把每一个表格的代码用一种颜色表示，请特别注意父表的代码：

</TD></TR></TBODY></TABLE></DIV>

伊杋叶祝朋友们学习快乐! 伊杋叶祝朋友们学习快乐!

教你制作音画（二） - 琴棋书画 - 琴棋书画阁家园欢迎您！

欢光我博 迎临的客

评论这张

转发至微博

阅读(68)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_087069086082082069083083080065072087082064092095083069',
              blogTitle:'教你制作音画（二）',
              blogAbstract:'<P style=\"PADDING-BOTTOM: 0px; LINE-HEIGHT: 28px; MARGIN: 0px 0px 10px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px;\"   \><A style=\"LINE-HEIGHT: 28px; COLOR: rgb(248,216,6); TEXT-DECORATION: none\" target=\"_blank\" href=\"http://df-wang2008.blog.163.com/\"  \><BR\>伊杋叶</A\><SPAN\> </SPAN\>的<SPAN\> </SPAN\><A style=\"LINE-HEIGHT: 28px; COLOR: rgb(248,216,6); TEXT-DECORATION: none\" target=\"_blank\" href=\"http://df-wang2008.blog.163.com/blog/static/86050678200810844836419\"  \>教你制作音画（二）</A\><BR style=\"LINE-HEIGHT: 28px;\"   \></P\>\r\n<P style=\"PADDING-BOTTOM: 0px; LINE-HEIGHT: 28px; MARGIN: 0px 0px 10px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px;\"   \></P\>\r\n<P\>\r\n</P\>',
              blogTag:'学习园地',
              blogUrl:'blog/static/133895620155294122541',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1435564906085,
              publishTime:1435564905944,
              permalink:'blog/static/133895620155294122541',
              commentCount:0,
              mainCommentCount:0,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'.',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/133895620155294122541">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

.

导航

日志

教你制作音画（二）

历史上的今天

最近读者

热度

评论

页脚