To Table or Not To Table? That Is The Question.

Imagine this scenario: you’ve decided you want a website, and you set out to code it completely from scratch (It certainly is possible–I’ve done it in the past–but with the great themes available these days, why bother?).

You know you want the header at the top, a sidebar or two, the content in the center, and a footer at the bottom. So you go out on the internet, trying to learn how to code HTML, and you come across the <table> element.

“Well, that seems easy,” you think. “I’ll just use a table for the layout of my website! After all, a website is just one big table, right?”

Erm… not so much.

When to Avoid ‘Em

When I began learning web development several years ago, I was taught that no web developer worth their salt would ever use <table> elements for the layout of their websites.

EVER.

You’re supposed to use <div> elements and CSS instead. I realize that I’m biased, of course, towards the way I was taught and the way I’ve always done things. There are a lot of websites that use <table> elements for layout, so there must be some argument for them, right?

I want to bring you guys the best information possible, even if I have to accept that the way I’ve always done things is wrong, so I ventured out into the internet to research the arguments for and against table-based layouts.

Holy cow. There’s practically a religious war going on over the use of <table> elements vs. <div> elements for layouts!

In my sleuthing, I’ve discovered a few things:

1. Most professional modern web developers use <div> elements for layout.
2. All the web developers I’ve spoken with, some of whom are professional front- and back-end web developers at some of the top internet companies in the world, insist that you should always use <div> elements for layout.
3. Most of the arguments boil down to this: if you don’t know CSS, <div> elements are a lot harder to use. But quite honestly, if you want a website and don’t want to learn CSS, you probably shouldn’t be the one coding your website.

So what makes <div> elements better than <table> elements for the layout of your webpage? Quite a few things, actually.

• If you look at the table for a website developed using <table> elements, you’ll see that there’s two to three times as many lines of code as the same website developed using <div> elements. This might not make much of a difference to those of us on high-speed internet when we’re looking at regular websites, but for those many, many people still on dial-up, websites that use <table> elements will take forever to load. It just makes more sense to use the method that is most efficient so you don’t automatically exclude potential customers.
• If you develop a website, you want the code to be easy to read and easy to edit. For you, first and foremost. If you ever have to go back and change something in your website (and believe me, you will), you’re going to want the code to be as easy as possible to read. With <div> elements, every <div> is essentially labeled (they all have ids or classes) so it’s easy to figure out what’s going on in your code. With <table> elements, especially once you start nesting tables to get the layout you need for your design, it can become very, very confusing. (CSS Zen Garden is a fairly good example of flexible coding. The HTML file is the same for every page there, but they each have a different CSS file, resulting in vastly different designs. It’s pretty interesting to look through to see the power of CSS.)

There is a single benefit to using <table> elements instead of <div> elements – vertical alignment. Using <div> elements, there is no way to vertically center elements in your layout. But with <table> elements, you can center things vertically. That single benefit from using <table> elements isn’t worth it for me, though. I’d rather have my <div> elements and just hack the vertical centering of elements.

So I’m going to tell you to use <div> elements for your website layout. Both because that’s what I always have and always will use, and because my research tells me that it’s the best option.

When to Use ‘Em

A lot of people nowadays are very familiar with the no-tables rule. But quite often, they assume it means no <table> elements ever. In reality, it’s completely logical to use <table> elements at the right time.

When you want a table, use the table element.

No, seriously! It makes perfect sense. After all, that’s what the element was intended for – to create <table> elements. <table> elements like this:

Don’t reinvent the wheel and spend hours or days trying to recreate an actual table using <div> elements and hoping everything will line up right. That’s just plain silly and a huge waste of your time.

Just remember any time you want an actual table in your website, use the darn <table> element. That’s what it’s there for.

Now That That’s Off The Table…

Next week, we’re getting hardcore. We’re going to look at PHP and get a very basic introduction to the language. You may not be ready to write the Google Algorithm by the end of it, but you’ll at least have a much better understanding of what all that PHP code in your WordPress theme means.

Remember: <div> elements for layout, <table> elements for <table> elements. Simple as that.