Saturday 26 March 2011

Tables Versus CSS

When i first encountered the subject of widths for tables in html4 i was dumbfounded and left to walk the streets of Melbourne in a drunken-like stupor.

Tables are a great tool for saying "now this table is going to go this many pixels this way and not a pixel more" and you would declare such a thing in your width= statement. But in HTML4, width does not mean maximum width. It means minimum width! And there goes your pretty design.

You can slam the breaks on this anarchistic restructuring of your previous designs by dropping your table inside a css div container and assigning that div an exact width. Transparent images of nothing can also hold the form of cells.

But once you get used to the idea of divs and the assigning of widths to them, you can easily use css to replace your old tables. There are a few approaches to this because you can assign percentages, pixels etc. as the basis for distance.

A smart way to start is to first  package the whole proposed table into a fixed width div and then just go about your business with exact height and width for each individual cell (div) there after. Some divs don't require size delineation but as you start to get the hang of positioning, you will work this out for your self. It helps to draw a picture of your table design first too. For example, Colspan=3 is as easy as declaring one div and putting three divs inside it's open and close tag.

No comments:

Post a Comment

Important Note:

Anyone is free to post links here but only if a back link to this site (or www.websiteadministrator.com.au) is added from your blog or website.