2013-05-08 80 views
2

我需要創建一個電子郵件簽名,而且我正在進行一些鬥爭。我必須使用表格,但我必須像這樣合併它。將表格列和行合併到單個單元中

這裏是我目前有

_____|_______|________ 
_____|_______|________ 
_____|_______|________ 

<table width="550" border="1"> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
</table 

這是我需要的東西(前三名列合併左3列)

  ____________________ 
     |__________|_________ 
________|__________|_________ 
+2

你需要的是'rowspan'屬性http://www.angelfire.com/fl5/html-tutorial/tables/rowspan.htm – sashkello 2013-05-08 01:22:16

+0

既然我完全理解你的問題,那麼合併前3名專欄......你只要得到一行,這可能是你想在桌子上面想要的任何東西。 – 2013-05-08 01:44:18

回答

4

編輯:

我現在明白了這個問題的訣竅......您還希望頂部行與左側的合併列進行合併?不可能。但是你可以用一些CSS來僞造類似的東西,rowspancolspan

新小提琴:
http://jsfiddle.net/HpkpY/4/

記住,這些都不是真正的合併 - 他們只出現像。如果border-collapse屬性未設置爲collapse,則可能會得到一些奇怪的結果。


老答案:

rowspan將幫助!

的jsfiddle示範:
http://jsfiddle.net/HpkpY/1/

<table width="550" border="1"> 
    <tr> 
    <td rowspan="3">&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
</table> 

不要忘記刪除其他細胞不再需要因合併!

+0

不回答所問的問題:OP也想要跨越頂行。 – 2013-05-08 01:36:19

+0

@JeremyMiller看我的編輯。 – Jace 2013-05-08 01:37:10

+0

很酷。請檢查我在原帖中添加的評論,並添加您的想法。 – 2013-05-08 01:44:53