Link to home
Start Free TrialLog in
Avatar of AndyatLaw
AndyatLaw

asked on

How do I word wrap text in a table?

I'm trying to insert a table into the content section of this page: http://www.gametnet.com/brookline/newsletter.htm and no matter what I do, I cannot get the text to conform to the width of the table.  The text will not wrap, it just keeps expanding the width of the table.  What can I do?  I'm using FrontPage 2003.
Avatar of seanpowell
seanpowell
Flag of Canada image

Sorry Andy - I'm afraid the code that you have there is in pretty rough shape... because there's so many contradictions, the browser is having a difficult time figuring out how to display the information.

The only way to solve this is by correcting the code from the bottom up - Tabula Rasa so to speak - so here you go:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<HEAD>
<TITLE>Brookline Fire Protection District | Newsletter</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<br>
<TABLE WIDTH=720 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
  <TR>
    <TD ROWSPAN=2 background="images/subpage_01.gif" width="180" height="152" nowrap><a title="Home" href="index.htm"><img src="images/spacer1.gif" border="0" width="1" height="1"></a></TD>
    <TD width="540" nowrap><IMG SRC="images/index_02.gif" width=520 height=37 ALT=""></TD>
  </TR>
  <TR>
    <TD width="540" style="background-image: url('images/subpage_03.gif'); background-repeat: repeat;" height="115" valign="bottom">
    <font color="#FFFFFF" size="2" face="Times New Roman, Times, serif">
    <a id="wlink" title="Stations" href="stations.htm">Stations</a>&nbsp;&nbsp;<b>|</b>&nbsp;
    <a id="wlink" title="Administration" href="admin.htm">Administration</a>&nbsp;&nbsp;<b>|</b>&nbsp;
    <a id="wlink" title="Officers" href="officers.htm">Officers</a>&nbsp;&nbsp;<b>|</b>&nbsp;
    <a id="wlink" title="SOPs" href="sops.htm">SOPs</a>&nbsp;&nbsp;<b>|</b>&nbsp;
    <a id="wlink" title="Training" href="train.htm">Training</a>&nbsp;&nbsp;<b>|</b>&nbsp;
    <a id="wlink" title="Classes" href="classes.htm">Classes</a>&nbsp;&nbsp;<b>|</b>&nbsp;
    <a id="wlink" title="Photos" href="photos.htm">Photos</a>
    </font><br><br></TD>
  </TR>
</TABLE>
<TABLE WIDTH=720 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>  
  <TR>
    <TD ROWSPAN=4 bgcolor="#9C1420" nowrap width="29">&nbsp;</TD>
    <TD COLSPAN=2 bgcolor="#9C1420">&nbsp;</TD>
    <TD ROWSPAN=4 bgcolor="#9C1420" nowrap width="29">&nbsp;</TD>
  </TR>
  <TR>
    <TD><img src="images/tl.gif" width="30" height="30"></TD>
    <TD align="right"><img src="images/tr.gif" width="30" height="30"></TD>
  </TR>
  <TR>
    <TD COLSPAN=2>
    <div align="center"><font size="5"><img src="images/under27.gif" width="339" height="258"><br><br><br>
    Content Coming Soon!</font>
    </div>
    </TD>
  </TR>
  <TR>
    <TD COLSPAN=2>&nbsp;</TD>
  </TR>
  <TR>
    <TD COLSPAN=4><IMG SRC="images/subpage_15.gif" width=720 height=11 ALT=""></TD>
  </TR>
  <TR>
    <TD COLSPAN=4 align="center"><font size="3" face="Times New Roman, Times, serif"><br>
    <a title="Home" href="index.htm">Home</a> |
    <a title="Newsletter" href="newsletter.htm">Newsletter</a> |
    <a title="FAQ" href="faq.htm">FAQ</a> |
    <a title="Links"  href="links.htm">Links</a> |
    <a title="Site Map" href="map.htm">Site Map</a> |
    <a title="Contact Us" href="contact.htm">Contact Us</a></font><br></TD>
  </TR>
</TABLE>

<br><br>

<div align="center">

