CODEWITHSUNDEEP
html-tablehtml-email
Trufa
Trufa

Reputation: 40737

How to make a table that has 3, 2 and 1 columns that fill the whole table?

Disclaimer: I don't usually use tables for layouts but they seem to be the best options for html emails. Believe me, playing with divs in emails sucks even worse. I'm looking for the best workaround, I don't have much restraints as to how to design...

I'm almost there but I'm having a problem with the following code:

<table border=1 width="600px">
  <tbody>
    <tr height="140px">
      <td width="210px"></td>
      <td width="180px"></td>
      <td width="210px"></td>
    </tr>
    <tr height="200px">
      <td colspan="3"></td>
    </tr>
    <tr height="100px">
      <td colspan="3"></td>
    </tr>
    <tr height="300px">
      <td width="300px"></td>
      <td></td>
    </tr>
  </tbody>
</table>

jsfiddle

My specific problem is with the last to cells, that I would like them to divide the space of the table by 50% each.

As you can see I modified the width of the last <td> to 300px (half of the table), but that also modifies the width of the first cell, which is an undesired result, I want the first three td to keep that 210px, 180px, 210px proportion.

Just in case to make it even more clear here is a sketch:

enter image description here

Upvotes: 3

Views: 7558

Answers (4)

Kevin Boucher
Kevin Boucher

Reputation: 16685

You can't do this with one table. The columns will always line-up. If this is for a layout for some other content, than you really need to look at div-based layouts.

If you have to use tables:

<table border=1 width="600px">
    <tbody>
        <tr height="140px">
            <td width="210px"></td>
            <td width="180px"></td>
            <td width="210px"></td>
        </tr>
        <tr height="200px">
            <td colspan="3"></td>
        </tr>
        <tr height="100px">
            <td colspan="3"></td>
        </tr>
        <tr height="300px">
            <td colspan="3">
                <table>
                    <tr>
                        <td width="300"></td>
                        <td width="300"></td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

Upvotes: 1

Matt Whipple
Matt Whipple

Reputation: 7134

Create a table where each column represents each possible division and then use colspans liberally. So you have possible breaks at 210, 300, 490, & 600 for a total of 4 columns.

Then you'd want the first row to span 1, 2, 1, all of the full length to span 4, and then the half and half to span 2 and 2.

Upvotes: 1

Eamonn
Eamonn

Reputation: 1320

If you must use a table - and you really shoudldn't unless you are displaing tabular data - then the solution here, to my mind, is to make the top row one cell and to nest another table within it, of as many cells width as is needed. So:

<table>
<tr><td colspan="2">
    <table><tr>
        <td width="210"></td>
        <td width="180"></td>
        <td width="210"></td>
    </tr></table>
</td></tr>
<tr><td colspan="2"></td></tr>
<tr><td colspan="2"></td></tr>
<tr><td width="50%"></td><td width="50%"></td></tr>
</table>

Upvotes: 3

Elena Sharovar
Elena Sharovar

Reputation: 356

DIVs will be better solution here. Are you sure you need a table here? Maybe, divs?

Upvotes: -1

Related Questions