Share via

Feedback wanted - how do you set column widths in your HTML tables?

  • Article

My PM asked this question once in the forums but we did not get many replies - lets see how many we get in the blogs.

How do you set the width of your table columns in HTML tables? Do you:

  1. Set a width on one of the cells in the column and clear the width from all other cells.
  2. Set a width in all of the cells in the column.
  3. Use the <COL> tag.

To put it another way, what would you expect the designer to do if you grabbed the edge of a cell and started dragging? Would you expect:

  1. The cell you grabbed to have the new width written to it.
  2. The cell you grabbed to have the new width written to it, and all other cells in the column to have widths cleared.
  3. All cells in the same column as the cell you grabbed to have the new width written to them.
  4. A <COL> tag is generated for you if it is not there already, all cells in the column have widths cleared, and the <COL> has the new width written to it.
  5. Something else.

Feel free to express multiple preferences rather than pick one.

For example, my preference is to set the width on all cells (Option 2 in the first list), and I expect the editor to keep that or change tables to look like that when I edit them (Option 3 in the second list). Why do I set on all cells? Because I like the redundancy I suppose. But I know other people have other priorities, which is why I ask this question here.

Comments

  • Anonymous
    April 12, 2004
    The solution needs to be easily manageable from the designer perspective since it is going to possibly need to work with user generated mark-up. Personally, I would expect the designer to produce the solution for my mark-up that is equivalent to the original, but consumes the least amount of space. If you have a 500 row table, and a width on every TD, you are talking about some bloat. Using a more global solution ensures that later on the user will have an easier time changing the width (1 place), and that the size of the resulting mark-up will be as small as possible.
  • Anonymous
    April 12, 2004
    I use <col/>. It's just bloat to put the width on every column and serves no purpose since all column instances in a table are always the max width of any one column instance. Therefore, I no longer even see a purpose for width on <th/> or <td/> other than legacy.

    Just my 2ยข,
    Drew
  • Anonymous
    April 12, 2004
    I'd expect the editor be smart enough to conform to whatever I decided to use when I use the visual designer to change the width of the tables.

    If I haven't specified any method for setting the width, the editor can choose whatever method it deems necessary. I usually only set the width of the columns in my "header" row (note this isn't always defined by a TH or thead tag.)

    That's just me though, that's how I roll. Old school.
  • Anonymous
    April 12, 2004
    I like #2 of the 5 you list, but only because it's small and clean. Although I'd put it on the first cell rather than the grabbed cell, unless that would cause a problem.

    I do see your point in liking the redundancy, but I also find it visually cluttering when looking at the HTML.
  • Anonymous
    April 12, 2004
    I am already seeing some helpful comments. One thing to remember is that designers have to work in all scenarios. If there are no widths anywhere on the table, we need a default way to work.

    Justin made a good point about the 500 row table. There is no way I would put a width on every cell in that case. But then again, I would never have a static table that big.

    When you resize columns in Whidbey using the menus we give you a choice about how to set the width, or even give an option to clear all of the widths. When we get closer to the Beta I will write up a post on that.
  • Anonymous
    April 12, 2004
    I would choose the <COL/> one because of cleaner code.
  • Anonymous
    April 13, 2004
    I try to set table widths in CSS when possible, so the ability to have it recognize that there is a CSS declaration and then find it in the css file and change it their would be my preferred solution.
  • Anonymous
    April 13, 2004
    From designer point of view <col/> is only way to go of course but from programmer stand point all properties defined on element/object must have concrete meaning in runtime so all actions taken by browser behind the scene must be reflected in corresponding properties to preserve consistent progamming model.
  • Anonymous
    April 13, 2004
    If I need to set the widths of all the td's on a table I use CSS. I would give the tabel an ID and then use the cascade to find and set the td's

    i.e

    #tableNameID td
    {
    width: 100px
    }
    As dru mentioned it would be good if the designed updated the stylsheet accordingly.

    I also use CSS where possible set things like border, margins, table-collapse ect doing so will make my pages run faster.

    Use of <col/> would of course be correct also but then it comes down to browser support.
  • Anonymous
    May 03, 2004
    I usually set width on the FIRST row cells of the table in percent. I set it on all cells except one, that would take the space of 100% - sum of all other cells in a row automatically while rendering.

    It is when we speak about simple table. when it is more complicated, for example title row is static and content row has scroll I don't want to have any defaults there.

    Do not use <col> tag, developer didn't ask you in any way to use additional tags, ok ?

  • Anonymous
    May 03, 2004
    I usually set widths on the cells in the very first row of the table, but that's because I've been doing Web coding since the Netscape 3.0 / IE 3.0 days, and back then, that was the only thing that worked reliably. Nowadays, that's just habit on my part. The designer, IMO, should output <col> tags or CSS.

    BTW, if there's table-column-resizing support in the IDE, I hope there's some option I can use to turn it off! Sometimes I want to set those widths in HTML and not worry about a misplaced click wiping them out.
  • Anonymous
    July 03, 2004
    Hi
    I prefer to clear the other cells :)
  • Anonymous
    August 05, 2004
    I use col tags. There are a number of table rendering bugs that using col tags can avoid.