11.5 使用表格設計有創意的網頁布局
表格的一種常見用途是將文本和數字排列為表格。網頁設計人員認識到表格的用途不限于此，還用于排列整個網頁。例如，沒有邊框的表格可用于排列文本和圖像�？匆幌鲁绦蚯鍐�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 "Big T" 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 >
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 >Brett Hull</a><br />
<span style="font-weight:bold">Favorite NHL Team:</span>
<a >Nashville Predators</a>
<br /><span style="font-weight:bold">Favorite Southern Fixin:</span>
<a >
Skillet Fried Potatoes</a><br />
<span style="font-weight:bold">Favorite Meat and Three:</span>||| <a >Swett’s</a>
(<a >map</a>)
<br />
<span style="font-weight:bold">Favorite Country Star:</span>
<a >Patsy Cline</a><br />
<span style="font-weight:bold">Favorite Mafia Moment:</span>
"<a href="mcmplayer_chale.html">Chet</a> finishing the game with his
eyelid completely slashed through."
</div>
</td>
</tr>
<tr>
<td colspan="3">
<table style="width:100%; text-align:right; font-family:verdana, arial;
font-size:11pt; color:navy" border="1" >
<tr style="background-color:navy; color:white">
<th style="text-align:left">Season</th>
<th>GP</th>
<th>G</th>
<th>A</th>
<th>P</th>
<th>PIM</th>
<th>PPG</th>
<th>SHG</th>
<th>GWG</th>
</tr>
<tr style="background-color:white">
<td style="text-align:left">Summer 2005</td>
<td>11</td>
<td style="width:75px">7</td>
<td>5</td>
<td>12</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr style="background-color:#EEEEEE">
<td style="text-align:left">Winter 2004</td>
<td>24</td>
<td>14</td>
<td>14</td>
<td>28</td>
<td>2</td>
<td>0</td>
<td>0</td>
<td>5</td>
</tr>
<tr style="background-color:white">||| <td style="text-align:left">Summer 2004</td>
<td>18</td>
<td>9</td>
<td>9</td>
<td>18</td>
<td>2</td>
<td>0</td>
<td>0</td>
<td>2</td>
</tr>
<tr style="background-color:#EEEEEE">
<td style="text-align:left">Spring 2004</td>
<td>19</td>
<td>7</td>
<td>17</td>
<td>24</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<div style="font-family:verdana, arial; font-size:12pt">
<a href="mailto:lancastert@musiccitymafia.com?subject=
Fan Question&body=What’s your secret?">Contact Terry.</a>
</div>
</td>
</tr>
</table>
HTML表格讓你能夠更靈活地控制網頁布局
這個程序清單包含大量的代碼，但其中大部分讀者都見過。這些是曲棍球隊員網頁之一的代碼，只是這里使用了表格來實現更有效的網頁布局。我在創建表格時，將表格邊框設置為可見的，這樣可保證信息排列得當。在將這個表格放在最后的網頁中之前，我刪除了<table>標簽中的border="1"屬性，使邊框不可見。
程序清單11.3和圖11.3實際上有三個不同的表格。第一個表格將圖像和文本排列成四行。第二個表格占據了其中的第二行，提供了三列信息。最后一個表格是曲棍球統計表，占據了主表格中的一行。
如果想象不出曲棍球隊員表格的布局，請參見圖11.4，它說明了該頁面中表格之間的關系。
圖11.4
將不包含實際內容的表格排列呈現出來，有助于設計表格布局
