Text below table appears to right of table

Question

jyotimagic 0 Newbie Poster

15 Years Ago

I'm using the table function on a website builder and want to create space between tables so I can add text. When I place the text in what looks like the correct position between the tables on the builder page, when I view the page, the text appears to the right at the top of the tables.

I am able to edit in HTML, for example, inserting Paypal button codes, but I don't know enough about HTML to make the adjustment I need. Can someone give me the code that needs to be inserted between the two tables?

Here is the html for two of the tables. I want to create a space and add text between these two tables. There are several more similar tables above and below.

<table border="0" cellpadding="2" align="left">
<tbody>
<tr>
<td style="background-color: #b6da76; height: 30px; width: 200px;" valign="middle">
<p style="text-align: center;"><span style="font-size: small;"><strong>Zen Shiatsu*<br /></strong></span></p>
<p style="text-align: center;"><span style="font-size: small;"><strong>$120</strong></span></p>
<p style="text-align: center;"><span style="font-size: small;"><strong><img src="http://sedona.massagetherapy.com/bodywork_images/General_images/ABMP10_11.jpg" alt="" width="174" height="115" /><br /></strong></span></p>
</td>
<td style="background-color: #b6da76; height: 30px; width: 30px;" valign="middle">&nbsp;</td>
<td style="background-color: #b6da76; height: 30px; width: 325px;" align="left" valign="middle">
<p style="text-align: left;"><span style="font-size: small; font-family: verdana,geneva;"><em><strong>Something different!</strong></em></span></p>
<p style="text-align: left;">Stretching, finger and palm pressure to balance and energize your meridians (energy channels). Experience a state of deep relaxation, while feeling fully energized.</p>
<p style="text-align: left;">Fully clothed session on a futon mat.</p>
<p style="text-align: left;">(80 minutes)</p>
<form action=Paypal button</form></td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>

This is where I want the space and the text

<table border="0" cellpadding="2" align="left">
<tbody>
<tr>
<td style="background-color: #b6da76; height: 30px; width: 200px;" valign="middle">
<p style="text-align: center;"><span style="font-size: small;"><strong>Energy Medicine*<br /></strong></span></p>
<p style="text-align: center;"><span style="font-size: small;"><strong>$95 - $145</strong></span></p>
<p style="text-align: center;"><span style="font-size: small;"><strong><img src="http://sedona.massagetherapy.com/bodywork_images/DonnaEden3rdEyesmaller.jpg" alt="" width="119" height="177" /><br /></strong></span></p>
</td>
<td style="background-color: #b6da76; height: 30px; width: 30px;" valign="middle">&nbsp;</td>
<td style="background-color: #b6da76; height: 30px; width: 325px;" align="left" valign="middle">
<p style="text-align: left;"><span style="font-size: small; font-family: verdana,geneva;"><em><strong>Empowering you in staying healthy!<br /></strong></em></span></p>
<p style="text-align: left;">Your first session with Jyoti needs to be an Initial Session for 90 minutes. After that, you may book individual sessions as needed. These sessions are around 75 minutes.</p>
<form action=Paypal button</form></td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>

user-interface web-design

Edited 13 Years Ago by happygeek because: fixed formatting

4 Contributors
7 Replies
3K Views
3 Months Discussion Span
Latest Post 15 Years Ago Latest Post by jyotimagic

Dani AI

Generated 11 Months Ago

What you are seeing is classic float-like behavior. Because each table is aligned left, the browser lets following inline content flow up to the right of the previous table instead of starting below it. That is why your paragraph appears beside the tables. ’s version likely worked because its structure incidentally prevented the wrapping; ’s note about a missing closing tag is important too, since broken table markup can make wrapping unpredictable.

Add a clear between items so the next paragraph (or table) starts on a new line:

<p style="clear: both; margin: 1em 0 1.5em;">Your in-between text goes here.</p>

If you prefer an explicit separator:

<div style="clear: both;"></div>
<p style="margin: 1em 0;">Your in-between text goes here.</p>

Or force the next table to start below whatever came before:

<table style="clear: both; margin-top: 1em;"> ... </table>

For your "Back to top" links, add an anchor once near the top:

<div id="top"></div>

Then between sections:

<p style="clear: both; margin: 0.5em 0;"><a href="#top">Back to top</a></p>

Clean-up tips that will save you headaches:

Ensure every <tr> and <td> has a matching closing tag (as flagged).
Replace  -based spacing with CSS margins on  or <td>.
Fix malformed markup like stray <form> attributes; invalid HTML often causes odd floats/wrapping.

All 7 Replies

kaizerkiller 7 Newbie Poster

15 Years Ago

IT WORKS FOR ME. JUST INSERT YOUR CODES THERE. I JUST RUSH IT.

<table width="492" border="1">
  <tr>
    <td width="203"><p><strong>Zen Shiatsu*<br />
    </strong></p>
      <p><strong>$120</strong></p>
    <p><strong><img src="http://sedona.massagetherapy.com/bodywork_images/General_images/ABMP10_11.jpg" alt="" width="174" height="115" /></strong></p></td>
    <td width="89">&nbsp;</td>
    <td width="178"><table cellspacing="0" cellpadding="0">
      <tr>
        <td width="10" valign="middle"></td>
        <td width="211" align="left" valign="middle"><p><em><strong>Something different!</strong></em></p>
          <p>Stretching, finger and palm pressure to   balance and energize your meridians (energy channels). Experience a   state of deep relaxation, while feeling fully energized.</p>
          <p>Fully clothed session on a futon mat.</p>
          <p>(80 minutes)</p></td>
      </tr>
    </table></td>
  </tr>
