Jump to content

Align 2 tables next to each other

php_begins

By php_begins
in HTML Help

 Share

Recommended Posts

php_begins Advanced Member

php_begins

Posted
Posted

I have 4 tables in my code. i need 2 tables each aligned next to each other without using any kind of css(No css because it creates a problem with my mail function).

Here is my code below.

I need the first table aligned next to the second table , the third table aligned next to fourth table.

<table width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" >
<tr>
   <td>Popular Features
   </td>
</tr>

<tr height="25">
  <td height="25" bgcolor="#f5f5f5"><font color="#ce0000"> » </font><a href="www.test.com" target="_blank">Title 1</a>
  </td>
</tr>

<tr height="25">
   <td height="25"><font color="#ce0000"> » </font><a href="www.test.com" target="_blank">Title 2</a>
   </td>
</tr>

<tr height="25">
   <td height="25" bgcolor="#f5f5f5"><font color="#ce0000">» </font><a href="www.test.com" target="_blank">Title 3</a>
   </td>
</tr>

<tr height="25">
   <td height="25"><font color="#ce0000">» </font><a href="www.test.com" target="_blank">Title 4</a>
   </td>
</tr>

<tr height="25">
   <td height="25" bgcolor="#f5f5f5"><font color="#ce0000">» </font><a href="www.test.com" target="_blank">Title 5 </a>
   </td>
</tr>

<tr height="25">
   <td height="25"><font color="#ce0000">» </font><a href="www.test.com" target="_blank">Title 6</a>
   </td>
</tr>
</table>


<table  width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
   <td width="300"><a href="http://blast.verticalscope.com/oi3-vs/scripts/script.php?id=12536&uid=2381352&messageId=1690&mid=2639" target="_blank"><img width="300" height="250" border="0" align="middle" alt="" src="http://img.verticalscope.com/atv.com/newsletters/images/09072011/Kawasaki-300x250.jpg"></a>
   </td>
</table>


<table  width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">



   <tr>
      <td>Reviews</tr>
   </td>
   </tr>

   <tr>
      <td>
      <a  href="http://t0.gstatic.com/images?q=tbn:ANd9GcSgfnlqd9YfSAZ73KbO6p4jzScBCwFCBTWvLjyepmfTF-jYVokI" target="_blank"><img border="0" align="left" alt="" src="http://t0.gstatic.com/images?q=tbn:ANd9GcSgfnlqd9YfSAZ73KbO6p4jzScBCwFCBTWvLjyepmfTF-jYVokI">F1 
      </a>
   </td>
   </tr>

   <tr>
     <td>
     <a href="http://t0.gstatic.com/images?q=tbn:ANd9GcSgfnlqd9YfSAZ73KbO6p4jzScBCwFCBTWvLjyepmfTF-jYVokI" target="_blank"><img border="0" align="left" alt="" src="http://t0.gstatic.com/images?q=tbn:ANd9GcSgfnlqd9YfSAZ73KbO6p4jzScBCwFCBTWvLjyepmfTF-jYVokI">F2 
     </a>
     </td>
   </tr>
</table>

<table  width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
<tr>
   <td>Registry</tr></td>
</tr>

<tr>
   <td>
   <a  href="http://t1.gstatic.com/images?q=tbn:ANd9GcQiYqLEBA3H4giuf4HbigPqpOiAMMivFF-Xy838nGacOBjntovCHQ" target="_blank"><img  border="0" align="left" alt="" src="http://t1.gstatic.com/images?q=tbn:ANd9GcQiYqLEBA3H4giuf4HbigPqpOiAMMivFF-Xy838nGacOBjntovCHQ">L1
   </a>
   </td>
</tr>

<tr>
   
   <td>
   <a href="http://t1.gstatic.com/images?q=tbn:ANd9GcQiYqLEBA3H4giuf4HbigPqpOiAMMivFF-Xy838nGacOBjntovCHQ" target="_blank"><img border="0" align="left" alt="" src="http://t1.gstatic.com/images?q=tbn:ANd9GcQiYqLEBA3H4giuf4HbigPqpOiAMMivFF-Xy838nGacOBjntovCHQ">L2
   </a>
   </td>
   
</tr>
</table>

 

I have tried nesting of tables. Also if i reduce the width of table, the table gets aligned to the right.Could someone help me out with the code.

You can find the example at

http://cs.txstate.edu/~sr1388/Test/

 

Link to comment
Share on other sites
dodgeitorelse Member

dodgeitorelse

Posted
Posted

wrap each table in its own div and use float is an option.

<div style="float: left;">
<table width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" >
<tr>
   <td>Popular Features
   </td>
</tr>

<tr height="25">
  <td height="25" bgcolor="#f5f5f5"><font color="#ce0000"> » </font><a href="www.test.com" target="_blank">Title 1</a>
  </td>
</tr>

