I was wondering how people typically make certain columns widths of a table static while some are dynamic. For example, if I have a three column table and want the two outer columns to be 175 pixels in width while the center one scale according to the rest of the browser width, what is the standard method?<br />
<br />
On a related note, is a wildcard width (width="*") supported? I seem to recall reading somewhere that it was but can't seem to find any reference to it.<br />
<br />
Thanks<br />
Ken<!--content-->I'm not exactly sure what you are asking, try to be clearer, but lemme give you a quick tutorial of "width" in tables.<br />
--------------------------------------------------------<br />
WIDTH OF THE TABLE<br />
<br />
width="175"<br />
<!--A table's width is 175 pixels, and will be 175 no matter what--><br />
<br />
<br />
width="50%"<br />
<!--A table's width is 50% of the user's browser, therefore dependent on the client--><br />
<br />
WIDTH OF THE TABLE CELL <td><br />
<br />
width="175"<br />
<!--A table cell's width is 175 pixels, and will be 175 no matter what--><br />
<br />
<br />
width="50%"<br />
<!--A table cell's width is 50% of the user's browser, therefore dependent on the client--><br />
<br />
WIDTH OF THE TABLE CELL <colgroup> and <col><br />
<br />
<table border="1"><br />
<colgroup span="3"><br />
<col width="20"></col><br />
<col width="50"></col><br />
<col width="80"></col><br />
</colgroup><br />
<tr><br />
<td>1</td><br />
<td>2</td><br />
<td>3</td><br />
<td>4</td><br />
</tr><br />
</table><br />
<!--Cell one is 20 px, cell two is 50 px, cell three is 80 px,<br />
and those are the only ones specified. Any additional cells are freely determined<br />
by the client's browser. This is exemplified in the link below--><br />
<br />
<!-- m --><a class="postlink" href="http://www.w3schools.com/tags/tag_col.asp">http://www.w3schools.com/tags/tag_col.asp</a><!-- m --><br />
You may use % in the width as well.<br />
WHAT YOU ARE THINKING OF<br />
I know what you mean when you talk about the "*". I have only heard of it being used for frames, when specifying the size of frames within pages. * stands for the remaining. I have never seen that symbol used with tables. (by the way, the TD's width element is deprecated, if you care about validation at all)<br />
<br />
--------<br />
hope this helps<br />
--------<!--content-->I have a table with three columns and spans the entire width of the browser window (<table width="100%">).<br />
<br />
I want the outer two columns to have static widths while the center column dynamically adjusts:<br />
<td width="175">...</td><br />
<td width="???">...</td><br />
<td width="175">...</td><br />
<br />
What is the best way to do the above? I'm confused as the "???" cannot be a static numerical value and a percent doesn't make sense as the percentage changes depending on the width of the browser window.<!--content-->You want the column to adjust in relation to what? If you don't specify a width, then it will adjust to the width of the content. If you specify a percentage, it will adjust to the width of the browser.<!--content-->Hope u won't mind if I refer u to this thread (<!-- m --><a class="postlink" href="http://www.htmlforums.com/showthread.php?threadid=23608">http://www.htmlforums.com/showthread.php?threadid=23608</a><!-- m -->) as opposed to typing it out here. It deals with a three column layout where each columns content remains independant of the others. I posted there with a cross browser friendly method I'd recently used.<br />
<br />
In summary, yes. Specify the widths of your two outer columns and keep the middle column stretchy width="*". Hope it may be of some help.<!--content-->I don't think anyone has understood my question fully. I don't need a tutorial on tables as I already understand how to code them.<br />
<br />
As for what the center column adjusts relative to...well, if the table spans the entire width of the browser window and the other two columns are static, that would mean the middle column adjusts to fill the remaining width of the browser window.<br />
<br />
I want the center column to be as large as possible (depending on the width of the browser window). Using a static width obviously won't work. Using a percentage also doesn't make sense to me because the actual percent of the middle column changes depending on the width of the browser window.<br />
<br />
So my question is, what technique is the properly one to use? Should I just "wedge" open the outer two columns with a spacer.gif (using the desired width of the two outer columns) and then set the middle column to be 100%?<br />
<br />
Is width="*" even supported? It works but I don't think it is compliant with html standards.<!--content-->Originally posted by kjwan <br />
Is width="*" even supported? It works but I don't think it is compliant with html standards.<br />
<br />
Now I'm confused too, because I've just been reading an article at NetMechanic Making a wildcard column width (<!-- m --><a class="postlink" href="http://www.netmechanic.com/news/vol3/html_no3.htm">http://www.netmechanic.com/news/vol3/html_no3.htm</a><!-- m -->).<br />
<br />
But I've seen (width="*") used in table layouts by some very experienced coders. I've also seen it used in html reference books (in tables as well as frames), therefore I've used it several times and have to say I've never encountered problems. Also the code passes validation tests, w3c and wdg.<br />
<br />
But I'm intrigued now, what is the correct method to retain a stretchy column? I can't go for the transparent gif image thing as that isn't stretchy?<!--content-->i would say that if you have three columns, and you specify two - leaving one blank (the width attribute i mean) would be sufficient. just do the following:<br />
<br />
<br />
<table width="100%" border="1"><br />
<tr><br />
<td width="175">Cell one is 175 px</td><br />
<td>Cell two should be automatic</td><br />
<td width="175">Cell three is 175 px</td><br />
</tr><br />
<tr><br />
<td>No width attribute necessary</td><br />
<td>No width attribute necessary</td><br />
<td>No width attribute necessary</td><br />
</tr><br />
</table><br />
<br />
<br />
I put the above code on my website, so go to <!-- m --><a class="postlink" href="http://www.xdemi.com/temp/htmlforumhelp3.html">http://www.xdemi.com/temp/htmlforumhelp3.html</a><!-- m --> and hopefully i answered your question. if not please keep trying to clarify lol, sorry<!--content-->Thanks guys. Funny thing is I have this working properly on a few sites. However, I posted this question because I don't know if the method I used (width="*") is proper. With the link to webmechanic, I guess I have my answer!<br />
<br />
As for not defining a width for the middle column, I was hesitant to do that as that typically means "width of the content". However, if the table tag has a width of 100%, then I guess html should interpret this as "width of whatever is left over". But what about the problem of the old Netscape interpreting the width attribute to mean "minimum width"? Wouldn't this mess up the other two columns then?<br />
<br />
Why would something so theoretically easy be so damned difficult in practice? LOL!<!--content-->BTW. How do I change my status from novice (Level 1) to something else? I'm not a novice html coder!<!--content-->I've just turned up this thread (<!-- m --><a class="postlink" href="http://www.htmlforums.com/showthread.php?threadid=10425&highlight=wildcard+width">http://www.htmlforums.com/showthread.ph ... card+width</a><!-- m -->) answered by the great Doc Web. I reckon it's just down to your preferred method and cross browser friendliness, either width="*" or no width specified and let it flow to the content. As u say the main table itself is set to width="100%". Although width is deprecated in favour of css, I've seen width="*" used many times by experienced coders, and it validates (transitional).<br />
<br />
As for changing your status thing - U don't! It changes according to post count. I'm obviously not the only one to think that a little odd?
<!--content-->Level # = ((# of posts)/10 rounded up)*10<br />
Level name corresponds with level #<br />
<br />
so i guess it really doesn't tell how good you are at html. it just tells how good you are at posting.<!--content-->well the above is true for the first several levels then it get weird<!--content-->
<br />
On a related note, is a wildcard width (width="*") supported? I seem to recall reading somewhere that it was but can't seem to find any reference to it.<br />
<br />
Thanks<br />
Ken<!--content-->I'm not exactly sure what you are asking, try to be clearer, but lemme give you a quick tutorial of "width" in tables.<br />
--------------------------------------------------------<br />
WIDTH OF THE TABLE<br />
<br />
width="175"<br />
<!--A table's width is 175 pixels, and will be 175 no matter what--><br />
<br />
<br />
width="50%"<br />
<!--A table's width is 50% of the user's browser, therefore dependent on the client--><br />
<br />
WIDTH OF THE TABLE CELL <td><br />
<br />
width="175"<br />
<!--A table cell's width is 175 pixels, and will be 175 no matter what--><br />
<br />
<br />
width="50%"<br />
<!--A table cell's width is 50% of the user's browser, therefore dependent on the client--><br />
<br />
WIDTH OF THE TABLE CELL <colgroup> and <col><br />
<br />
<table border="1"><br />
<colgroup span="3"><br />
<col width="20"></col><br />
<col width="50"></col><br />
<col width="80"></col><br />
</colgroup><br />
<tr><br />
<td>1</td><br />
<td>2</td><br />
<td>3</td><br />
<td>4</td><br />
</tr><br />
</table><br />
<!--Cell one is 20 px, cell two is 50 px, cell three is 80 px,<br />
and those are the only ones specified. Any additional cells are freely determined<br />
by the client's browser. This is exemplified in the link below--><br />
<br />
<!-- m --><a class="postlink" href="http://www.w3schools.com/tags/tag_col.asp">http://www.w3schools.com/tags/tag_col.asp</a><!-- m --><br />
You may use % in the width as well.<br />
WHAT YOU ARE THINKING OF<br />
I know what you mean when you talk about the "*". I have only heard of it being used for frames, when specifying the size of frames within pages. * stands for the remaining. I have never seen that symbol used with tables. (by the way, the TD's width element is deprecated, if you care about validation at all)<br />
<br />
--------<br />
hope this helps<br />
--------<!--content-->I have a table with three columns and spans the entire width of the browser window (<table width="100%">).<br />
<br />
I want the outer two columns to have static widths while the center column dynamically adjusts:<br />
<td width="175">...</td><br />
<td width="???">...</td><br />
<td width="175">...</td><br />
<br />
What is the best way to do the above? I'm confused as the "???" cannot be a static numerical value and a percent doesn't make sense as the percentage changes depending on the width of the browser window.<!--content-->You want the column to adjust in relation to what? If you don't specify a width, then it will adjust to the width of the content. If you specify a percentage, it will adjust to the width of the browser.<!--content-->Hope u won't mind if I refer u to this thread (<!-- m --><a class="postlink" href="http://www.htmlforums.com/showthread.php?threadid=23608">http://www.htmlforums.com/showthread.php?threadid=23608</a><!-- m -->) as opposed to typing it out here. It deals with a three column layout where each columns content remains independant of the others. I posted there with a cross browser friendly method I'd recently used.<br />
<br />
In summary, yes. Specify the widths of your two outer columns and keep the middle column stretchy width="*". Hope it may be of some help.<!--content-->I don't think anyone has understood my question fully. I don't need a tutorial on tables as I already understand how to code them.<br />
<br />
As for what the center column adjusts relative to...well, if the table spans the entire width of the browser window and the other two columns are static, that would mean the middle column adjusts to fill the remaining width of the browser window.<br />
<br />
I want the center column to be as large as possible (depending on the width of the browser window). Using a static width obviously won't work. Using a percentage also doesn't make sense to me because the actual percent of the middle column changes depending on the width of the browser window.<br />
<br />
So my question is, what technique is the properly one to use? Should I just "wedge" open the outer two columns with a spacer.gif (using the desired width of the two outer columns) and then set the middle column to be 100%?<br />
<br />
Is width="*" even supported? It works but I don't think it is compliant with html standards.<!--content-->Originally posted by kjwan <br />
Is width="*" even supported? It works but I don't think it is compliant with html standards.<br />
<br />
Now I'm confused too, because I've just been reading an article at NetMechanic Making a wildcard column width (<!-- m --><a class="postlink" href="http://www.netmechanic.com/news/vol3/html_no3.htm">http://www.netmechanic.com/news/vol3/html_no3.htm</a><!-- m -->).<br />
<br />
But I've seen (width="*") used in table layouts by some very experienced coders. I've also seen it used in html reference books (in tables as well as frames), therefore I've used it several times and have to say I've never encountered problems. Also the code passes validation tests, w3c and wdg.<br />
<br />
But I'm intrigued now, what is the correct method to retain a stretchy column? I can't go for the transparent gif image thing as that isn't stretchy?<!--content-->i would say that if you have three columns, and you specify two - leaving one blank (the width attribute i mean) would be sufficient. just do the following:<br />
<br />
<br />
<table width="100%" border="1"><br />
<tr><br />
<td width="175">Cell one is 175 px</td><br />
<td>Cell two should be automatic</td><br />
<td width="175">Cell three is 175 px</td><br />
</tr><br />
<tr><br />
<td>No width attribute necessary</td><br />
<td>No width attribute necessary</td><br />
<td>No width attribute necessary</td><br />
</tr><br />
</table><br />
<br />
<br />
I put the above code on my website, so go to <!-- m --><a class="postlink" href="http://www.xdemi.com/temp/htmlforumhelp3.html">http://www.xdemi.com/temp/htmlforumhelp3.html</a><!-- m --> and hopefully i answered your question. if not please keep trying to clarify lol, sorry<!--content-->Thanks guys. Funny thing is I have this working properly on a few sites. However, I posted this question because I don't know if the method I used (width="*") is proper. With the link to webmechanic, I guess I have my answer!<br />
<br />
As for not defining a width for the middle column, I was hesitant to do that as that typically means "width of the content". However, if the table tag has a width of 100%, then I guess html should interpret this as "width of whatever is left over". But what about the problem of the old Netscape interpreting the width attribute to mean "minimum width"? Wouldn't this mess up the other two columns then?<br />
<br />
Why would something so theoretically easy be so damned difficult in practice? LOL!<!--content-->BTW. How do I change my status from novice (Level 1) to something else? I'm not a novice html coder!<!--content-->I've just turned up this thread (<!-- m --><a class="postlink" href="http://www.htmlforums.com/showthread.php?threadid=10425&highlight=wildcard+width">http://www.htmlforums.com/showthread.ph ... card+width</a><!-- m -->) answered by the great Doc Web. I reckon it's just down to your preferred method and cross browser friendliness, either width="*" or no width specified and let it flow to the content. As u say the main table itself is set to width="100%". Although width is deprecated in favour of css, I've seen width="*" used many times by experienced coders, and it validates (transitional).<br />
<br />
As for changing your status thing - U don't! It changes according to post count. I'm obviously not the only one to think that a little odd?
<!--content-->Level # = ((# of posts)/10 rounded up)*10<br />Level name corresponds with level #<br />
<br />
so i guess it really doesn't tell how good you are at html. it just tells how good you are at posting.<!--content-->well the above is true for the first several levels then it get weird<!--content-->