</table>
<p><br />
kdasd</p>
<p>&nbsp;</p>
<table width="492" border="1">
  <tr>
    <td width="203"><p><strong>Zen Shiatsu*<br />
    </strong></p>
      <p><strong>$120</strong></p>
      <p><strong><img src="http://sedona.massagetherapy.com/bodywork_images/General_images/ABMP10_11.jpg" alt="" width="174" height="115" /></strong></p></td>
    <td width="89">&nbsp;</td>
    <td width="178"><table cellspacing="0" cellpadding="0">
      <tr>
        <td width="10" valign="middle"></td>
        <td width="211" align="left" valign="middle"><p><em><strong>Something different!</strong></em></p>
          <p>Stretching, finger and palm pressure to   balance and energize your meridians (energy channels). Experience a   state of deep relaxation, while feeling fully energized.</p>
          <p>Fully clothed session on a futon mat.</p>
          <p>(80 minutes)</p></td>
      </tr>
    </table></td>
  </tr>
</table>

shaya4207 8 Junior Poster

15 Years Ago

If it works, then please post the thread as solved, so someone else looking for help can find it...

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jyotimagic 0 Newbie Poster · Answer 1 · 2011-02-03T09:53:14+00:00

jyotimagic 0 Newbie Poster

15 Years Ago

Looks like this works. Thanks!

Dearden 0 Newbie Poster · Answer 2 · 2011-02-05T06:44:33+00:00

I've noticed you've skipped the end

"<table width="492" border="1">
<tr>
<td width="203">Zen Shiatsu* 

$120
<img src="http://sedona.massagetherapy.com/bodywork_images/General_images/ABMP10_11.jpg" alt="" width="174" height="115" /></td>
<td width="89"> </td>
<td width="178"><table cellspacing="0" cellpadding="0">
--->here<--- (</tr>)
<tr>

jyotimagic 0 Newbie Poster · Answer 3 · 2011-02-06T05:24:01+00:00

Next time I checked the page, the text had jumped to the side of the tables again. I've tried re-doing it, in case there was any messy code making it do this, but even with starting over and putting

<p><br />
my text</p>
<p>&nbsp;</p>

between where one table finishes and the next one starts, the text still jumps. I guess it has something to do with the way the builder is set up, but I can't figure it out. To get around it, I put the text I needed inside a single row table. However, now I want to put links to a top anchor between each section as it's getting too long. Anyone else got some thoughts on this?

kaizerkiller 7 Newbie Poster · Answer 4 · 2011-05-10T08:25:00+00:00

Next time I checked the page, the text had jumped to the side of the tables again. I've tried re-doing it, in case there was any messy code making it do this, but even with starting over and putting
 
my text
&nbsp;
between where one table finishes and the next one starts, the text still jumps. I guess it has something to do with the way the builder is set up, but I can't figure it out. To get around it, I put the text I needed inside a single row table. However, now I want to put links to a top anchor between each section as it's getting too long. Anyone else got some thoughts on this?

Please try this:

<!--BEGIN 1ST ITEM-->
<table width="492" border="1">
  <tr>
    <td colspan="3"><a href="#">Your link here</a></td>
  </tr>
  <tr>
    <td width="203" valign="top"><strong>Zen Shiatsu*<br />
    </strong>
      <strong>$120</strong>
      <img src="http://sedona.massagetherapy.com/bodywork_images/General_images/ABMP10_11.jpg" alt="" width="174" height="115" /></td>
    <td width="56">&nbsp;</td>
    <td width="211"><table cellspacing="0" cellpadding="5">
      <tr>
        <td width="211" align="left" valign="middle"><p align="justify"><em><strong>Something different!</strong></em></p>
          <p align="justify">Stretching, finger and palm pressure to   balance and energize your meridians (energy channels). Experience a   state of deep relaxation, while feeling fully energized.</p>
          <p align="justify">Fully clothed session on a futon mat.</p>
          <p align="justify">(80 minutes)</p></td>
      </tr>
    </table></td>
  </tr>
</table>
<!--END 1ST ITEM-->

<p>-----------Any text----------</p>

<!--BEGIN 2ND ITEM-->
<table width="492" border="1">
  <tr>
    <td colspan="3"><a href="#">Your link here</a></td>
  </tr>
  <tr>
    <td width="203" valign="top"><strong>Zen Shiatsu*<br />
    </strong> <strong>$120</strong> <img src="http://sedona.massagetherapy.com/bodywork_images/General_images/ABMP10_11.jpg" alt="" width="174" height="115" /></td>
    <td width="56">&nbsp;</td>
    <td width="211"><table cellspacing="0" cellpadding="5">
      <tr>
        <td width="211" align="left" valign="middle"><p align="justify"><em><strong>Something different!</strong></em></p>
          <p align="justify">Stretching, finger and palm pressure to   balance and energize your meridians (energy channels). Experience a   state of deep relaxation, while feeling fully energized.</p>
          <p align="justify">Fully clothed session on a futon mat.</p>
          <p align="justify">(80 minutes)</p></td>
      </tr>
    </table></td>
  </tr>
</table>
<!--END 2ND ITEM-->

Just leave a reply if it is not what you want to happen, I'll be glad to help you out :)

And may I know hat software do you use in coding html?

jyotimagic 0 Newbie Poster · Answer 5 · 2011-05-10T08:46:42+00:00

Thanks, I'll give it a go. I don't know what the software is. I'm using a template/website package that comes with my massage association membership. They give some online help, but it hasn't been very useful in this instance.

Text below table appears to right of table

Dani AI

Recommended Answers Collapse Answers

All 7 Replies

Recommended Answers