2 Must-Know HTML Table Colum Features Any Webdeveloper Should Be Aware Of

I was reading up on the good old HTML specification and discovered a feature I had always wanted — and it’s already there:
Creating widths of columns that will work like percentages, but will also pay attention to any small, fixed-width columns.

Take a look at HTML’s proportional widths and amount alignment features.

Look at this from HTML specification of <COL> elements:

Authors may specify column widths in three ways:

A fixed width specification is given in pixels (e.g., width=”30″). A fixed-width specification enables incremental rendering.
A percentage specification (e.g., width=”20%”) is based on the percentage of the horizontal space available to the table (between the current left and right margins, including floats). Note that this space does not depend on the table itself, and thus percentage specifications enable incremental rendering.
Proportional specifications (e.g., width=”3*”) refer to portions of the horizontal space required by a table. If the table width is given a fixed value via the width attribute of the TABLE element, user agents may render the table incrementally even with proportional columns.However, if the table does not have a fixed width, user agents must receive all table data before they can determine the horizontal space required by the table. Only then may this space be allotted to proportional columns.

Proportional widths! Nice. This means that you can create tables like this example (i have swapped the original HTML4 style to lowercase XHTML):

Once the (visual) user agent has received the table’s data: the available horizontal space will be alloted by the user agent as follows: First the user agent will allot 30 pixels to columns one and two. Then, the minimal space required for the third column will be reserved. The remaining horizontal space will be divided into six equal portions (since 2* + 1* + 3* = 6 portions). Column four (2*) will receive two of these portions, column five (1*) will receive one, and column six (3*) will receive three.

  <col width="30"/>
  <col width="30"/>
  <col width="0*"/>
  <col width="2*"/>
<colgroup align="center">
  <col width="1*"/>
  <col width="3*" align="char" char=":"/>
<tr><td> ...

This leaves me with one big question: How is browser support for <col width=”2*”> ????

BONUS: Did you notice the little align feature ‘align=”char” char=”:” ‘ so that you can correctly align your decimal amounts? I was not aware of that either!

More info in W3C’s HTML4 specification “Calculating the widths of columns

18 Responses to “2 Must-Know HTML Table Colum Features Any Webdeveloper Should Be Aware Of”

  1. Chris Says:

    As far as I know no browser supports align=”char” — do you have other information?

  2. Keegan Says:

    I’ve never used this before but I want to try it very soon. Thank you for the post

  3. free ringback tones Says:

    im need this tutorial thankss!!!

  4. Reverse Cell Phones Says:

    Proporational is new to me. I will have to use next time it makes sense.

  5. Maneesh Bhati Says:

    I like ur stuff on the HTML. I have to use it and then see what happens. Thanks for the info.

  6. Consumer forum Says:

    Learning HTML is not so easy, but i am very confident that going through your post will help many people to know how easy it is. You have very well explained all the elements beautifully.

  7. Toppy Says:

    This is a great find. I’d guess the reason its not more widely known is compatibility issues. Any update on your findings about that?

  8. Angeline @ marcus evans scam Says:

    I’m nt aware of the Browser support for column 2*. If you get to know please share with us.

    Angeline @ marcus evans scam

  9. Rusli Zainal sang Visioner Says:

    ops lose comment
    thank a lot of information. may be useful. continue to increase the quantity and quality of your writing. the more qualified you are writing all the more delighted visitors to come back to visit. success always for you.

    rusli zainal sang visioner

  10. Fashno Says:

    Hello, First of all thank you for Providing great information about the HTML. THis will surely help newbies who want to know about the HTMl, im basically a Web Designing student, So i always do google searchs for the HTML tutorials, Etc and now found your site/blog and its GOOD

  11. SEO Workgroup Says:

    Thanks for sharing. I’ve never used this before but I want to try it very soon. Thank you for the post & the sharing on HTML.

  12. Anime Games Says:

    is this also applicable to HTML5, HTML 5.0 is not a big hit but you know that transition is also another consideration

  13. Figurine Says:

    Great information, written in a style everyone can understand. Thanks Jesper

  14. Internet Business Says:

    Interesting. Proportional is a new thing to me. Time to give it a try :) Thanks Jesper.

  15. dotskier Says:

    I’ve been using tables in the pages I’ve created but I’ve never used this. I’m having issues with using percentages before and I’ll try using proportional widths next time. Thanks for this!

  16. stevenkellaway@gmail.com Says:

    One question, does it work? Before I waste my time trying it out?
    Oops that was 2.

  17. Derek Dorian Says:

    i never heard this before
    though i am gonna cross broswer check before testing it

  18. Shaman PVP Says:

    I love the idea of proportional tables, but how well supported is this among the various browsers?