I am trying to create a table where the left column is pushed top to fit its contents. Note that the right column requires to be height=300.
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="65%">
This is my 1st cell
</td>
<td valign="top" width="35%" height="300" rowspan="3" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" width="65%">This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" width="65%">
This is my 3rd cell
</td>
</tr>
</table>
This is what I have come out so far: https://jsfiddle.net/5y33rtm3/1/
Desired outcome:
You can add rowspan="5" for the third row in the left:
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="65%">
This is my 1st cell
</td>
<td valign="top" width="35%" height="300" rowspan="7" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" width="65%">This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" width="65%" rowspan="5"> <!-- CHANGED HERE -->
This is my 3rd cell
</td>
</tr>
</table>
or you can add height: 100% to it:
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="65%">
This is my 1st cell
</td>
<td valign="top" width="35%" height="300" rowspan="7" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" width="65%">This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" width="65%" style="height: 100%"> <!-- CHANGED HERE -->
This is my 3rd cell
</td>
</tr>
</table>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td width="65%">
This is my 1st cell
</td>
<td valign="top" width="35%" height="300" rowspan="3" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" width="65%">This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" style="height:100%" width="65%">
<img src="ant.jpg" style="height:40%;width:40%;" />
</td>
</tr>
</table>
Related
There is a public web page that shows me information within three tables. I want to extract this information, but unfortunately I don't have an API for this, which I could use in my code. I thought about how this could best be solved and came to the conclusion that an analysis of the HTML code is unavoidable. So I would make an http get request and "cut" the data out of the response. One of the tables looks something like this
<table border="3" rules="all" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td align="center">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial" color="#000000">
<b>Mo</b>
</font></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial">
<b>Di</b>
</font></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial">
<b>Mi</b>
</font></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial">
<b>Do</b>
</font></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial">
<b>Fr</b>
</font></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial">
7:35
</font></td>
</tr>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial">
8:20
</font></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1" bgcolor="#010101">
<table width="100%">
<tbody>
<tr>
<td width="33%" bgcolor="#010101" nowrap="1"><font size="3" face="Arial" color="#FFFFFF">
WSP
</font></td>
<td width="33%" bgcolor="#010101" nowrap="1"><font size="3" face="Arial" color="#FFFFFF">
wü
</font></td>
<td width="33%" bgcolor="#010101" nowrap="1"><font size="3" face="Arial" color="#FFFFFF">
8k
</font></td>
</tr>
<tr>
<td colspan="3" width="33%" bgcolor="#010101" nowrap="1"><font size="3" face="Arial"
color="#FFFFFF">
A213
</font></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial" color="#000000">
8:25
</font></td>
</tr>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial">
9:10
</font></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="4" align="center" nowrap="1" bgcolor="#80FF80">
<table width="100%">
<tbody>
<tr>
<td width="33%" bgcolor="#80FF80" nowrap="1"><font size="3" face="Arial" color="#000000">
Phy
</font></td>
<td width="33%" bgcolor="#80FF80" nowrap="1"><font size="3" face="Arial" color="#000000">
mp
</font></td>
<td width="33%" bgcolor="#80FF80" nowrap="1"><font size="3" face="Arial" color="#000000">
8k
</font></td>
</tr>
<tr>
<td colspan="3" width="33%" bgcolor="#80FF80" nowrap="1"><font size="3" face="Arial"
color="#000000">
A236
</font></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial" color="#000000">
9:15
</font></td>
</tr>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial">
10:00
</font></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial">
10:20
</font></td>
</tr>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial">
11:05
</font></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="4" align="center" nowrap="1" bgcolor="#8080FF">
<table width="100%">
<tbody>
<tr>
<td width="33%" bgcolor="#8080FF" nowrap="1"><font size="3" face="Arial" color="#000000">
G&P
</font></td>
<td width="33%" bgcolor="#8080FF" nowrap="1"><font size="3" face="Arial" color="#000000">
hn
</font></td>
<td width="33%" bgcolor="#8080FF" nowrap="1"><font size="3" face="Arial" color="#000000">
8k
</font></td>
</tr>
<tr>
<td colspan="3" width="33%" bgcolor="#8080FF" nowrap="1"><font size="3" face="Arial"
color="#000000">
A312
</font></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial" color="#000000">
11:10
</font></td>
</tr>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial">
11:55
</font></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial">
12:00
</font></td>
</tr>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial">
12:45
</font></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial">
12:55
</font></td>
</tr>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial">
13:40
</font></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="4" align="center" nowrap="1" bgcolor="#8000FF">
<table width="100%">
<tbody>
<tr>
<td width="33%" bgcolor="#8000FF" nowrap="1"><font size="3" face="Arial" color="#FFFFFF">
Deu
</font></td>
<td width="33%" bgcolor="#8000FF" nowrap="1"><font size="3" face="Arial" color="#FFFFFF">
mu
</font></td>
<td width="33%" bgcolor="#8000FF" nowrap="1"><font size="3" face="Arial" color="#FFFFFF">
8k
</font></td>
</tr>
<tr>
<td colspan="3" width="33%" bgcolor="#8000FF" nowrap="1"><font size="3" face="Arial"
color="#FFFFFF">
A413
</font></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial" color="#000000">
13:45
</font></td>
</tr>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial">
14:30
</font></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="4" align="center" nowrap="1" bgcolor="#FF8040">
<table width="100%">
<tbody>
<tr>
<td width="33%" bgcolor="#FF8040" nowrap="1"><font size="3" face="Arial" color="#000000">
MatS
</font></td>
<td width="33%" bgcolor="#FF8040" nowrap="1"><font size="3" face="Arial" color="#000000">
rm
</font></td>
<td width="33%" bgcolor="#FF8040" nowrap="1"><font size="3" face="Arial" color="#000000">
8k
</font></td>
</tr>
<tr>
<td colspan="3" width="33%" bgcolor="#FF8040" nowrap="1"><font size="3" face="Arial"
color="#000000">
A202
</font></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial" color="#000000">
15:35
</font></td>
</tr>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial">
16:20
</font></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial">
16:25
</font></td>
</tr>
<tr>
<td align="center" nowrap="1"><font size="3" face="Arial">
17:10
</font></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1">
<table width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td colspan="12" rowspan="2" align="center" nowrap="1" bgcolor="#0000A0">
<table width="100%">
<tbody>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
So I have a huge block from which I only want to filter out the following data.
I don't expect a ready-made solution, just a food for thought. I want to solve this problem with Dart and would treat all HTML as a string, whereupon I would cut this string and read the data from the resulting array.
Hi working to create a newsletter template. At the moment I am stuck as i am unable to change the alignment of the td
I have attached a CodePen, but below is the code! Firstly I don't understand why the elements on the right are aligned left-center? Eitherway I need them to be top-center. Any ideas?
<table align="center" width="690px" bgcolor="#d3e1a3" border="1">
<tr>
<td>
<table width="297px" height="100%">
<tr>
<td>
<img src="https://www.naturimgarten.at/assets/images/4/Streicher-ff65c810.jpg" style="max-width:297px;" alt="placeholder" mc:edit="image">
</td>
</tr>
</table>
</td>
<td>
<table width="393px" align="center">
<tr>
<td>
name
</td>
</tr>
<tr>
<td>
country
</td>
</tr>
<tr>
<td>text</td>
</tr>
</table>
</td>
</tr>
</table>
Mind you this is for a newsletter template so think web 1998, most of the fancy web stuff is not usefull here!
<table align="center" width="690px" bgcolor="#d3e1a3" border="1">
<tr>
<td>
<table width="297px" height="100%">
<tr>
<td>
<img src="https://www.naturimgarten.at/assets/images/4/Streicher-ff65c810.jpg" style="max-width:297px;" alt="placeholder" mc:edit="image">
</td>
</tr>
</table>
</td>
<td style="vertical-align:top; text-align:center">
<table width="393px" align="center">
<tr>
<td>
name
</td>
</tr>
<tr>
<td>
country
</td>
</tr>
<tr>
<td>text</td>
</tr>
</table>
</td>
</tr>
</table>
You have put align="center" in the td tag.
<table align="center" width="690px" bgcolor="#d3e1a3" border="1">
<tr>
<td>
<table width="297px" height="100%">
<tr>
<td align="center" >
<img src="https://www.naturimgarten.at/assets/images/4/Streicher-ff65c810.jpg" style="max-width:297px;" alt="placeholder" mc:edit="image">
</td>
</tr>
</table>
</td>
<td style="vertical-align:top;">
<table width="393px" align="center">
<tr>
<td align="center" >
name
</td>
</tr>
<tr>
<td align="center" >
country
</td>
</tr>
<tr>
<td align="center" >text</td>
</tr>
</table>
</td>
</tr>
</table>
It seems easy but can't write the HTML code of the above table.
Here is what I tried so far:
<table border="1" style="border-collapse:collapse;" width="25%">
<tr>
<td>col1</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
Sure you want html??
<table align="center" width="590" height="590" >
<tr>
<td align="center" height="80" colspan="4">central text</td>
</tr>
<tr>
<td align="center" height="80" colspan="2">col</td>
<td align="center" colspan="2">col</td>
</tr>
<tr>
<td align="center" height="40">t</td>
<td align="center" height="40">t</td>
<td align="center" height="80" rowspan="2">t</td>
<td align="center" rowspan="2">t</td>
</tr>
<tr>
<td align="center" height="40">t</td>
<td align="center" height="40">t</td>
</tr>
<tr>
<td align="center" height="30">t</td>
<td align="center" >t</td>
<td align="center" >t</td>
<td align="center" >t</td>
</tr>
</table>
Like this?
colspan and rowspan was missing from your code.
<table border="1" style="border-collapse: collapse;">
<tr>
<td colspan=4 align="center">central text</td>
</tr>
<tr>
<td colspan=2 align="center">col(1)</td>
<td colspan=2 align="center">col(2)</td>
</tr>
<tr>
<td align="center">text</td>
<td align="center">text</td>
<td rowspan=2 align="center">text</td>
<td rowspan=2 align="center">text</td>
</tr>
</tr>
<tr>
<td align="center">text</td>
<td align="center">text</td>
</tr>
<tr>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
</tr>
</table>
I have designed a email template but I am facing alignment issue on iPhone 5 and yahoomail .The contents could not be aligned to center. I am using reply manager to send email template.
Heres my code :
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px">
<tbody>
<tr>
<td>
<table align="left" border="1" style="width:32%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><p><img alt="" src="http://websamplenow.com/30/logoloftems/images/brochure.jpg" style="height:157px; width:170px" /></p></td>
</tr>
<tr>
<td><p style="text-align:center"><span style="font-size:14px">Handing out brochures is a very cost-effective way to advertise your brand.</span></p></td>
</tr>
<tr>
<td>
<table align="center">
<tbody>
<tr>
<td><img src="http://websamplenow.com/129/ems1/images/readmore.jpg" /> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End Image 1 -->
<table align="left" style="width:2%">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<table align="left" border="1" style="width:32%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><p><img alt="" src="http://websamplenow.com/30/logoloftems/images/imggz2.jpg" style="height:157px; width:170px" /></p></td>
</tr>
<tr>
<td><p style="text-align:center"><span style="font-size:14px">Wow clients by using an animated logo for your website or email.</span></p></td>
</tr>
<tr>
<td>
<table align="center">
<tbody>
<tr>
<td style="text-align:center"><img src="http://websamplenow.com/129/ems1/images/readmore.jpg" /> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- End Image 2 -->
</tbody>
</table>
<table align="left" style="width:2%">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<table align="left" border="1" style="width:32%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><p><img alt="" src="http://websamplenow.com/30/logoloftems/images/invite.jpg" style="height:157px; width:170px" /></p></td>
</tr>
<tr>
<td><p style="text-align:center"><span style="font-size:14px">Promoting events means attracting people. You need attractive designs!</span></p></td>
</tr>
<tr>
<td>
<table align="center">
<tbody>
<tr>
<td><img src="http://websamplenow.com/129/ems1/images/readmore.jpg" /> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- End Image 3 -->
</tbody>
</table>
<!-- 3Column ends --><!--1 img starts--></td>
</tr>
<tr>
<td>
<table align="center" cellpadding="10" cellspacing="10" style="width:600px">
<tbody>
<tr>
<td style="text-align:center"><img src="http://websamplenow.com/129/ems1/images/moreinfo.jpg" style="width:60%" /></td>
</tr>
</tbody>
</table>
<!--1 img ends--><!--clients logo starts--><!--1 img ends--><!--clients logo starts--></td>
</tr>
<tr>
<td>
<table align="center" cellpadding="0" cellspacing="0" style="width:600px">
<tbody>
<tr>
<td><img src="http://websamplenow.com/129/ems1/images/fc_all.jpg" style="width:600px" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table align="center" cellpadding="0" cellspacing="0" style="width:600px">
<tbody>
<tr>
</tr>
</tbody>
</table>
<table align="center" cellpadding="0" cellspacing="0" style="width:600px">
<tbody>
<tr>
<td><img src="http://websamplenow.com/129/ems1/images/fc_microsoft.jpg" /></td>
<td><img src="http://websamplenow.com/129/ems1/images/fc_gilette.jpg" /></td>
<td><img src="http://websamplenow.com/129/ems1/images/fc_oreck.jpg" /></td>
<td><img src="http://websamplenow.com/129/ems1/images/fc_whirlpool.jpg" /></td>
<td><img src="http://websamplenow.com/129/ems1/images/fc_bluething.jpg" style="height:37px; width:98px" /></td>
<td dir="rtl"><img src="http://websamplenow.com/129/ems1/images/fc_oprah.jpg" style="height:37px; width:126px" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
The button 3 boxes are not aligned to center.
Can anyone help me to solve it out?
I have a table alignment I’m having trouble doing what I want it to do. Below is what I have, but I want the cell with 1 in it to hug the top the whole table while I want the cell with 2 in it to hug the bottom baseline of the table. Cell 3 may have variable height. Anyone know how this possible? Probably something simple I’m missing but having figured it out yet.
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="50">
<tr>
<td>1
</td>
</tr>
<tr>
<td>2
</td>
</tr>
</table>
</td>
<td height="200" width="50">3
</td>
</tr>
</table>
You need to add a height="100%" on your tables, along with some valign attributes on the cells.
<table cellpadding="0" cellspacing="0" border="0" height="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="50" height="100%">
<tr>
<td valign="top">1
</td>
</tr>
<tr>
<td valign="bottom">2
</td>
</tr>
</table>
</td>
<td>
<table><tr><td height="200" width="50">3</td></tr></table>
</td>
</tr>
</table>
Ah figured it out:
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="300" height="19">1</td>
<td width="300" rowspan="2">
<br>
<br>
3<br>
<br>
</td>
</tr>
<tr>
<td valign="bottom">
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>2</td>
</tr>
</table></td>
</tr>
</table>