jump to navigation

WebDev: Tables are not layout controls May 21, 2015

Posted by geek-ish.com in Dev.

I spent a good bit of time trying to reverse a page that had its vertical and horizontal alignment being managed using divs such that when I tried to change some of the content, the entire page layout was altered. What the…  Who the…  Impossible! I’d have been DESTROYED for making a design choice like this! Wait a minute… this is my page.


I had this page designed like 7 years ago (pre-mobile, pre-tablet, etc.) when I was working on converting image files (PSD) to HTML and now remember having the divs implemented as methods for dealing with the PSD layers; but didn’t think much then about how adversely that design choice might affect other platforms.  I wanted a layout control method for handling the problem with divs aligning vertically & horizontally when the content changes.  As it is designed now, there are “box” classes that house each “cell’s” content and when a box’s content changes, all tangent boxes adjust too – in no ordered manner. To me, that’s an awful design choice.  I thought a table would force the alignment in an ordered, consistent manner, regardless of the content. In Windows development, there is a StackPanel control that can be tasked with managing those vertical & horizontal changes:  https://msdn.microsoft.com/en-us/library/ms752328(v=vs.110).aspx .  I thought a table would handle that alignment task just fine in HTML but wanted a more experienced implementation opinion. After some chatter with a bunch of 10+-years-in, experienced developers, I got their gist which was, “Use divs.” But I was still grr about that, until I found this:

“If your document needs to present tabular data, then the appropriate tag would be
. If you place navigation into a table however, then you’re misusing the intended purpose of the
element. In the second case, you’re not presenting tabular data — you’re (mis)using the
element to achieve a presentational goal.” 

Sep 16 ’08 at 18:31  Carl Camera

Tables are not layout controls.

Thank you!



No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: