[Email] CSS Table alignment

HTML & CSS
1

Hi -

I am trying to align two separate tables side by side. Can someone please let me know how I go about doing this. Right now the table on the left will not align with the table on the right.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="generator" content="SQL*Plus 11.2.0"> <STYLE type=text/css>- TABLE { BACKGROUND: #eee; FONT-SIZE: 90% } TH { BACKGROUND: #90EE90 } TD { PADDING-BOTTOM: 0px;PADDING-LEFT:2px; PADDING-RIGHT:0px; PADDING-TOP: 0px } </STYLE> </head> <body text=black bgcolor=ffffff align=left> <H4><u><left><SPAN style="COLOR:blue">LastUpdated Time</SPAN></left></u></H4> <br> <p> <table align=left width=30% border=3 bordercolor=black bgcolor=FFFF99> <tr> <th scope="col"> PE </th> <th scope="col"> UPDATE STATUS </th> </tr> <tr> <td> <B><CENTER><SPAN style="COLOR:blue">1</SPAN></CENTER></B>
</td>
<td>
<B><SPAN style="COLOR:green">a</SPAN
></B>
</td>
</tr>
<tr>
<td>
<B><CENTER><SPAN style="COLOR:blue">2</SPAN></CENTER></B>
</td>
<td>
<B><SPAN style="COLOR:green">a</SPAN
></B>
</td>
</tr>
<tr>
<td>
<B><CENTER><SPAN style="COLOR:blue">3</SPAN></CENTER></B>
</td>
<td>
<B><SPAN style="COLOR:green">a</SPAN
></B>
</td>
</tr>
<tr>
<td>
<B><CENTER><SPAN style="COLOR:blue">4</SPAN></CENTER></B>
</td>
<td>
<B><SPAN style="COLOR:green">a</SPAN
></B>
</td>
</tr>
<tr>
<td>
<B><CENTER><SPAN style="COLOR:blue">9</SPAN></CENTER></B>
</td>
<td>
<B><SPAN style="COLOR: red">b</SPAN> </B> </td> </tr> <tr> <td> <B><CENTER><SPAN style="COLOR:blue">14</SPAN></CENTER></B>
</td>
<td>
<B><SPAN style="COLOR: red">b</SPAN> </B> </td> </tr> <tr> <td> <B><CENTER><SPAN style="COLOR:blue">15</SPAN></CENTER></B>
</td>
<td>
<B><SPAN style="COLOR:green">a</SPAN
></B>
</td>
</tr>
<tr>
<td>
<B><CENTER><SPAN style="COLOR:blue">16</SPAN></CENTER></B>
</td>
<td>
<B><SPAN style="COLOR: red">b</SPAN> </B> </td> </tr> <tr> <td> <B><CENTER><SPAN style="COLOR:blue">17</SPAN></CENTER></B>
</td>
<td>
<B><SPAN style="COLOR:green">a</SPAN
></B>
</td>
</tr>
<tr>
<td>
<B><CENTER><SPAN style="COLOR:blue">18</SPAN></CENTER></B>
</td>
<td>
<B><SPAN style="COLOR:green">a</SPAN
></B>
</td>
</tr>
<tr>
<td>
<B><CENTER><SPAN style="COLOR:blue">19</SPAN></CENTER></B>
</td>
<td>
<B><SPAN style="COLOR: red">b</SPAN> </B> </td> </tr> <tr> <td> <B><CENTER><SPAN style="COLOR:blue">20</SPAN></CENTER></B>
</td>
<td>
<B><SPAN style="COLOR: red">b</SPAN> </B> </td> </tr> </table> <p> </body> </html> 

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="generator" content="SQL*Plus 11.2.0"> <STYLE type=text/css>- TABLE { BACKGROUND: #eee; FONT-SIZE: 90% } TH { BACKGROUND: #90EE90 } TD { PADDING-BOTTOM: 0px;PADDING-LEFT:0px; PADDING-RIGHT:0px; PADDING-TOP: 0px } </STYLE> </head> <body text=black bgcolor=ffffff align=left> <H4><u><right><SPAN style="COLOR:blue">LastUpdated Time</SPAN></right></u></H4> <br> <p> <table align=left width=30% border=3 bordercolor=black bgcolor=FFFF99> <tr> <th scope="col"> PE </th> <th scope="col"> UPDATE STATUS </th> </tr> <tr> <td> <B><CENTER><SPAN style="COLOR:blue">1</SPAN></CENTER></B>
</td>
<td>
<B><SPAN style="COLOR:green">a</SPAN
></B>
</td>
</tr>
<tr>
<td>
<B><CENTER><SPAN style="COLOR:blue">1</SPAN></CENTER></B>
</td>
<td>
<B><SPAN style="COLOR:green">a</SPAN
></B>
</td>
</tr>
<tr>
<td>
<B><CENTER><SPAN style="COLOR:blue">2</SPAN></CENTER></B>
</td>
<td>
<B><SPAN style="COLOR:green">a</SPAN
></B>
</td>
</tr>
<tr>
<td>
<B><CENTER><SPAN style="COLOR:blue">5</SPAN></CENTER></B>
</td>
<td>
<B><SPAN style="COLOR:green">a</SPAN
></B>
</td>
</tr>
<tr>
<td>
<B><CENTER><SPAN style="COLOR:blue">6</SPAN></CENTER></B>
</td>
<td>
<B><SPAN style="COLOR:green">a</SPAN
></B>
</td>
</tr>
</table>
<p>
</body>
</html>

EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.

2

After some heart-felt talks with my family and some friends, along with some crying, I think you need to scrap everything and start over.

Everything.

Burn it.

That code looks like it was written 10 years ago. It’s so outdated and just…wrong. I will not do that code justice by pulling its head out of the grave and resuscitating it.

Edit-Is this for an HTML e-mail or for a webpage? If the former, I’ll help.

1 Like
3

Thanks Ryan It is for an HTML email.

4

Oh thank God. Give me one moment and I’ll try redoing this page.

5

How was the code generated/written, please? (not really butting in, just incredibly curious :lol:)

6

Which code snippet is suppposed to be right? Did you post the code wrong?

7

@Ryan - the first one is right. The second one is the same but just with different values.

@ronpat - It is being generated by an Oracle query with HTML markup turned on.

8

Rule number 1 of email: Don’t try to align separate items. Make one big table first, perhaps with three cells. The first and third can contain your tables, and the middle one be used for the spacing between. Any other approach and you’ll be in eternal misery.

2 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.