[thelist] Text inside tables

Steve Lewis slewis at macrovista.net
Thu Jul 11 13:51:01 CDT 2002


carlos moreno wrote:


>  I need to put text and gifs inside TD's within a fixed width
 > table (in pixels 775 px.). When the total width of all elements
 > exceeds 775px  the table is "autoenlarged", but I want to the TD
 > not to behave so, and better continue in other line (sorry, but

 >     <TABLE WIDTH="775px" BORDER="0" CELLPADDING="0" CELLSPACING="0">
 >     <TR>
 >         <TD> column 1 <img src="....."> </TD>
 >         <TD> column 2 <img src="....."> </TD>

HTML Tables are not designed or intended to behave this way.  When you
use a <tr>...</tr> that designates one row, and the browser is supposed
to put all of the content between these elements in one row.

The way you have presented this, there is no way to predict the
displayed width of a column, so I see no way to accomplish this.  If you
were not numbering/labeling the columns, but instead simply needed to
have text and images layed out in a 775px wide display area, than I
would suggest you use CSS and <div>...</div> tags together to achieve
this.  This is achieved by making the mixedcell an inline element, which
means that it will wrap as if it was text.  The cellframe sets a fixed
size for the inline content to be layed out within.  The largest
potential problem you will have with this solution is that there is not
a fixed number of elements in each column.

My CSS is not highly developed so this solution may be substandard. I
don't do much layout work, spending more of my time on content
management. Perhaps someone on the list will supply an improved
recommendation.

In the stylesheet:

div.cellframe {
     width: 775px;
     /* other styling here */
}

div.mixedcell {
     display:inline;
     /* other styling here */
}


In the HTML:
<head>
...
     <link type="text/css" href="...">
</head>
...

<div class="cellframe">
     <div class="mixedcell"><img src="....."><br>caption</div>
     <div class="mixedcell"><img src="....."><br>caption</div>
     ...
</div>




More information about the thelist mailing list