使用表格設(shè)計(jì)有創(chuàng)意的網(wǎng)頁布局

　　11.5 使用表格設(shè)計(jì)有創(chuàng)意的網(wǎng)頁布局

　　表格的一種常見用途是將文本和數(shù)字排列為表格。網(wǎng)頁設(shè)計(jì)人員認(rèn)識(shí)到表格的用途不限于此，還用于排列整個(gè)網(wǎng)頁。例如，沒有邊框的表格可用于排列文本和圖像。看一下程序清單11.3，這個(gè)網(wǎng)頁現(xiàn)在使用了表格進(jìn)行更有效的布局。結(jié)果如圖11.3所示。

　　注意：雖然使用看不見的表格進(jìn)行網(wǎng)頁布局是一種很流行也很有用的方法，但從技術(shù)上說，萬維網(wǎng)聯(lián)盟（World Wide Web Consortium，W3C）——負(fù)責(zé)Web標(biāo)準(zhǔn)的組織——并不提倡這樣做。W3C提倡的方法是使用樣式表而不是表格進(jìn)行網(wǎng)頁布局。雖然我基本上同意 W3C，然而，表格對(duì)網(wǎng)頁布局非常有用，不可能完全不使用表格。不要擔(dān)心，我將在第14章介紹如何將樣式表用于網(wǎng)頁布局。樣式表的功能比表格強(qiáng)大，應(yīng)將其用于設(shè)計(jì)復(fù)雜的網(wǎng)頁。然而，表格適用于簡(jiǎn)單的布局以及使用樣式表不方便實(shí)現(xiàn)的布局。舉個(gè)例子，對(duì)于三列的頁面使用樣式表很難正確地編碼。

　　程序清單11.3 使用表格更有效地組織多列網(wǎng)頁布局

　　<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 >

　　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:l&#97;ncastert@musiccitym&#97;fi&#97;.com?subject=

　　Fan Question&amp;body=What’s your secret?">Contact Terry.</a>

　　</div>

　　</td>

　　</tr>

　　</table>

　　HTML表格讓你能夠更靈活地控制網(wǎng)頁布局

　　這個(gè)程序清單包含大量的代碼，但其中大部分讀者都見過。這些是曲棍球隊(duì)員網(wǎng)頁之一的代碼，只是這里使用了表格來實(shí)現(xiàn)更有效的網(wǎng)頁布局。我在創(chuàng)建表格時(shí)，將表格邊框設(shè)置為可見的，這樣可保證信息排列得當(dāng)。在將這個(gè)表格放在最后的網(wǎng)頁中之前，我刪除了<table>標(biāo)簽中的border="1"屬性，使邊框不可見。

　　程序清單11.3和圖11.3實(shí)際上有三個(gè)不同的表格。第一個(gè)表格將圖像和文本排列成四行。第二個(gè)表格占據(jù)了其中的第二行，提供了三列信息。最后一個(gè)表格是曲棍球統(tǒng)計(jì)表，占據(jù)了主表格中的一行。

　　如果想象不出曲棍球隊(duì)員表格的布局，請(qǐng)參見圖11.4，它說明了該頁面中表格之間的關(guān)系。

圖11.4

　　將不包含實(shí)際內(nèi)容的表格排列呈現(xiàn)出來，有助于設(shè)計(jì)表格布局