Friday, October 12, 2007

Yeah I still use TABLEs. Wanna fight?

The use of the TABLE element in HTML has created more controversy than the Da Vinci Code and Rev. Al Sharpton combined. On one side are the guys who use tables for laying out everything in their sites. Bad form. On the other side are the fanatics who bash everyone who uses tables anywhere. Lunatics.

If you use Grid FX, you'll notice that I use tables in some situations where it may not seem necessary. For example, the elements for the pager (navigation buttons, "Page 1 of x", a text box) are in a table.



I didn't want to do this but I had no other choice.

I use tables to satisfy these requirements:
1. No explicit width/height necessary
2. Shrink wraps to width of contents
3. Vertically aligns content in the middle. [More Info]

Believe it or not, you can't achieve this with DIVs or SPANs. Divs cannot shrink wrap and do not verically align in the middle. There are tricks around that but they require explicit sizes. Because the Grid is a component, every little piece must be customizable. I can make no assumptions on size or I will be screwed. I also played around with the float attribute but was disappointed when it had some adverse effects on layout.

In FireFox, there is a way to do this with DIVs and a special display attribute. So instead of:
<table><tr><td style="vertical-align:middle">.... I can do <div style="display:table; vertical-align:middle">

But then I have more code to write. I am currently working on some FireFox enhancements and issues and will probably build this optimization in. However, it will give no real performance boost and will only serve to make the DOM a little cleaner. What would you do?

1 comment:

Unknown said...

W3C says:

"CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3."

It's a real shame.