设为首页   |  加入收藏夹 快速导航:  热门文章  |  最新文章  |  梦想博客  
当前位置:编程之家 -> 文章频道 ->html 
站内搜索:  

活用表格美化网页(6)

作者:星河 来源:yesky 整理日期:2007-03-18

  5、两个并排的表格

  有时候我们需要把两个单独的表格并排排列,但是当我们连续插入两个表格的时候,表格会自动分成上下排列,如何解决这个问题呢?

  利用表格的嵌套:我们可以先做一个一行两列的表格,然后在这个表格的每个单元格里在插入一个表格就行了,效果如下:

 
 
 

代码如下:
<table width="440" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table width="200" cellspacing="0" cellpadding="0" bordercolor="#000000" border="1">
<tr>
<td> </td>
</tr>
</table>
</td>
<td>
<table width="200" cellspacing="0" cellpadding="0" bordercolor="#000000" border="1">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>



  利用表格自身属性:连续插入两个表格后,将第一个表格(注意,是表格而不是单元格)的align设置为“left"”就ok了!

 
 
 


代码如下:
<table width="200" cellspacing="0" cellpadding="0" bordercolor="#000000" border="1" align="left"
<tr>
<td> </td>
</tr>
</table>
<table width="200" cellspacing="0" cellpadding="0" bordercolor="#000000" border="1">
<tr>
<td> </td>
</tr>
</table>


  6、利用表格做空格

  在排版的过程中,空格对我们来说是在熟悉不过的了。为了版面的整齐和规范 ,我们会多次用到空格,对于文字和图片来说,非常简单,但是如果有一个表格内容,为了整个版面的协调,也要象文字那样在开头空两格,这时候单纯的输入空格解决不了问题,利用嵌套表格好象有点麻烦,怎么办呢?其实有一个非常简单但很实用的技巧。我们先来看看效果:

 
 

代码如下:
<table width="30" align="left">
<tr>
<td> </td>
</tr>
</table>

<table width="200" cellspacing="0" cellpadding="0" bordercolor="#000000" border="1">
<tr>
<td> </td>
</tr>
</table>


  分析一下代码,可以看出来这其实就是第5种技巧的另一个应用。现在,相信不用表格的嵌套,你也可以做出这样的效果吧!

 
 
 
 

[1]  [2]  [3]  [4]  [5]  [6]