2012-12-25 75 views
1

我試圖讓HTML表合併不工作

+---------+---------------------------+--------------+ 
|   |       |    | 
+---------+       |    | 
|   |       |    | 
|   +-----------------+---------+    | 
|   |     |   |    | 
|   +-----------------+   |    | 
|   |     |   |    | 
|   +-----------------+   |    | 
|   |     |   |    | 
+---------+-----------------+---------+    | 
|   |     |   |    | 
+---------+-----------------+---------+--------------+ 

的HTML

<table> 
    <tr> 
     <td></td> 
     <td rowspan="2" colspan="2"></td> 
     <td rowspan="6"></td> 
    </tr> 
    <tr> 
     <td rowspan="4"></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td rowspan="3"></td> 
    </tr> 
    <tr> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
</table> 

但是這是行不通的。我無法合併2 * 2單元格中第一行的第二列。它總是隻有colspan="2"rowspan="2"不起作用。我試圖使用HTML表格生成器網站,如http://html-tables.com/,但它不工作。

這就是我得到

+---------+---------------------------+--------------+ 
|   |       |    | 
+---------+-----------------+---------+    | 
|   |     |   |    | 
|   +-----------------+   |    | 
|   |     |   |    | 
|   +-----------------+   |    | 
|   |     |   |    | 
+---------+-----------------+---------+    | 
|   |     |   |    | 
+---------+-----------------+---------+--------------+ 

我認爲這是不可能的HTML,因爲它沒有在任何地方工作?有什麼方法可以實現我想要的結果嗎?如圖所示。

+4

這是佈局嗎?不要使用表格進行佈局。出於這個原因。 – Ryan

+0

這不適用於佈局。我需要展示一些數據,並且我需要在一個頁面上放置多個表格。這就像1個產品的表格。雖然我可以通過CSS來做到這一點,但我只是看到了這個問題,無法弄清楚我應該做什麼。所以我在這裏知道.. – Anuj

回答

1

首先,你的圖形顯示有六行,但該表只有五tr元素。爲了解決這個問題,重複第四tr元素,

<tr> 
     <td></td> 
    </tr> 

即使在此修復程序,該表不看的權利,但這是因爲它沒有真正的內容。沒有什麼要求第二排有正高。將一些多行內容添加到第二個td元素,您會看到它使第二行增益高度。

+0

是的,這是真的。如果我添加內容,第二個單元格會獲得高度,但除非我有足夠的內容,否則不會。我希望第二個單元具有比第一個單元更高的高度。似乎這是不可能的默認情況下。 – Anuj

+0

您可以在表格行上設置最小高度,例如'tr {height:2em}'。 –

0

檢查表的列數和行數不匹配。 div元素裏面你可以創建一個HTML表,如下所示:

<div> 
    <table border="1" width="50%" cellspacing="10" cellpadding="10"> 
     <tr> 
      <td style="width:60px"></td> 
      <td></td> 
      <td rowspan="3"></td> 
     </tr> 
     <tr style="height:50px"> 
      <td colspan="2"> 
       <table border="1" width="100%" cellspacing="10" cellpadding="10"> 
        <tr> 
         <td></td> 
         <td> 
          <table width="100%" cellpadding="10" cellspacing="10" border="1"> 
           <tr> 
            <td></td> 
           </tr> 
           <tr> 
            <td></td> 
           </tr> 
           <tr> 
            <td></td> 
           </tr> 
          </table> 
         </td> 
         <td></td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2"> 
       <table border="1" width="100%" cellspacing="10" cellpadding="10"> 
        <tr> 
         <td></td> 
         <td></td> 
         <td></td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
</div>