<tr height="25">
   <td height="25"><font color="#ce0000"> » </font><a href="www.test.com" target="_blank">Title 2</a>
   </td>
</tr>

<tr height="25">
   <td height="25" bgcolor="#f5f5f5"><font color="#ce0000">» </font><a href="www.test.com" target="_blank">Title 3</a>
   </td>
</tr>

<tr height="25">
   <td height="25"><font color="#ce0000">» </font><a href="www.test.com" target="_blank">Title 4</a>
   </td>
</tr>

<tr height="25">
   <td height="25" bgcolor="#f5f5f5"><font color="#ce0000">» </font><a href="www.test.com" target="_blank">Title 5 </a>
   </td>
</tr>

<tr height="25">
   <td height="25"><font color="#ce0000">» </font><a href="www.test.com" target="_blank">Title 6</a>
   </td>
</tr>
</table>
</div>

<div style="float: right;">
<table  width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
   <td width="300"><a href="http://blast.verticalscope.com/oi3-vs/scripts/script.php?id=12536&uid=2381352&messageId=1690&mid=2639" target="_blank"><img width="300" height="250" border="0" align="middle" alt="" src="http://img.verticalscope.com/atv.com/newsletters/images/09072011/Kawasaki-300x250.jpg"></a>
   </td>
</table>


<table  width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">



   <tr>
      <td>Reviews</tr>
   </td>
   </tr>

   <tr>
      <td>
      <a  href="http://t0.gstatic.com/images?q=tbn:ANd9GcSgfnlqd9YfSAZ73KbO6p4jzScBCwFCBTWvLjyepmfTF-jYVokI" target="_blank"><img border="0" align="left" alt="" src="http://t0.gstatic.com/images?q=tbn:ANd9GcSgfnlqd9YfSAZ73KbO6p4jzScBCwFCBTWvLjyepmfTF-jYVokI">F1 
      </a>
   </td>
   </tr>

   <tr>
     <td>
     <a href="http://t0.gstatic.com/images?q=tbn:ANd9GcSgfnlqd9YfSAZ73KbO6p4jzScBCwFCBTWvLjyepmfTF-jYVokI" target="_blank"><img border="0" align="left" alt="" src="http://t0.gstatic.com/images?q=tbn:ANd9GcSgfnlqd9YfSAZ73KbO6p4jzScBCwFCBTWvLjyepmfTF-jYVokI">F2 
     </a>
     </td>
   </tr>
</table>

<table  width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
<tr>
   <td>Registry</tr></td>
</tr>

<tr>
   <td>
   <a  href="http://t1.gstatic.com/images?q=tbn:ANd9GcQiYqLEBA3H4giuf4HbigPqpOiAMMivFF-Xy838nGacOBjntovCHQ" target="_blank"><img  border="0" align="left" alt="" src="http://t1.gstatic.com/images?q=tbn:ANd9GcQiYqLEBA3H4giuf4HbigPqpOiAMMivFF-Xy838nGacOBjntovCHQ">L1
   </a>
   </td>
</tr>

<tr>
   
   <td>
   <a href="http://t1.gstatic.com/images?q=tbn:ANd9GcQiYqLEBA3H4giuf4HbigPqpOiAMMivFF-Xy838nGacOBjntovCHQ" target="_blank"><img border="0" align="left" alt="" src="http://t1.gstatic.com/images?q=tbn:ANd9GcQiYqLEBA3H4giuf4HbigPqpOiAMMivFF-Xy838nGacOBjntovCHQ">L2
   </a>
   </td>
   
</tr>
</table>
</div>

Link to comment
Share on other sites
php_begins Advanced Member

php_begins

Posted
  • Author
Posted

How can CSS possibly interfere with a mail function? The two aren't in any way related.

 

What  I meant was the whole code would go inside the body of a mail function and would be sent to different email addresses . I do not want css inside the body of the mail functiom since some email clients do not receive css very well.

Therefore it would be suitable in this case to have only html elements inside the code.

Link to comment
Share on other sites
Pikachu2000 Prolific Member

Pikachu2000

Posted
Posted

Then if you have to use tables, it sounds like nested tables is about your only option, right?

 

<table border="1">
<tr>
<td>
	<table border="1">
		<tr>
		<td>First nested table</td>
		</tr>
	</table>
</td>
<td>
	<table border="1">
		<tr>
		<td>Second nested table</td>
		</tr>
	</table>
</td>
</tr>
</table>

Link to comment
Share on other sites
php_begins Advanced Member

php_begins

Posted
  • Author
Posted

Then if you have to use tables, it sounds like nested tables is about your only option, right?

 

<table border="1">
<tr>
<td>
	<table border="1">
		<tr>
		<td>First nested table</td>
		</tr>
	</table>
</td>
<td>
	<table border="1">
		<tr>
		<td>Second nested table</td>
		</tr>
	</table>
</td>
</tr>
</table>

Thanks Pikachu2000, that worked great!

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.