[dpham]

sorry if I sound like a markup nazi, but... the pricing table contains tabular with headers and should be treated as such. The columns should be table cells and not divs (all a sudden you no longer have to provide a width on the entire container and it could stretch to fit and used in any location). The header-class container should either be a th, or if you opt for a non-table element, then an actual header tag would be appropriate. Maybe an h6? The bold tag was a poor choice; either <strong> or <em> would be a better option.

As far as reusability goes, the id="pricing-table" should really have been a class.

[redmaniack]

Hey, I appreciate your thoughts.

Now, to "defend" myself...

I'm afraid that using a regular table wouldn't allowed me to create this pricing table as it looks now. Although this is called a "pricing table", I think using a table isn't recommended in this case as it is quite restrictive.

Also, I avoided using HTML5 elements like "header" because I didn't wanted to include an extra HTML5 shim (for older browsers) dependency.

Regarding using <b> versus <strong>, this could be a long discussion here :). I think <b> just fits in this case as I don't want to add any importance from a content or SEO perspective.

[lazerwalker]

As an argument for using HTML5 elements like 'header', the only older browsers that don't support them are IE 6/7/8, and the shim is < 5 lines of JS you can easily throw in a IE conditional comment block.

[estel]

Couldn't it also be thought of as a list? I'd usually implement something like this as an unordered list.