CODEWITHSUNDEEP
htmlhtml-table
user2360468
user2360468

Reputation: 31

Merging table columns and rows into single cell

I need to create a email signature and I am having a bit of a struggle. I have to use a table but I have to merge it like this.

Here is what I currently have:

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

<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

This is what I need (merge the left three columns with the top three columns):

         ____________________
        |__________|_________
________|__________|_________

Upvotes: 3

Views: 3701

Answers (1)

Jace
Jace

Reputation: 3072

Edit:

I now understand the trick to this question... You also want the top row to merge WITH the merged columns on the left? Not possible. But you might be able to fake something like it with some CSS, rowspan and colspan.

New fiddle:
http://jsfiddle.net/HpkpY/4/

Bear in mind that these are not truly merged - they only appear as though. And if the border-collapse property was not set to collapse, you'd probably get some weird results.

Old answer:

rowspan will help!

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>

Don't forget to remove the other cells you no longer need due to the merge!

Upvotes: 4

Related Questions