CODEWITHSUNDEEP
html-tablehtml-email
Jurudocs
Jurudocs

Reputation: 9165

How to place a table within a table on top

I'm fighting with bad support of html clients for CSS and I need to do a email template with table layout. I just can't place and align tables within tables correctly. I tried it with valign etc. but this doesn't work...

How can I place one table within another table on top and in the center?

To illustrate I've posted this fiddle: http://jsfiddle.net/eabJh/1/

The <td >Another nested table</td> is in center position but not on top but in the middle.

Here is my html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <body style="background-color: black">
            <table background="http://i3.mirror.co.uk/incoming/article276604.ece/ALTERNATES/s615/tweet-that-ricky-gervais-jibe-at-mongs-pic-twitter-com-rickygervais-132840776.jpg"  width="810" border="20" bordercolor="white" style="border-style:solid; border-spacing:0px; border-collapse:collapse">
                <tr style="height:400px">
                    <td>test
                        <table width="380" cellspacing="0" cellpadding="2" align="center"  border="0">
                            <tr>
                                <td >Another nested table</td>
                            </tr>
                        </table></td>
                </tr>
            </table>

        </body>
    </html>


</html>

Upvotes: 1

Views: 6089

Answers (2)

Poikilos
Poikilos

Reputation: 1145

You must vertically align the table using the parent element, but the HTML valign attribute is deprecated. You should use CSS (vertical-align: top):

    <table background="http://i3.mirror.co.uk/incoming/article276604.ece/ALTERNATES/s615/tweet-that-ricky-gervais-jibe-at-mongs-pic-twitter-com-rickygervais-132840776.jpg"  width="810" border="20" bordercolor="white" style="border-style:solid; border-spacing:0px; border-collapse:collapse">
        <tr style="height:400px">
            <td style="vertical-align: top">test
                <table width="380" cellspacing="0" cellpadding="2" align="center"  border="0">
                    <tr>
                        <td >Another nested table</td>
                    </tr>
                </table></td>
        </tr>
    </table>

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382676

Updated Fiddle

Use valign = "top":

<td valign = "top">test
     <table width="380" cellspacing="0" cellpadding="2" align="center"  border="0">
          <tr>
              <td>Another nested table</td>
          </tr>
     </table>
</td>

Upvotes: 6

Related Questions