html表格布局之实列版,html表格布局实例.doc

html表格布局实例

[html]表格布局之实例版

| [<>]

前面我们讲了html表格的基础知识，今天我们通过一个实例让大家更清晰的了解下表格的用途。

?例如：我们做一个简单的网站布局，代码如下：

网站名称
网站标题	搜索框
左边	中间	右边
网站底部信息

产生如下的表格：

网站名称

网站标题

搜索框

左边

中间

右边

网站底部信息

???? 这是一张整体的表格，第一行和第四行分别跨度了三列，这里用colspan="3"来限制，而第二行的“搜索框”占用了两列的位置，用colspan="2"控制； align="center"是对表格内文字的对齐限制，center表示中间，right表示靠右，left靠左。

???? 表格的基础设置，可以参考：

[html]利用表格规划网站布局[html]如何制作多行多列的表格[html]设定表格的尺寸和边框

????如果你现在可以根据自己的想法制作出一个表格了，那么你就是向自己制作模板迈近了一步。^o^

表格布局现在仍然很多人在用，方便实在。

网页设计现有两种布局方法，一种即是表格布局，另一种是现在W3C极力推荐的CSS布局。不过，就目前来说，由于xhtml并未完全占据主流，表格布局依然是大多数网页设计师的首选。 你所描述的问题属于表格的对齐问题，解决方式有以下几种： 如果两个表格的宽度不一致，那么选择默认的对齐方式，也即左对齐，在html中的标签和属性是：

就能实现左边对齐。你现在出现的问题有可能是第一个表格设置了对齐方式，例如居中对齐，而第二个表格并没有设置对齐方式，所以默认为左对齐，这样就出现了上述问题。 我的一些表格布局的经验： 1、表格布局第一步：先插入一个表格，宽度是760-780px(记住，一定要用px，不要用百分比)，高度不用设置，然后令这个表格居中。以后所有的内容都限制在这个表格中。 2、熟练使用表格嵌套。也就是说，在一个表格中再插入另一个表格。举个例子，把你要设计的页面分成大的几个部分，然后利用表格的行数和列数来控制它们的布局，如果某一个单元格中的内容又要分成几部分，可以继续在这个单元格中插入表格，方法同上。 3、补充：表格的边框一定要为0，即table中的border属性值为"0"。也就是让表格在网页预览中不可见，这样才能实现表格布局的目的。

如何利用表格实现画中画，也就是页中页效果

网页的排版大多使用表格，利用一个表个单元可以嵌入一个网页，你知道吗？这样做有很多好处，比如你把经常更新的区域划分一个表格单元，然后在这个表格单元中嵌入你想要更新的内容，今后更新主页只需上传这个被嵌套的页面就可以了，没有必要对首页进行更新，是不是很方便。我写个最简单的例子代码：

＜html＞ 　　＜head＞ 　　＜title＞范例＜/title＞ 　　＜body＞ 　　＜table?border="1"?width="100%"＞ 　　＜tr＞ 　　＜td＞ 　　＜IFRAME?src="example.htm"?width="300"?heitht="100"＞＜/IFRAME＞ 　　＜/td＞ 　　＜/tr＞ 　　＜/table＞ 　　＜/body＞ 　　＜/html＞

插入被嵌入页的关键代码是：＜IFRAME?src="example.htm"?width="300"?heitht="100"＞＜/IFRAME＞。example.htm是被嵌入的页面，标签＜IFRAME＞还有一些可用的参数设置如下：　　marginwidth:网页中内容在表格右侧的预留宽度；例如：marginwidth="20"，单位是pix，下同。　　marginheight:网页中内容在表格顶部预留的高度；　　hspace:网页右上角的的横坐标；　　vspace:网页右上角的纵坐标；　　frameborder:是否显示边缘；填"1"表