HTML與CSS 表格背景和間距

  ——此文章摘自《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>

 

    注意到內部表格有邊框,而外部表格沒有。

    嵌套表格的一個缺點是,如果嵌套太深,瀏覽器渲染網頁時可能很慢。如果沒有很好的理由,嵌套的級別不應超過三級,儘量控制在兩級以內。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章