仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1204|回复: 10
打印 上一主题 下一主题

[DIV+CSS] 带来一篇玩转表格 让你的网页炫起来

[复制链接]
第二个灵魂 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:23:38 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好。
<p/>1.表格的分开线能够埋没
<tableborderrules=colscellspacing=0align=left>能够埋没横向的分开线
<tableborderrules=rowscellspacing=0align=right>能够埋没纵向的分开线
<tableborderrules=nonecellspacing=0align=center>能够埋没横向和纵向的分开线

2.表格的边框不休在闪
以下办法能够令表格的边框不休在闪,很有用的
在BODY区加上
<tableborder="0"width="280"id="myexample"
style="border:5pxsolidyellow">
<tr>
<td>到场恣意的物件.到场恣意的物件.
<br>到场恣意的物件.到场恣意的物件.
<br>到场恣意的物件.到场恣意的物件.</td>
</tr>
</table>
<scriptlanguage="JavaScript1.2">
<!--
functionFlashit(){
if(!document.all)
return
if(myexample.style.borderColor=="yellow")
myexample.style.borderColor="lime"
else
myexample.style.borderColor="yellow"
}
setInterval("flashit()",500)
//-->
</script>

3.表格分行下载
这个对表哥内容很年夜对照有用
在必要分行下载处加上<tbody>
好比:
<table>
<tbody>
<tr>
<td>flsdjfsdjfkdsjf</td>
</tr>
<tr>
<td>skdjfsdjfksd</td>
</tr>
</tbody>
<tbody>
<tr>
<td>flsdjfsdjfkdsjf</td>
</tr>
<tr>
<td>skdjfsdjfksd</td>
</tr>
</tbody>
</table>
4.几种款式分歧的表格
<tableborder="1"width="220"style="position:absolute;left:
11;top:11"height="26">
<tr>
<tdwidth="100%">一般表格</td>
</tr>
</table>
5.正立方表格
<tableborder="1"width="220"bordercolorlight="#eeeeee"
bordercolordark="#000000"style="position:absolute;left:10;top:
49"height="26">
<tr>
<tdwidth="100%">正立方表格</td>
</tr>
</table>

6.细表格
<tableborder="0"frame=vsideswidth="219"
bgcolor="#000000"cellspacing="1"cellpadding="0"
height="22"style="position:absolute;left:11;top:86">
<trbgcolor="#FFFFFF">
<tdwidth="100%"height="2">细表格</td>
</tr>
</table>
7.平面表格
<tableborder="1"width="220"bordercolorlight="#ffffff"
bordercolordark="#ffffff"style="position:absolute;left:10;top:
112"height="34">
<tr>
<tdwidth="100%"bgcolor="#B7B7B7"
bordercolorlight="#000000"bordercolordark="#eeeeee">平面表格</td>
</tr>
</table>

8.知名表格
<tablewidth="220"align="center"style="position:absolute;
left:246;top:12"height="51">
<tr>
<td><fieldsetstyle="width:220"align="center">
<legend>知名表格</legend> <palign="right"> </fieldset>
<br>
</td>
</tr>
</table>
9.表中表效果Ⅱ
<tablewidth="220"align="center"style="position:
absolute;left:245;top:89"height="110">
<tr>
<tdheight="75"><fieldsetstyle="width:220"
align="center"><legend>表中表效果Ⅱ</legend><table
frame="hsides"border="1"
bordercolorlight="#000000"bordercolordark="#ffffff"
width="100%"cellspacing="1"cellpadding="0"height="78">
<trbgcolor="#ffffff">
<tdwidth="100%"height="76"></fieldset></td>
</tr>
</table>
10.表中表效果Ⅰ
<tablewidth="220"align="center"style="position:absolute;
left:10;top:120"height="138"cellspacing="1"
cellpadding="0">
<tr>
<tdheight="126"><fieldsetstyle="width:220;color:#B7B7B7;
border-style:groove"align="center"><legendstyle="color:
#FFFFFF;border:1solid#808080"><fontcolor="#000000">表中表效果
12下一页


如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。
第二个灵魂 该用户已被删除
沙发
 楼主| 发表于 2015-1-16 00:48:24 | 只看该作者

带来一篇玩转表格 让你的网页炫起来

你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint。
Ⅰ</font>
</legend> <palign="right"> </fieldset></p></td>
</tr>
</table>

11.表格中边框的显现

只显现上边框<tableframe=above>
只显现下边框<tableframe=below>
只显现左、右侧框<tableframe=vsides>
只显现上、下边框<tableframe=hsides>
只显现右边框<tableframe=lhs>
只显现右侧框<tableframe=rhs>
不显现任何边框<tableframe=void>
</p>
上一页12


现在YAHOO,MSN等国际门户网站,网易,新浪等国内门户网站,和主流的WEB2.0网站,均采用DIV+CSS的框架模式,更加印证了DIV+CSS是大势所趋。
小妖女 该用户已被删除
板凳
发表于 2015-1-18 07:50:37 | 只看该作者
AdobeDreamweaverCS5软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的AdobeCSLive在线服务AdobeBrowserLab集成。
老尸 该用户已被删除
地板
发表于 2015-1-27 05:16:20 | 只看该作者
俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。
灵魂腐蚀 该用户已被删除
5#
发表于 2015-2-5 06:43:56 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
透明 该用户已被删除
6#
发表于 2015-2-11 08:09:15 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
活着的死人 该用户已被删除
7#
发表于 2015-3-2 01:45:29 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
不帅 该用户已被删除
8#
发表于 2015-3-11 03:48:14 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
金色的骷髅 该用户已被删除
9#
发表于 2015-3-17 20:56:53 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
冷月葬花魂 该用户已被删除
10#
发表于 2015-3-25 02:49:41 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-4-25 17:06

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表