<!-- SiteSearch Google -->
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left"><font size="2">
    <FORM method=GET action="http://www.google.com/search">
    <INPUT TYPE=text name=q size=32 maxlength=255 value=""> <INPUT type=submit name=btnG VALUE=" Go! "><br>
    <input type=hidden name=domains value="http://www.brooklinefire.org">
    <input type=radio name=sitesearch value="">  Search Web
    <input type=radio name=sitesearch value="http://www.brooklinefire.org" checked> Search Site
    </FORM>
    </font></td>
  </tr>
</table>
<!-- SiteSearch Google -->

<p><font size="1">Web Site Design by <a title="Email Patrick" href="mailto:Patgamet@aol.com"><font color="#9C1420">Patrick Gamet</font></a> &copy; 2003. All Rights Reserved.</font></p>

</div>
<br><br>
</BODY>
</HTML>

If there's any errors, it's likely due to being unable to discern what your initial intent was. At any rate - this should also solve the problem in your original question :-)

Thanks,
Sean Powell
Avatar of AndyatLaw
AndyatLaw

ASKER

Thanks, Sean!  However the problem still persists.  I loaded the new code into FrontPage, inserted a table, and began typing text, but got the same result.  No matter how I adjust the properties of the table, it still expands as text is entered.  The text still will not wrap around to the next line.  In addition, previously the badge image in the top left of all the subpages had a transparent image overlaying it which linked back to the home page.  That is now gone.
You're probably referring to this:
<a title="Home" href="index.htm"><img src="images/spacer1.gif" border="0" width="1" height="1"></a>

It should read:

<a title="Home" href="index.htm"><img src="images/spacer1.gif" border="0" height="130" width="130"></a>

Also, set the width on the table you're inserting to a specific pixel width...

I'll get back to you shortly...
I set it to 150 px width, and it still does it.  This is buggin' the hell out of me.  Wish I could figure out the problem.
Actually, the whole white space there on the page where the content goes expands, which I'd like to prevent.
Is the page I recreated online at your site?
Okay - I see the problem... I had a hard time figuring out your intention with the sizes.

What would you like the overall width of the main red table to be?
I'd like the width to be just as it appears now, if possible.
Your initial table is actually set at 690 wide, but it contains an image set at 726, so I'll use that. A screenshot of your site confirms that it's displaying at 726.

Here's the adjusted code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<HEAD>
<TITLE>Brookline Fire Protection District | Newsletter</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css">
</HEAD>
<BODY BGCOLOR="#FFFFFF" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">
<br>
<TABLE WIDTH="726" BORDER="0" align="center" CELLPADDING="0" CELLSPACING="0">
  <TR>
    <TD ROWSPAN="2" background="images/subpage_01.gif" width="180" height="152" nowrap><a title="Home" href="index.htm"><img src="images/spacer1.gif" border="0" width="130" height="130"></a></TD>
    <TD width="546" nowrap><IMG SRC="images/index_02.gif" width="520" height="37" ALT=""></TD>
  </TR>
  <TR>
    <TD style="background-image: url('images/subpage_03.gif'); background-repeat: repeat" height="115" valign="bottom">
    <font color="#FFFFFF" size="2" face="Times New Roman, Times, serif">
    <a id="wlink" title="Stations" href="stations.htm">Stations</a>&nbsp;&nbsp;<b>|</b>&nbsp;
    <a id="wlink" title="Administration" href="admin.htm">Administration</a>&nbsp;&nbsp;<b>|</b>&nbsp;
    <a id="wlink" title="Officers" href="officers.htm">Officers</a>&nbsp;&nbsp;<b>|</b>&nbsp;
    <a id="wlink" title="SOPs" href="sops.htm">SOPs</a>&nbsp;&nbsp;<b>|</b>&nbsp;
    <a id="wlink" title="Training" href="train.htm">Training</a>&nbsp;&nbsp;<b>|</b>&nbsp;
    <a id="wlink" title="Classes" href="classes.htm">Classes</a>&nbsp;&nbsp;<b>|</b>&nbsp;
    <a id="wlink" title="Photos" href="photos.htm">Photos</a>
    </font><br><br></TD>
  </TR>
