How to Create a CSS Table

Complex CSS TableSometimes you will want to present non tabular information in a table format because you like the look of uniformity. The way to do this is to use divs in almost the same way you would do so for a table. The great thing about using a DIV/CSS table over a regular table is you have much more flexibility in manipulating the layout. For instance you might want every second row to have 3 columns of equal width compared to every other which 4 columns of equal width.

The code in this post will let you build the table pictured below. Taking this the next level will allow you to create the complex CSS tables used in loan results of the MortgageCorp Mortgage Calculator pictured left. I would recommend the CSS table over a regular table unless tabular data is being presented.
Continue reading

Advertisements

Center a website using CSS

Women working at the Portland Woolen Mills

You built a great website layout which is 960px wide, and you want to centre (center for EN-US) the website using CSS instead of the dreaded <center> tag. CSS makes this really simple.
Continue reading

Build a website using XHTML and not HTML

XHTML is the engine which drives the content which is displayed on the screen in it’s rawest form. Basically XHTML describes the sections of a screen. For instance <p>some text</p> tells the browser that some text is a new paragraph. XHTML is very simple and follows strict rules which help you update your website in the future.

XHTML is better than HTML as it limits the tags to only describing what the elements of the nage are and not describing how they should look. CSS should be used to describe how things look. There is no font, b, i and center tags which will save a lot of headaches when you want to update your site or move to another media like the iPhone. The font and center tags are very 1990’s and makes it extremely hard to update a site. For instance you might want to change site wide your font Gill Sans, with XHTML this is 3 lines in CSS compared to 1000’s of changes in HTML. You can have an in-depth read of the differences at http://www.w3.org/TR/xhtml1/
Continue reading