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

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

       表格的一种常见用途是将文本和数字排列为表格。网页设计人员认识到表格的用途不限于此，还用于排列整个网页。例如，没有边框的表格可用于排列文本和图像。看一下程序清单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>