
活用表格美化网页(6) |
||||||||||||||
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种技巧的另一个应用。现在,相信不用表格的嵌套,你也可以做出这样的效果吧! |
||||||||||||||