Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    197
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Set a table columns width

    Hi,

    I tried to do it by adjusting the <td> width:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Sample Page</title>
    <style type="text/css">
    div {width:100%; overflow:auto;}
    table, td {border:1px solid #000;}
    td {width:1000px;}
    </style>
    </head>
    <body>
    <div>
    <table>
    <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
    </tr>
    <tr>
    <td>Forth cell</td>
    <td>Fifth cell</td>
    <td>Sixth cell</td>
    </tr>
    </table>
    </div>
    </body>
    </html>
    But it didn't work.

    Many thanks for any help!
    Mike
    Last edited by Rain Lover; 03-09-2012 at 06:10 PM.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Rain Lover View Post
    Hi,

    I tried to do it by adjusting the <td> width:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Sample Page</title>
    <style type="text/css">
    div {width:100%; overflow:auto;}
    table, td {border:1px solid #000;}
    td {width:1000px;}
    </style>
    </head>
    <body>
    <div>
    <table>
    <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
    </tr>
    <tr>
    <td>Forth cell</td>
    <td>Fifth cell</td>
    <td>Sixth cell</td>
    </tr>
    </table>
    </div>
    </body>
    </html>
    But it didn't work.

    Many thanks for any help!
    Mike
    That should have worked, provided you have 3000px or more of viewable page width in your browser. Note that you are giving that style to every <td> element in the page, so each column becomes 1000px wide.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Do you really need to use a table though?

    http://www.hotdesign.com/seybold/
    Teed

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,620
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Why do you need to set cell widths in your table? Usually it works best if you let the tabular data it contains select the appropriate width for each cell and just set the overall width allocated to the entire table.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by felgall View Post
    Why do you need to set cell widths in your table? Usually it works best if you let the tabular data it contains select the appropriate width for each cell and just set the overall width allocated to the entire table.
    I would say because the OP is not displaying tabular data, but designing a page layout with a table. Which is why I posted the link. lol Just my thought.
    Teed

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,620
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by teedoff View Post
    I would say because the OP is not displaying tabular data, but designing a page layout with a table. Which is why I posted the link. lol Just my thought.
    Some people do follow forum rules and search the forum to see if their question has already been answered before posting and some of them may have the same question as the OP but have actual tabular data and so are using the correct HTML around their content - rather than the wrong HTML as the OP appears to have.

    I was simply pointing out that where a table is appropriate to use that it is seldom appropriate to try to set individual column widths.

    In fact needing to set individual column widths is probably a good indicator that the content doesn't belong in a table (at least not an HTML table - you can always use a CSS table for layout provided you don't need to support IE7 and earlier that do not understand CSS tables)..
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by felgall View Post
    Some people do follow forum rules and search the forum to see if their question has already been answered before posting and some of them may have the same question as the OP but have actual tabular data and so are using the correct HTML around their content - rather than the wrong HTML as the OP appears to have.

    I was simply pointing out that where a table is appropriate to use that it is seldom appropriate to try to set individual column widths.

    In fact needing to set individual column widths is probably a good indicator that the content doesn't belong in a table (at least not an HTML table - you can always use a CSS table for layout provided you don't need to support IE7 and earlier that do not understand CSS tables)..
    Oh yes I agree...lol You always go out of the way to detail your answers. Much more than I try to do..lol I sometimes lack your patience..lol
    Teed

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by felgall View Post
    Some people do follow forum rules and search the forum to see if their question has already been answered before posting and some of them may have the same question as the OP but have actual tabular data and so are using the correct HTML around their content - rather than the wrong HTML as the OP appears to have.

    I was simply pointing out that where a table is appropriate to use that it is seldom appropriate to try to set individual column widths.

    In fact needing to set individual column widths is probably a good indicator that the content doesn't belong in a table (at least not an HTML table - you can always use a CSS table for layout provided you don't need to support IE7 and earlier that do not understand CSS tables)..
    Um, what? Says who?! Just because it's tabular data you believe that you generally aren't allowed to specify a style for a given column's width? Do you also have to use courier font and nothing but black borders?

    Seldom appropriate? Just WOW... Don't try so hard to be hard core!

    Don't get me wrong. I'm pretty sure the OP is going to be using tables in "poor adherence" to semantics (though we currently lack sufficient evidence to round up the lynch mob), but what you've written there is just balls-out crazy. You can style your page, including tabular data (rows, columns, fields, all of it), any which way you please.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,620
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by Rowsdower! View Post
    Just because it's tabular data you believe that you generally aren't allowed to specify a style for a given column's width?

    Seldom appropriate?
    Well yes you can set widths on the columns if you want to make the table harder to read. Generally if you let the table set the widths itself based on the width of the content it will make the table far more user friendly.

    It all depends on how you are trying to use CSS - to make the page appear exactly the way you want it to look regardless of how unfriendly that makes it for your visitors - or to make the page as easy to use for as many of your visitors as possible.

    In most cases where you do set widths on table columns and the table is actually readable the columns will be very close to the widths they would have been if you didn't bother to set widths. So you can speed up the loading of your page very slightly by discarding the widths or save yourself a few seconds of typing by not bothering to enter them in the first place. At the very least you should test the table with a range of typical data to see how it looks at a selection o0f different resolutions before deciding that you have one of the rare cases where the browser gets it wrong in setting appropriate column widths.

    In those cases where you do need to set column widths you should do so by attaching a class that specifies the required width to the appropriate <col> tag in the table - you wouldn't attach the width to a <td> tag as the one column may also contain <th> tags and there will definitely be more than one column that uses <td> tags.

    Here's an example table showing how to set column widths where you decide that doing so is appropriate (note that the style attributes ought to be replaced by classes that have those CSS properties attached but I have included them here to make it easier to see how they are applied). The example applies a width to the third of the four columns in the table because we have decided that the browser makes that column too wide because of content in a cell where there is actually space to wrap the content onto a new line.

    Code:
    <table summary="example table">
    <caption>example table</caption>
    <colgroup>
    <col style="background:#fcc;" />
    </colgroup>
    <colgroup>
    <col style="background:#ccc;">
    <col style="background:#ccc;width:100px;">
    <col style="background:#ccc;">
    </colgroup>
    <thead>
    <tr>
    <th>&nbsp;</th>
    <th scope="col">Col 1</th>
    <th scope="col">Col 2</th>
    <th scope="col">Col 3</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
    <td>&nbsp;</td>
    <td>Foot 1</td>
    <td>Foot 2</td>
    <td>Foot 3</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
    <th scope="row">Row 1</th>
    <td>row 1, Col 1</td>
    <td colspan="2">row 1, Col 2 and 3</td>
    </tr>
    <tr>
    <th scope="row">Row 2</th>
    <td>row 2, Col 1</td>
    <td rowspan="2">row 2 and 3, Col 2</td>
    <td>row 2, Col 3</td>
    </tr>
    <tr>
    <th scope="row">Row 3</th>
    <td>row 3, Col 1</td>
    <td>row 3, Col 3</td>
    </tr>
    </tbody>
    </table>
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #10
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,620
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by Rowsdower! View Post
    Just because it's tabular data you believe that you generally aren't allowed to specify a style for a given column's width?

    Seldom appropriate?
    Well yes you can set widths on the columns if you want to make the table harder to read. Generally if you let the table set the widths itself based on the width of the content it will make the table far more user friendly.

    It all depends on how you are trying to use CSS - to make the page appear exactly the way you want it to look regardless of how unfriendly that makes it for your visitors - or to make the page as easy to use for as many of your visitors as possible.

    In most cases where you do set widths on table columns and the table is actually readable the columns will be very close to the widths they would have been if you didn't bother to set widths. So you can speed up the loading of your page very slightly by discarding the widths or save yourself a few seconds of typing by not bothering to enter them in the first place. At the very least you should test the table with a range of typical data to see how it looks at a selection of different resolutions before deciding that you have one of the rare cases where the browser gets it wrong in setting appropriate column widths.

    So I'll revise slightly what I said. It is NEVER appropriate to be trying to set column widths until after you have viewed the way that a table looks in several different browsers in different resolutions. You might then decide that one or more columns needs a width set. If you are trying to set a specific width on columns before actually viewing the table then it is almost certain that you are trying to misuse the table tag. If setting specific widths on the table regardless of the table content is important then a table is the wrong tag to be using.

    In those cases where you do need to set column widths you should do so by attaching a class that specifies the required width to the appropriate <col> tag in the table - you wouldn't attach the width to a <td> tag as the one column may also contain <th> tags and there will definitely be more than one column that uses <td> tags.

    Here's an example table showing how to set column widths where you decide that doing so is appropriate (note that the style attributes ought to be replaced by classes that have those CSS properties attached but I have included them here to make it easier to see how they are applied). The example applies a width to the third of the four columns in the table because we have decided that the browser makes that column too wide because of content in a cell where there is actually space to wrap the content onto a new line.

    Code:
    <table summary="example table">
    <caption>example table</caption>
    <colgroup>
    <col style="background:#fcc;" />
    </colgroup>
    <colgroup>
    <col style="background:#ccc;">
    <col style="background:#ccc;width:100px;">
    <col style="background:#ccc;">
    </colgroup>
    <thead>
    <tr>
    <th>&nbsp;</th>
    <th scope="col">Col 1</th>
    <th scope="col">Col 2</th>
    <th scope="col">Col 3</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
    <td>&nbsp;</td>
    <td>Foot 1</td>
    <td>Foot 2</td>
    <td>Foot 3</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
    <th scope="row">Row 1</th>
    <td>row 1, Col 1</td>
    <td colspan="2">row 1, Col 2 and 3</td>
    </tr>
    <tr>
    <th scope="row">Row 2</th>
    <td>row 2, Col 1</td>
    <td rowspan="2">row 2 and 3, Col 2</td>
    <td>row 2, Col 3</td>
    </tr>
    <tr>
    <th scope="row">Row 3</th>
    <td>row 3, Col 1</td>
    <td>row 3, Col 3</td>
    </tr>
    </tbody>
    </table>
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #11
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Geez, ok...

    In those cases where you do need to set column widths you should do so by attaching a class that specifies the required width to the appropriate <col> tag in the table - you wouldn't attach the width to a <td> tag as the one column may also contain <th> tags and there will definitely be more than one column that uses <td> tags.
    First of all, you absolutely can have a table with only two columns. And one of those columns can certainly be made up entirely of <th> headings. That means that the other column in that table will have all of the <td> tags in the entire table to itself. This is more or less definitive of a least-case scenario for a table. You are being too narrow in your vision if you think you can honestly assert that no table will ever have fewer than two columns using <td> elements. That is objectively false. It is unrelated to the debate, but I had to comment on that piece.

    The microscopic potential difference in page size and loading times for column width adjustments are obvious red herrings. I won't spend time on them, either.

    If setting specific widths on the table regardless of the table content is important then a table is the wrong tag to be using.
    I would agree it's a bad idea conceptually to truly style with TOTAL DISREGARD to the table's planned content, but at no point would I agree with your conclusion that tables are "probably" no longer even semantic for tabular data if you have a need or a desire to control widths for one or more individual columns. You are saying a table of tabular data needs to be re-evaluated to see if it's still...tabular. And you're bold enough to then say that it "probably" loses its tabular semantics? If you're saying that there is even a small chance that it should become something else because of a style choice it's nonsense, but to call it probable is just pushing the bounds of good taste.

    CSS is presentational while HTML markup is for content. Again, these are objective facts. I concede there is some minor crossover in what each of them can do (namely the :after pseudoclass and inline CSS) but they are still entirely separate issues in the context of semantics. Note that I am not refuting best practices vis-a-vis use of CSS on colgroups, using classes, and the like in order to achieve column widths - with this, you would expand the argument out of context. I am refuting the idea you put forth that wanting to set a column width in the first place is de facto evidence of "probable" non-semantic table usage no matter what the content actually is - specifically including tabular data, if you do the math on it:

    I was simply pointing out that where a table is appropriate to use [1] that it is seldom appropriate to try to set individual column widths [2].

    In fact needing to set individual column widths is probably a good indicator that the content doesn't belong in a table [3]
    1. Tables are only appropriate to use with tabular data.
    2. It is seldom acceptable to set individual column widths with tabular data.
    3. Trying to set a column width is a good indicator that your tabular data does not belong in a table.

    This was the basis of your argument and it is wrong. The two are entirely unrelated. If the content is semantically tabular data then a table is what you use - period - no matter how much you adjust the size, colors, fonts, or literall ANYTHING else about the style. But you're saying, in actual effect, that setting a style on a table column "probably" changes the semantics of the content. This is the "crazy" part I was talking about.

    What you are saying here stands in contrast the notion of semantic markup that you are trying so hard to promote in the first place, which makes it all spectacularly ironic and impossible to defend.

    I am as much opposed to using tables for basic page layout as I imagine you are, but we simply don't have enough information to justify giving the lecture at this point. We must wait for confirmation of malfeasance before we pounce, and even then we must keep our arguments based on fact.

    To close, I stand by my earlier statement that styling page content does not change the semantic propriety of that content.

    You can style your page, including tabular data (rows, columns, fields, all of it), any which way you please.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,620
    Thanks
    0
    Thanked 645 Times in 635 Posts
    You have obviously misinterpreted what I was trying to say.

    Tabular data usually has an inherent size for each element of the data. That size is what should determine the widths of the columns in most cases and the end result will normally be close to the same whether you apply widths to the individual columns or not. That means it usually isn't necessary to think about columns widths when defining a table.

    Anyway my prior post contains an actual example that shows how to apply a width to a column in the table where required. The width gets applied to the <col> tag, it never gets applied to the <td> tag as a <td> does not define a column and all the cells in a column must be the same width regardless of whether they are <td> or <th> tags. So whether the column consists entirely of one tag or the other is irrelevant since you can't style the width of individual cells - that would make nonsense of the table structure as everything in a column MUST have the same width and everything in a row MUST have the same height in a table (or the equivalent if using colspan or rowspan).

    To be strictly accurate you could also apply a width to a <colgroup> tag if applying the same width to multiple columns in the table.

    If the table doesn't contain <col> tags then you need to add them if you want to style the columns. Styling columns (including applying widths to columns) is the reason why the <colgroup> and <col> tags exist.
    Last edited by felgall; 03-10-2012 at 01:43 AM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #13
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by felgall View Post
    You have obviously misinterpreted what I was trying to say.

    Tabular data usually has an inherent size for each element of the data. That size is what should determine the widths of the columns in most cases and the end result will normally be close to the same whether you apply widths to the individual columns or not. That means it usually isn't necessary to think about columns widths when defining a table.
    ^ Had you said that, I would not have had cause to disagree (at least not vocally). I would like to note that "not necessary" and "not appropriate" do not carry the same meaning. And up to now you had actually reinforced the "not appropriate" position rather than amend it. If there was a misinterpretation I'm not convinced that it was on my part.

    Quote Originally Posted by felgall View Post
    Anyway my prior post contains an actual example that shows how to apply a width to a column in the table where required. The width gets applied to the <col> tag, it never gets applied to the <td> tag as a <td> does not define a column and all the cells in a column must be the same width regardless of whether they are <td> or <th> tags. So whether the column consists entirely of one tag or the other is irrelevant since you can't style the width of individual cells - that would make nonsense of the table structure as everything in a column MUST have the same width and everything in a row MUST have the same height in a table (or the equivalent if using colspan or rowspan).

    To be strictly accurate you could also apply a width to a <colgroup> tag if applying the same width to multiple columns in the table.

    If the table doesn't contain <col> tags then you need to add them if you want to style the columns. Styling columns (including applying widths to columns) is the reason why the <colgroup> and <col> tags exist.
    Yes, I know, and this part of that "red herring" section I mentioned. That's exactly why I wrote this:
    Quote Originally Posted by Rowsdower! View Post
    It is unrelated to the debate, but I had to comment on that piece.
    and especially this:
    Quote Originally Posted by Rowsdower! View Post
    Note that I am not refuting best practices vis-a-vis use of CSS on colgroups, using classes, and the like in order to achieve column widths - with this, you would expand the argument out of context.
    Thankfully, however, I think at this point the debate has come to a close. We have come to an agreement on the issue.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •