html表格到层的相对位置,html,左右拖动表格.doc

本文介绍了HTML表格在网页布局中的应用,包括表格的colspan属性用于调整单元格跨越列数,align属性控制文字对齐,以及如何通过设置border为0实现无边框表格布局。还讲解了如何使用IFRAME实现网页嵌套,以及表格背景图片的优化技巧。此外,提到了鼠标悬停表格背景变色的CSS样式表应用。
摘要由CSDN通过智能技术生成

html,左右拖动表格

篇一:html表格布局实例

[html]表格布局之实例版

| [<

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

例如:我们做一个简单的网站布局,代码如下:

bordercolor=#00ff99

产生如下的表格:

这是一张整体的表格,第一行和第四行分别跨度了三列,这里用

colspan=3来限制,而第二行的“搜索框”占用了两列的位置,用colspan=2控制; align=center是对表格内文字的对齐限制,center表示中间,right表示靠右,left靠左。

表格的基础设置,可以参考:

[html]利用表格规划网站布局

[h择默认的对齐方式,也即左对齐,在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表示是,填0表示否

scrolling:是否出现滚动条;填1表示是,填0表示否

表格背景图片的一个技巧

大家都知道在一个较大的表格中放入背景图片,背景图片就会重复填充直到整个页面。我们可以利用表格的这个特性来减小我们网页中图片的大小,比如下面的一个渐变图,你看上去像是一整张图片,它其实用的就是表格背景重复填充特性,而用的图片就是右边的那张,大小只有1.3k,在此如果要用一张大的图片是很不划算的。你若要插入一根水平线,用这方法也很有效。

如何使鼠标指到表格,表格背景变色

这个特效用的是表格样式表,要

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值