written by:

If you’ve messed around with creating a web page, odds are you’ve used tables. Tables are a great way for someone who is new to web design to start laying out their HTML. I know that’s where I started. While they can get the job done, tables were not designed to be the backbone of web page layout. The table element is meant to be used for displaying tabular data (hence the name). Time to learn some CSS!

What is CSS?

CSS stands for “cascading style sheet.” Think of it like this . . . there are two main properties to your web page. On one hand you have the HTML. Your HTML is responsible for the content of your website and has NOTHING to do with the visual representation. On the other hand you have your CSS file which tells your web browser how to display the content. Check out csszengarden for an excellent visual representation of this idea. Here you can see the work of advanced web designers applying unique CSS files to one common HTML document. Notice how each example contains the exact same content, but is displayed in a vastly different manner through the use of CSS.

Separating content and design is extremely important. One of the most frustrating things on the web is waiting for a web site to load. If I’m browsing the web and find myself stuck loading a page, chances are I close the window and find someplace else to go. So if you want to drive traffic to your site, you want to make it load as quickly as possible. This is where using CSS really shines! Browsers are much quicker at applying CSS properties to an HTML document then reading through HUGE table layouts. CSS files are also cached (stored) on the user’s computer which means it only has to be downloaded once. So if your web site has more than one page that references the same CSS file, load time is almost instantaneous.

Using CSS also addresses the issue of getting listed in search engines. The cleaner and more organized your web page is, the easier it is for search-engines to read and rank your site. If you have completely identical sites, in terms of content, where one is designed using a bulky table-based layout and the other using CSS, search-engines can make a more educated guess as to what the CSS based web page is about, and thus will receive a higher ranking and more search traffic.

Switching over to CSS layouts is a very important step in website optimization. While it can be pretty intimidating at first, it is a giant leap in the right direction. I highly recommend checking out the web tutorials found at Lynda.com to get started. If you’re more advanced with CSS, alistapart.com is a great site to learn more about professional techniques and web standards.


6 thoughts on “Tables No More
  1. KRONiS says:

    This is an excellent post. I ‘grew up’ building pages with tables and I’m so happy to see them go away. I’ve been learning a lot lately about using style sheets instead of tables and it really makes things a lot easier when done that way from the start. Old habits die hard tho, I’m trying to avoid tables in all future pages!

  2. Edwin Rosero says:

    Great post Ryan! I came into the HTML scene post-tables and I glad I did. Thinking about those nasty tables makes my eye twitch,.

  3. Hey Ryan, welcome to the blog! Interesting post dude. Ive always found web programming interesting. Good insight and nice links. Also, Ed you better get some drops for that.

  4. Adria says:

    Ha ha…Isn’t CSS a girl band from Brazil? Though so. I was so disappointed when I read this. 🙂 Just joking, Ryan.

  5. Steve LeDant says:

    CSS is Counter-Strike Source, come on. 😉

  6. Vyrus says:

    Besides just the HTML “flat code” and CSS factors, i think one of the best things about being able to setup things like forms without the use of tables is that it makes the content in general SO much easier to manipulate using Java script. Ive written a few forms now that use this new layout system and its very refreshing in some cases to make a form that looks and lays out how you want and leave it un – styled 😉

Leave a Reply

Your email address will not be published.


Will Virtual Trade Shows Ever Hit it Big?

Hey Monolingual, You’re Cool!

An Apple a Day…
Become An Insider!

Thanks for signing up to be a Wpromote Insider.
You’ll be the first to get the scoop on our latest services, promotions and industry news.

Recent Posts
Meet The Employee: Brittany Stubbs
Honoring Women In Tech
  • Los Angeles HQ: 866.977.6668
  • Chicago: 310.529.4578
  • San Francisco: 310.683.0435