搜索|收藏|地图|订阅|图片|论坛|商城
  当前位置 :| 首页>软件>软件学院>CSS>应用技巧>

使用表格设计有创意的网页布局

来源:希赛网 编辑:若水 时间:2008-04-12

       使用表格设计有创意的网页布局

       表格的一种常见用途是将文本和数字排列为表格。网页设计人员认识到表格的用途不限于此,还用于排列整个网页。例如,没有边框的表格可用于排列文本和图像。看一下程序清单11.3,这个网页现在使用了表格进行更有效的布局。结果如图11.3所示。

        注意:虽然使用看不见的表格进行网页布局是一种很流行也很有用的方法,但从技术上说,万维网联盟(World Wide Web Consortium,W3C)——负责Web标准的组织——并不提倡这样做。W3C提倡的方法是使用样式表而不是表格进行网页布局。虽然我基本上同意 W3C,然而,表格对网页布局非常有用,不可能完全不使用表格。不要担心,我将在第14章介绍如何将样式表用于网页布局。样式表的功能比表格强大,应将其用于设计复杂的网页。然而,表格适用于简单的布局以及使用样式表不方便实现的布局。举个例子,对于三列的页面使用样式表很难正确地编码。

        程序清单11.3  使用表格更有效地组织多列网页布局

        <table cellspacing="5">

        <tr>

        <td colspan="3">

        <div style="font-family:verdana, arial; font-size:18pt; font-weight:bold">

        16 - Terry Lancaster</div>

        </td>

        </tr>

        <tr style="height:10px">

        <td>
        <img src="tlancaster.jpg" alt="Terry &quot;Big T&quot; Lancaster" />

        </td>
        <td style="vertical-align:top">

        <div style="font-family:verdana, arial; font-size:12pt; color:navy">

        <span style="font-weight:bold">Nickname:</span> Big T<br />

        <span style="font-weight:bold">Position:</span> RW<br />

        <span style="font-weight:bold">Height:</span> 6’3"<br />

        <span style="font-weight:bold">Weight:</span> 195<br />

        <span style="font-weight:bold">Shoots:</span> Left<br />

        <span style="font-weight:bold">Age:</span> 40<br />

        <span style="font-weight:bold">Birthplace:</span>

        <a href="http://en.wikipedia.org/wiki/Nashville%2C_Tennessee">

        Nashville, TN</a>

        </div>

        </td>

        <td style="vertical-align:top">

        <div style="font-family:verdana, arial; font-size:12pt; color:navy">

        <span style="font-weight:bold">Favorite NHL Player:</span>

        <a href="http://www.nhl.com/players/8448091.html">Brett Hull</a><br />

        <span style="font-weight:bold">Favorite NHL Team:</span>

        <a href="http://www.nashvillepredators.com/">Nashville Predators</a>

最新评论共有 0 位网友发表了评论
发表评论
评论内容:不能超过250字,需审核,请自觉遵守互联网相关政策法规。
用户名: 密码:
匿名?