热门文章 | 热门软件| 热门源码 | 热门电影 | 知识库 | 联系我们
软件 源码 教程 影视 健康 招聘
  HTML | JavaScript | ASP | PHP | JSP | NET | VB | VC | VF | Windows | Linux | Mysql | Mssql | Oracle | Struts 
当前位置: 创世纪计算机资源网 -> 文章频道 ->html 
站内搜索:
活用表格美化网页(1)
作者:星河 来源:yesky 整理日期:2007-3-18
三、活用表格美化网页

  表格的作用不仅仅局限于页面的元素定位、排版布局,在实际的应用们还可以利用它来美化整个页面。接下来们就将接触到表格的灵活应用,你会发现:原来表格的世界还可以这么精彩!

  考虑到现在DreamWeaver、Frontpage等软件的广泛使用,完全用手写代码来编制网页的人越来越少,所以,在制作以下实例的过程中,们多是利用DreamWeaver来完成前期工作,然后再手工修改代码,最终实现们所期望的效果。

  1、一个象素宽的分隔线

  有时候在网页排版时,们需要一条细线,用图片似乎有点劳师动众了,其实,这个小问题用表格就能搞定。请看下面的例子:


代码:
<table width="100%" cellspacing="0" border="0" bgcolor="#000000" height="1" cellpadding="0"
<tr>
<td></td>
</tr>
</table>



  在DreamWeaver中的快速通道 

  在Dreamweaver中插入一个一行一列的表格,表格的属性面板设置如下:

  

  切换到原代码视窗,将<td> </td>中的“ ”去掉就ok了。如下图:

  

  说明:其实就是一个高为“1pix”的表格,需要注意的是表格内不要有其他任何内容。如果你还需要其他颜色的分隔线,只需要改变表格的背景色 bgcolor 就可以了。利用这种方法们还可以制作出细竖线,将表格的宽该为“1”就可以了。

  练习:试制作出如下的效果

 
   



  2、利用“cellspacing”属性制作细线表格
[1]  [2]  [3]  [4]  [5]  [6]  
相关文章