Feedback wanted - how do you set column widths in your HTML tables?
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:
- Set a width on one of the cells in the column and clear the width from all other cells.
- Set a width in all of the cells in the column.
- 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:
- The cell you grabbed to have the new width written to it.
- The cell you grabbed to have the new width written to it, and all other cells in the column to have widths cleared.
- All cells in the same column as the cell you grabbed to have the new width written to them.
- 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.
- 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.