Wrapping thread around a table

Barnum · February 8, 2010, 1:03am

How do I wrap text around a table? The text I’ve entered is below and I want it to the right of the table?

ralphm · February 8, 2010, 2:17am

Sounds like you need to float the table.


table {float: left;}

See if that helps, and report back.

Barnum · February 9, 2010, 1:31am

That worked fine for the table, but then I realized that all the images on the same page were listed as follows:

<table class=“image” align=“center”>
<tr>
<td><img src=“images/trees.jpg” height=“400” width=“600” alt=“These trees surround what was once an old homesite”>
</td>
</tr>
<tr>
<td class=“caption”><center><b>These trees surround what was once an old homesite</b></center></td>
</tr>
</table>

As a result all the images were pushed to the left…??? Any suggestions on how to wrap text around the table, and yet keep the photos aligned as previously set. I used this code in order to have captions under the photos.

<center><h2><font color=“#8A360F”>*******

ralphm · February 9, 2010, 1:52am

The <center> element is really out of date. Anyway, you could try something like this:


td img {
  margin: 0 auto;
}

Not sure if that will work here, but that’s the normal way to center an element.

Barnum · February 9, 2010, 2:00am

Thanks for replyiing…unfortunately that didn’t do the trick.

ralphm · February 9, 2010, 2:13am

Yes, sorry, I just went away and tested it and noted that. Strange. Someone better at CSS might explain why it didn’t work.

Anyway, here’s a solution you could use if no better option comes up:

Wrap the image in <p> tags, like so


[COLOR="Red"]<p>[/COLOR]<img src="" height="400" width="600" alt="">[COLOR="Red"]</p>[/COLOR]

and apply this style:

td p {margin: 0; text-align: center}

Barnum · February 9, 2010, 2:28pm

This does not work either… Really stymied by this. Any help would be appreciated.

AutisticCuckoo · February 9, 2010, 2:33pm

That’s the normal way to centre a block-level element.

For inline elements (like img) you can use text-align:center instead.

ralphm · February 9, 2010, 2:38pm

Hmm, I tested that and it worked in Firefox. What browser are you viewing this in?

Yes, I realized that after posting. But when I tried text-align: center it didn’t work. Not sure what I was doing wrong. Does the behavior change inside a td? (I’ll try it again…)

Barnum · February 9, 2010, 2:47pm

Maybe I am not defining the problem correctly. When I used the float left notation in CSS the text indeed wrapped around the table fine, but I used the table definition for my photos on the page as well (in order to use captions). As a result the align right/left designations are negated, and all the photos now line up on the left side of the page. I want them alternating in the page. One on the right, next one on the left, next on the right, etc…

ralphm · February 9, 2010, 2:51pm

Sorry, you’ve lost me there. Do you have a link to the page, or can you post an image of the layout you want? I can’t picture what page layout you are shooting for. Sounds like there’s a better option than tables.

AutisticCuckoo · February 9, 2010, 2:53pm

Then give an ID to the table that you want the text to flow around, and alter the CSS rule to apply to that ID only.

<table id="special">...</table>

#special {float:left}

The deprecated align attribute is implemented as a CSS float in browsers.

Barnum · February 9, 2010, 3:01pm

This is how I have my photos on the page:

<table class=“image” align=“right”>
<tr>
<td><img src=“images/topo.jpg” height=“600” width=“400” alt=“Early Dallas Plat”>
</td>
</tr>
<tr>
<td class=“caption”><center><b>Early Dallas, Texas, plat</b></center></td>
</tr>
</table>

            The table with text is listed as follows:

<!-- start top of left section –>

<h4><center>Useful Links</center></h4>

<a href=“http://www.defunctparks.com”><center>Amusement Parks<center>
</center>
<p>

<a href=“http://www.ipl.org”><center>Online Library</a></font></center>
</p>

<a href=“http://www2.johnstown.k12.oh.us/cornell/states.html”><center>Old Schools</center></a></font></center>
</p><p>

<a href=“http://www.dmoz.org/Recreation/Scouting/Campsites/United_States/”><center>Scout Camps<center></a></font></center>
</p><p>

<a href=“http://www.over-land.com/westfort.html”>Old Forts</a></font>
</center>
</p><p>

<a href=“http://www.legendsofamerica.com/LA-Treasures.html”><center>Lost Treasure</center></a></font>
</center>
</p><p>

<a href=“http://www.ghosttowns.com”><center>Ghost Towns</center><a></font></center>
</p><p>

<a href=“http://fleausa.com/”><center>Flea Markets</center></a></font></center>

</p>

<!-- End Bottom of Left Section –></td>

</table>

How do I get the text to wrap about the text table, and still have the photos
aligned as noted? i.e., I want the align=“right”, align=“left”, to be valid. The float left notation shifts all the photos to the left. The last suggestion using <p> with photos does seem to do anything…?

Sorry I am not better with my questions…

Stomme_poes · February 9, 2010, 3:10pm

s’okay, Barnum… me, I’d want some ascii art because the code looks like a menu on the left and a bunch of photos-n-captions on the right, so I’m not sure which text is supposed to wrap which table.

Even something whipped up in Paint would show me what it’s supposed to look like.

Barnum · February 9, 2010, 3:15pm

When I entered the TEXT table, I could not get text to wrap around it. The PHOTO tables work fine, and the text wraps fine. Why is the text not wrapping around the TEXT table?

Barnum · February 9, 2010, 5:03pm

Solved my problem finally… Tried this and it works fine…

<table bgcolor=“#FEE8D6” border="10"border color=“black” align=“left”>
<tr>
<td>
<h3><center>A Few Useful Links</center></h3>
<br>

<b><a href=“http://www.defunctparks.com”><center>Amusement Parks<center></b>
<br>
<b><a href=“http://www2.johnstown.k12.oh.us/cornell/states.html”><center>Old Schools</center></a></font></center></b>
<br>
<b><a href=“http://www.ipl.org”><center>Online Library</a></font></center></b>
<br>
<b><a href=“http://memory.loc.gov/ammem/gmdhtml/gmdhome.html”><center>Maps</a></font></center></b>
<br>
<b><a href=“http://www.dmoz.org/Recreation/Scouting/Campsites/United_States/”><center>Scout Camps<center></a></font></center></b>
<br>
<b><a href=“http://www.legendsofamerica.com/LA-Treasures.html”><center>Lost Treasure</center></a></font></b>
<br>
<b><a href=“http://www.driveintheater.com/”><center>Old Drive Ins</a></font></center></b>
<br>
<a href=“http://www.ghosttowns.com”><b><center>Ghost Towns</center><a></font></center></b>
<br>
<a href=“http://fleausa.com/”><b><center>Flea Markets</center></b></a></font></center>
</td>
</tr>
</table>