六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

网页表格之---多个表格纵向排列

Admin | 2007-10-16 20:28:51 | ReadNums | 8289 | 标签 网页制作 | 打印本页
     

        在制作网页的时候,经常要使用到表格进行排版!

        使用网页表格进行排版,一般的方法都是这样来实现排版的:

        假设你的网页分为三个区域,即三个栏目,一般都是先插入一个大的表格,然后将大表格分为三个小单元格,然后分别在每个小单元格里面再插入表格,以此方式来实现三个栏目的排版:

        首先肯定,你的做法一点都没错,但是,如果再深入探讨,那么,你的做法就显得步履维艰了,为什么这样讲呢,试想想,使用这种排版,因为三个栏目都套在一个大表格里面,假如你的栏目内容相当的多,那么,由于表格对象是这样来显示的,即,表格里面的内容全部显示成功之后,才能显示出来,试问,你的网页内容如果很多,那么,显示的速度是不是很慢呢,毋庸置疑,显示速度实在太慢了,那么,如何改进呢,方法有很多,你可以使用DIV+CSS来进行页面的排版,也可以使用表格来排版,本文主要讨论研究使用表格来排版,如何优化及如何排版,让页面的内容显示更快!

        有的同志可能问了,刚才你不是讲了,网页表格只有内容全部显示了,才能看到吗,这不和上面的做法一个样?

         非也,道理是这样,但是做法是讲究技巧滴,既然我们都明白了网页表格只有加载了所有内容才能显示出来,那么,我们为何不独立使用表格,独立使用三个栏目表格呢,只要三个栏目不套在一个大表格里面,那么,他们就是独立的,这个时候,不就能独立显示数据了吗?

         既然这样,何不试之,欲想试之,问题就随之而来了,因为,在页面中插入多个表格,默认情况下,不是分为左、中、右三种模式纵向排列的,而是插入第一个,再插入第二个,那么第二个必然只能显示在第一个表格下面,这样又达不到预期的效果了…………

         对于不懂DIV+CSS(这有点难啊,就本人而已,难,目前还不会呢)技术的同志,非要实现以上的效果,又何去何从呢?

       本人带着这个问题,专心研究了三个小时,终于找到了答案,其解决方法实在令人费解,实在简单得让自己发笑!!!

      首先,在页面中的BODY区域先使用一个DIV,代码大体如此:

<div style="width:1000px" align="center">

</div>

      上面的DIV设定style,宽度为1000PX,它里面的内容全部居中显示,这就很好的解决了所有对象根据不同分辨率自动居中的效果!

      之后,就是在这DIV里面插入三个表格对象拉,所插入的三个表格对象,同样需要设置style,其代码大体如此:

<table width="200" border="0" cellpadding="0" cellspacing="0" style="float:left">
  <tr>
    <td colspan="1" bgcolor="#00FF00">第一个表格</td>
    </tr>
</table>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0" style="float:left">
  <tr>
    <td bgcolor="#FF0000">第二个表格</td>
    </tr>
</table>
<table width="200" border="0" cellpadding="0" cellspacing="0" style="float:left">
  <tr>
    <td colspan="1" bgcolor="#FF9900">第三个表格</td>
    </tr>
</table>

看到了吗,每个表格的style都设置为="float:left",意思是,设置为浮动,居左对齐,这样就防止插入多个表格自动换行显示了!

      简单不?呵呵,就这样,可以实现使用表格对象实现三列纵向排版拉,下面给出完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第一页</title>
</head>
<body topmargin="0" leftmargin="0" bottommargin="0" rightmargin="0">
<div style="width:1000px" align="center">
看看效果吧,实现三个表格纵向排列
  <table width="200" border="0" cellpadding="0" cellspacing="0" style="float:left">
  <tr>
    <td colspan="1" bgcolor="#00FF00">第一个表格</td>
    </tr>
</table>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0" style="float:left">
  <tr>
    <td bgcolor="#FF0000">第二个表格</td>
    </tr>
</table>
<table width="200" border="0" cellpadding="0" cellspacing="0" style="float:left">
  <tr>
    <td colspan="1" bgcolor="#FF9900">第三个表格</td>
    </tr>
</table>
</div>
</body>
</html>

        有啥不明白的,再和站长讨论吧,


问题未解决:在线咨询

网友评论

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日