Table Data

Hi im trying to put text next to
an image in a td tag and it is going off the table.

I want it like this:

Hi @csosa. I think you’ll have to include the full URL to the images as we don’t get to see much at all there.

Is there a reason you are using old-fashioned tables for layout, rather than divs etc?

1 Like

Hi,

I assume this is for email hence the outdated html?

If so then the problem is that your table is invalid because you don;t have the same number of cells in each row. If you want something to span cells then you need to use ‘colspan’.

e.g.


<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
	<tbody>
		<tr>
			<td colspan="2" bgcolor="#70bbd9"><img alt="" src="/sites/default/files/email_images/pose_notification_redesign_email_final_01.jpg" style="width: 600px; height: 283px;" /></td>
		</tr>
		<tr>
			<td style="padding: 0px;"><img alt="" src="/sites/default/files/email_images/pose_notification_redesign_email_final_02.jpg" style="width: 355px; height: 294px;" /></td>
			<td style="padding: 0px;"><p>Hi Nathaniel,</p></td>
		</tr>
		<tr>
			<td colspan="2" bgcolor="#ee4c50">Row 3</td>
		</tr>
	</tbody>
</table>

You will also need to add a width to the cell if you want it only to fit the image where you have two cells across.

Columns and rows must always match up so when you span a row or column you need rowspan or colspan accordingly.

If this is indeed for an email then you would be better off avoiding rowspan and colspan anyway and instead use nested tables (each row is a single table and then you can have more cells in each table as required. Of course it does make alignment a little difficult sometimes).

If this is not for an email then start again and write it properly:)

4 Likes

ok so using tables for HTML emails is old fashioned? I heard it is best practice to use tables…but ok.

So I should use divs better?

It is for an email.

can you show me an example of that?

If it were a web page, you should not be using tables for layout. But for emails that’s OK.

A nested table is where the content of a <td> is another table.

1 Like

yeah I know better than to do that haha.

No you misunderstood. Tables are the only way to code HTML emails.

yeah I got it.

something like this?

<html>
<body >
	<table border=5 bordercolor = red>
		<tr>
			<td >
				<table >
					<tr><td>
						First Nested Table
					</td></tr>
				</table>
			</td>
			<td >
				<table >
					<tr><td>
						<ul>
							<li>VB.Net</li>
							<li>Csharp</li>
							<li>Asp.Net</li>
						</ul>
					</td></tr>
				</table>
			</td>
		</tr>
		<tr>
			<td >
				<table >
					<tr><td>
						<a href="www.mywebsite.com/about.html">About</a>
					</td></tr>
				</table>
			</td>
			<td>
				<table >
					<tr><td>
						<img src="image.png">
					</td></tr>
				</table>
			</td>
		</tr>
	</table>
</body>
</html>

So I implemented the email in a better format

Now that you have used nested tables for the two cells you don’t need the colspans because you only have a column of one cell. There are no cells to span.

Also you don’t need two nested tables you could just have a nested table with two cells.

e.g.


<table id="main-table" border=0 bordercolor = red style="width:600px;">
  <tr>
    <td><img id="header" alt="" src="https://www.tuneupfitness.com/sites/default/files/email_images/pose_notification_redesign_email_final_01.jpg" style="width: 600px; height: 285px;" /></td>
  </tr>
  <tr>
    <td><table>
        <tr>
          <td><img class="icon-sections"alt="icons" style="width: 355px; height: 294px;" src="https://www.tuneupfitness.com/sites/default/files/email_images/pose_notification_redesign_email_final_02.jpg" /></td>
          <td><p id="intro"><strong>Hi Nathaniel,</strong><br>
              <br>
              Below is a direct link to the<br>
              YTU Pose
              of the Week video: <br>
              <br>
              <strong>Weekly Pose</strong>: Locust <br>
              <br>
              <strong>Therapeutic Benefits:</strong> Improving 
              awareness and strength of the 
              backside of the body which can 
              balance the tension from slouching 
              in the front of the body. </p></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td ><img class"video-image" alt="" width="600"src="https://www.tuneupfitness.com/sites/default/files/email_images/pose_notification_redesign_email_final_05.jpg" /></td>
  </tr>
  <tr>
    <td><img alt="" width="600"src="https://www.tuneupfitness.com/sites/default/files/email_images/pose_notification_redesign_email_final_06.jpg" /></td>
  </tr>
  <tr>
    <td><img alt="" width="600"src="https://www.tuneupfitness.com/sites/default/files/email_images/pose_notification_redesign_email_final_07.jpg" /></td>
  </tr>
  <tr>
    <td><p id="outro"> Warmest,<br>
        Jill Miller<br>
        Creator, Yoga Tune Up® </p></td>
  </tr>
</table>

Also remember most email clients do not display images by default so you may want to make sure that there is some text visible so don’t replace all your text with images.

2 Likes

When I put the code in my WYSIWYG Box it gets broken

What WYSIWYG box is that @csosa? The best way to view it would be in an email client or webmail application as that’s what it is intended for.

2 Likes

Drupal WISYWYG

and its also giving slight borders…

I see their is padding…

#main, #header {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;}

UPDATE: I figured it out.

I found where the border is coming from but its not letting me overrride it…

In your table add inline styles to all td tags and set border to none and see what happens.

It worked a bit. Their is still a border on the outside and the bottom of the intro.

<table id="main-table" style="width:600px;">
	<tbody>
		<tr>
			<td style="border:none"><img alt="" id="header" src="https://www.tuneupfitness.com/sites/default/files/email_images/pose_notification_redesign_email_final_01.jpg" style="width: 600px;height: 285px;border-width: 0px;border-style: solid;padding-left:0px;padding-right:0px;" /></td>
		</tr>
		<tr>
			<td style="border:none">
			<table>
				<tbody>
					<tr>
						<td style="border:none;"><img alt="icons" class="icon-sections" src="https://www.tuneupfitness.com/sites/default/files/email_images/pose_notification_redesign_email_final_02.jpg" style="width: 300px; height: 248px;" /></td>
						<td style="border:none;">
						<p id="intro"><strong>Hi Nathaniel,</strong><br />
						<br />
						Below is a direct link to the<br />
						YTU Pose of the Week video:<br />
						<br />
						<strong>Weekly Pose</strong>: %pose_name<br />
						<br />
						<strong>Therapeutic Benefits:</strong> %therapeutic_application</p>
						</td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
		<tr>
			<td style="border:none">%email_image</td>
		</tr>
		<tr>
			<td style="border:none;"><img alt="" src="https://www.tuneupfitness.com/sites/default/files/email_images/pose_notification_redesign_email_final_06.jpg" width="600" /></td>
		</tr>
		<tr>
			<td style="border:none;"><img alt="" src="https://www.tuneupfitness.com/sites/default/files/email_images/pose_notification_redesign_email_final_07.jpg" width="600" /></td>
		</tr>
		<tr>
			<td style="border:none;">
			<p id="outro" style="color:#788767; margin-left:35px;">Warmest,<br />
			Jill Miller<br />
			Creator, Yoga Tune Up®</p>
			</td>
		</tr>
	</tbody>
</table>