将表列和行合并到单个单元格中

时间:2013-05-08 01:20:04

标签: html html-table

我需要创建一个电子邮件签名,我有点挣扎。我必须使用一个表,但我必须像这样合并它。

以下是我目前的情况:

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

<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

这就是我所需要的(将左边三列与前三列合并):

         ____________________
        |__________|_________
________|__________|_________ 

1 个答案:

答案 0 :(得分:4)

修改

我现在理解这个问题的诀窍......你还希望顶行合并左边的合并列?不可能。但是你可能会用一些CSS,rowspancolspan伪造类似的内容。

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

请记住,这些并非真正合并 - 它们只是看起来像。如果border-collapse属性未设置为collapse,您可能会得到一些奇怪的结果。


旧回答:

rowspan会有所帮助!

JSFiddle Demonstration:
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>

不要忘记删除因合并而不再需要的其他单元格!