CODEWITHSUNDEEP
htmlcssemailoutlookhtml-table
Ash
Ash

Reputation: 444

aligning HTML table for use in outlook email

attempting to build a email template for outlook (does not need to work on any other email clients) using the incredibly frustrating 90's style table layout technique.

my HTML is below, what I want is for the "supporting content" section to vertically align with the "new launches" section. I cant think of any way to do this other than using the vertical align css property, however outlook doesnt support this.

Any ideas anyone?

 <table cellspacing="0" cellpadding="10" border="0">

<tr>

<td width="80%">
    main content
    <table cellspacing="0" cellpadding="10" border="0">
        <tr>
        <td width="100%">
            New launches
            </td>
                    </tr>
        <tr>
        <td width = "50%">
            launch 1. launch one information blah blah blah
            </td>
            <td width = "50%">
            launch 1 images, lots of images here, blah blah
            </td>
        </tr>
        <tr>
        <td width = "50%">
            launch 2. launch one information blah blah blah
            </td>
            <td width = "50%">
            launch 2 images, lots of images here, blah blah
            </td>
        </tr>
        <tr>
        <td width = "50%">
            launch 3. launch one information blah blah blah
            </td>
            <td width = "50%">
            launch 3 images, lots of images here, blah blah
            </td>
        </tr>
<td width="100%">
            completed tests
            </td>
                    </tr>
        <tr>
        <td width = "50%">
            completed 1. launch one information blah blah blah
            </td>
            <td width = "50%">
            completed 1 images, lots of images here, blah blah
            </td>
        </tr>
        <tr>
        <td width = "50%">
            completed 2. launch one information blah blah blah
            </td>
            <td width = "50%">
            completed 2 images, lots of images here, blah blah
            </td>
        </tr>
        <tr>
        <td width = "50%">
            completed 3. launch one information blah blah blah
            </td>
            <td width = "50%">
            completed 3 images, lots of images here, blah blah
            </td>
        </tr>

    </table>

    </td>

<td width="20%" vertical-align = "top">
    supporting content
    <table cellspacing="0" cellpadding="10" border="0">
        <tr>
        <td width = "100%">
            supporting content section 1
            </td>
        <td width = "100%">
            supporting content section 2
            </td>
        </tr>
    </table>

        </tr>

    </td>

</tr>

</table>

Upvotes: 0

Views: 3003

Answers (3)

Manish Dalal
Manish Dalal

Reputation: 1796

Few bugs found in your HTML

<td width="100%">
    completed tests
</td>

does not have a starting <tr> tag

<td width="20%" vertical-align="top">
    supporting content

does not have a matching closing </td> [It have a </tr> before the matching </td>]

After making above corrections, change

<td width="80%">
    main content

to

<td width="80%" valign="top"> <!-- note the added valign="top" -->
    main content

and 

<td width="20%">
    supporting content

to

<td width="20%" valign="top">
    supporting content

Upvotes: 1

Adam Kosmala
Adam Kosmala

Reputation: 935

There's no such html property as "vertical-align", it's css one. Try

<td width="20%" valign="top">

That one worked for me (as far as Litmus shows), both for desktop application and webmail

Upvotes: 2

Dumisani
Dumisani

Reputation: 3038

You need to use the style attribute like:

<td style="width:20%; vertical-align:top" >

Upvotes: 1

Related Questions