|
在制作网页的时候,经常要使用到表格进行排版！
使用网页表格进行排版,一般的方法都是这样来实现排版的：
假设你的网页分为三个区域,即三个栏目,一般都是先插入一个大的表格,然后将大表格分为三个小单元格,然后分别在每个小单元格里面再插入表格,以此方式来实现三个栏目的排版：
首先肯定,你的做法一点都没错,但是,如果再深入探讨,那么,你的做法就显得步履维艰了,为什么这样讲呢,试想想,使用这种排版,因为三个栏目都套在一个大表格里面,假如你的栏目内容相当的多,那么,由于表格对象是这样来显示的,即,表格里面的内容全部显示成功之后,才能显示出来,试问,你的网页内容如果很多,那么,显示的速度是不是很慢呢,毋庸置疑,显示速度实在太慢了,那么,如何改进呢,方法有很多,你可以使用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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<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>
有啥不明白的,再和站长讨论吧,
[C语言系列]c# _winform实现网页上用户自动登陆,模拟网站登录 [互联动态]网页防复制代码
[网页制作]网页自动跳转代码大集合[站长常用代码集合] [网页制作]用IFRAME实现网页的内嵌和预载
[办公软件]如何通过网页打开PPT [办公软件]快捷键：用于Office—Excel表格的快捷键下篇
[办公软件]快捷键：用于Office—Excel表格的快捷键上篇 [办公软件]Excel双面打印表格有诀窍
[办公软件]设置EXCEL表格的虚线！ [办公软件]使用同一表头(顶端标题行，打印标题)打印多页Exce…
|
注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网] 
