带来一篇玩转表格 让你的网页炫起来
搜索引擎更加友好。相对与传统的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,那么它在网页中的效果和使用是一样的。
带来一篇玩转表格 让你的网页炫起来
你的设计不仅仅用于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是大势所趋。 AdobeDreamweaverCS5软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的AdobeCSLive在线服务AdobeBrowserLab集成。 俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。 Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。 经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅. 技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
页:
[1]