将表格列和行合并到单个单元中
我需要创建一个电子邮件签名,而且我正在进行一些斗争。我必须使用表格,但我必须像这样合并它。将表格列和行合并到单个单元中
这里是我目前有
_____|_______|________
_____|_______|________
_____|_______|________
<table width="550" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table
这是我需要的东西(前三名列合并左3列)
____________________
|__________|_________
________|__________|_________
编辑:
我现在明白了这个问题的诀窍......您还希望顶部行与左侧的合并列进行合并?不可能。但是你可以用一些CSS来伪造类似的东西,rowspan和colspan。
新小提琴:
http://jsfiddle.net/HpkpY/4/
记住,这些都不是真正的合并 - 他们只出现像。如果border-collapse
属性未设置为collapse
,则可能会得到一些奇怪的结果。
老答案:
rowspan将帮助!
的jsfiddle示范:
http://jsfiddle.net/HpkpY/1/
<table width="550" border="1">
<tr>
<td rowspan="3"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
不要忘记删除其他细胞不再需要因合并!
不回答所问的问题:OP也想要跨越顶行。 – 2013-05-08 01:36:19
@JeremyMiller看我的编辑。 – Jace 2013-05-08 01:37:10
很酷。请检查我在原帖中添加的评论,并添加您的想法。 – 2013-05-08 01:44:53
你需要的是'rowspan'属性http://www.angelfire.com/fl5/html-tutorial/tables/rowspan.htm – sashkello 2013-05-08 01:22:16
既然我完全理解你的问题,那么合并前3名专栏......你只要得到一行,这可能是你想在桌子上面想要的任何东西。 – 2013-05-08 01:44:18