width="100" width in pixels
width="20%" width in percentage
width="2*" relative width indicating that the cell should be twice as wide as a regular cell. This relative sizing doesn't work in IE or Opera so I'd likely avoid it.

Also good to note is that using a percentage or relative width in IE expands the overall table to 100%, whereas in the versions of Mozilla and Opera that I tested in, it collapsed to the smallest area required to fill the cells — the expected behaviour.

In Part 2, we'll look to give this table a little more style using CSS.



There's another facet to creating your table structure that I haven't touched on here and that is accessibility. This is definitely a topic that needs to be covered on its own. Be sure to check out Table rendering by non-visual user agents and Tablin, a table linearization tool.

For More Information:

Browsers tested:

Update: It seems someone took the time to translate this into Russian. Many thanks!

Published June 08, 2004 · Updated September 17, 2005
Categorized as HTML and CSS
Short URL: http://www.avmdanse.com/s/164


8 Comments · RSS feed
Eugene T.S. Wong said on August 02, 2004

I noticed that you said that relative sizing doesn't work in Opera, then you said that "it collapsed to the smallest area required to fill the cells $this->normalizeEntities16bit("8212") the expected behaviour.". What is "it"? Percentage?

Eugene T.S. Wong

Jonathan Snook said on August 02, 2004

To clarify, specifying a width (of any length) in Mozilla or Opera will not expand the width of the table to 100% of its container like it does in IE.

Relative widths (using the asterisk notation) is not supported in Opera.

akella said on August 04, 2004

to Update.
I'm glad you thanks for the translation.Your article is one of the best on this subject.I added some examples to first part(Visitors askes me for that).
I'll be happy if you find them useful.
Second one will go soon.

Susanna said on September 12, 2005

I'm glad I found your page. I tried using HTML to set alignment for a column instead of CSS. It made no difference in IE - worked either way. But it still doesn't work in Mozilla, not even Moz 1.7 which supposedly supports HTML columns.

charm said on November 18, 2005

wow this page is so innovative!

Mike Smullin said on June 01, 2006

Very nice. Thanks for clearing this up with a few simple examples.

[..] Currently you can only achieve this effect in all browsers with tables--but it's different now in XHTML 1.0 Strict than it was in HTML 4.01 Traditional. [..]

Mag said on August 29, 2006

We will appreciate more examples.

Zeley Iu said on February 27, 2007

Green peace, blue sky

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.