</TABLE>
<TABLE WIDTH="726" BORDER="0" align="center" CELLPADDING="0" CELLSPACING="0">  
  <TR>
    <TD bgcolor="#9C1420" nowrap width="46" rowspan="4">&nbsp;</TD>
    <TD COLSPAN="2" bgcolor="#9C1420" width="634">&nbsp;</TD>
    <TD bgcolor="#9C1420" nowrap width="46" rowspan="4">&nbsp;</TD>
  </TR>
  <TR>
    <TD><img src="images/tl.gif" width="30" height="30"></TD>
    <TD align="right"><img src="images/tr.gif" width="30" height="30"></TD>
  </TR>
  <TR>
    <TD COLSPAN="2" width="634" align="center">
   
    <!--
    Insert your table here - I'd probably set it to a maximum of 600 pixels wide to allow for some white space on either side... It will automatically center.
    //-->
   
    <font size="5"><img src="images/under27.gif" width="339" height="258"><br><br><br>
    Content Coming Soon!</font>
    </TD>
  </TR>
  <TR>
    <TD COLSPAN="2" width="634">&nbsp;</TD>
  </TR>
  <TR>
    <TD COLSPAN="4" width="726"><IMG SRC="images/subpage_15.gif" width="726" height="11" ALT=""></TD>
  </TR>
  <TR>
    <TD COLSPAN="4" width="726" align="center"><font size="3" face="Times New Roman, Times, serif"><br>
    <a title="Home" href="index.htm">Home</a> |
    <a title="Newsletter" href="newsletter.htm">Newsletter</a> |
    <a title="FAQ" href="faq.htm">FAQ</a> |
    <a title="Links"  href="links.htm">Links</a> |
    <a title="Site Map" href="map.htm">Site Map</a> |
    <a title="Contact Us" href="contact.htm">Contact Us</a></font><br></TD>
  </TR>
</TABLE>

<br><br>

<div align="center">

<!-- SiteSearch Google -->
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left"><font size="2">
    <FORM method=GET action="http://www.google.com/search">
    <INPUT TYPE=text name=q size=32 maxlength=255 value=""> <INPUT type=submit name=btnG VALUE=" Go! "><br>
    <input type=hidden name=domains value="http://www.brooklinefire.org">
    <input type=radio name=sitesearch value="">  Search Web
    <input type=radio name=sitesearch value="http://www.brooklinefire.org" checked> Search Site
    </FORM>
    </font></td>
  </tr>
</table>
<!-- SiteSearch Google -->

<p><font size="1">Web Site Design by <a title="Email Patrick" href="mailto:Patgamet@aol.com"><font color="#9C1420">Patrick Gamet</font></a> &copy; 2003. All Rights Reserved.</font></p>

</div>
<br><br>
</BODY>
</HTML>

Thanks
Sean, what am I missing here?  I open the new page in FrontPage (http://www.gametnet.com/brookline/finalnewsletter.htm), delete the content in the white area, and then insert a table with a fixed pixel width of 150 to test.  I begin typing text and the damn thing still expands.
I don't know. Are you putting spaces in between some of the letters?

If you type this, it has to expand because it can't wrap...

dalskdjasdlkajjeoiudalsjdiuewyhiwqdfhljasblajshdglfasdf
I'm an idiot, Sean.  I don't know why I was expecting it to wrap when holding a key down.  It works perfectly.  Thank you very much!
You're welcome - and don't be too harsh on yourself :-)

At least the page is set up correctly now - a good place to start from. And best of luck with the project.
I guess what I was wanting to do was copy the text in a word document and paste it into that space (or a table) without the table or the space expanding... in other words, the text would conform to the size of the table.
It will - as long as there's spaces in the text it won't go any wider than 600 if that's what the table is set at. But be careful about copying Word Document text directly into FrontPage - it can create a huge mess. You really need to paste it into a plain text editor like Notepad first, and then into FrontPage. You'll need to re-apply the formatting, but it's worth it in the long run.
Well, when I copy the contents of the newsletter (http://www.gametnet.com/brookline/responder.doc) from Word, paste into Notepad, and then reselect and copy and paste into the table on the page, it still expands.
There's a very long line in that document at the top...
These may also present a problem:
.......................................................

That Word doc is fairly complex - it may require a fair bit of coding to get it to format properly...
Once again, Sean, THANK YOU!
You're welcome! (And don't forget to close out the Q...)

Best of luck with your project :-)
ASKER CERTIFIED SOLUTION
Avatar of seanpowell
seanpowell
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial