——此文章摘自《HTML與CSS入門經典》定價:39元 特價:29.25元 購買>>
11.4 表格背景和間距
程序清單11.2中還有一些技巧我沒有介紹。可以指定整個表格——以及表格中的每行或每個單元格——的背景,該背景可能與網頁本身使用的背景不同。爲此,可在標籤<table>、<tr>、<td>和<th>中指定樣式 background-color 或background-image,就像在<body>標籤中一樣(參見第9章)。例如,要使整個表格都使用黃色背景,可用< table style="background- color:yellow">或等價的<table style="background-color:#FFFF00">。
與background-color類似的是background-image屬性,後者用於設置一個圖像作爲表格背景。要將圖像leaves.gif設置爲表格背景,可用<table style="background-image:url (leaves.gif)"。注意,圖像文件名放在括號中,前面加上前綴url,表明描述的是圖像文件位置。
對錶格的設置不僅可以使用style屬性。例如,可用cellpadding和cellspacing屬性來控制表格邊框的間距。cellspacing屬性設置表格邊框之間和表格單元格之間的間距(以像素爲單位);cellpadding屬性設置單元格中的信息四周的間距(也是以像素爲單位)。如果將cellpadding屬性設置爲0,將使表格中的所有信息儘量接近表格邊框,甚至接觸到邊框。cellpadding和 cellspacing屬性讓你能夠全面控制表格的外觀。
注意:雖然在XHTML中仍允許使用cellpadding和cellspacing屬性,但CSS中存在與這兩個屬性等價的樣式屬性padding和 border-spacing。然而,當前的網頁瀏覽器對這些樣式屬性的支持不一致,因此建議現在仍使用屬性cellpadding和 cellspacing來調整表格的間距。
圖11.2顯示了背景顏色和間距的影響,圖中的表頭使用銀色背景,表格中每個單元格的文本與圖像離邊框有一定的間距。
提示:可以將表格放在另一個表格的單元格中,這樣內部的表格將擁有“父”表格的質量。換句話說,可以在表格中嵌套表格。
使用嵌套表格可以設計許多有創意的網頁佈局。例如,如果要使一列文本顯示在表格的左邊,可以創建一個兩列的表格,將文本放在一列,子表格放在另一列,如下所示:
<table>
<tr>
<td>To the right, you see all our telephone numbers.</td>
<td>
<table border="1">
<tr>
<td>voice</td>
<td>802-888-2828</td>
</tr>
<tr>
<td>fax</td>
<td>802-888-6634</td>
</tr>
<tr>
<td>data</td>
<td>802-888-3009</td>
</tr>
</td>
</tr>
</table>
</table>
注意到內部表格有邊框,而外部表格沒有。
嵌套表格的一個缺點是,如果嵌套太深,瀏覽器渲染網頁時可能很慢。如果沒有很好的理由,嵌套的級別不應超過三級,儘量控制在兩級以內。