Best Practices

Cascading style sheets weren’t always an option for designing your web site. When the Internet first began to transition from the world of academia into a commercially viable tool, not much thought had been put into how information would be displayed. Creative designers recognized, though, they could make use of the limited markup options available to dramatically effect how the information on a web page was displayed.

Although tables were originally intended to display tabular data, creating a table with a border width of zero pixels allows you to position text and images in a controllable space. By nesting tables inside each other and specifying the alignment, padding, and other properties of a table cell, there’s almost no limit to how you can contain and position the information on a website.

What’s Wrong With Tables

The ability to control how information is presented via tables comes with a cost, though. The resulting HTML files get very large. They can take a very long time to download. Maybe your site comes up almost instantaneously over a broadband connection. What about over a dial-up connection? Maybe in suburban America the modem is quickly becoming a technological relic, but there are quite a few Internet users in other parts of the world who take their web through a 56 kb/sec tube. These are people who read and speak English; they are a potential market, and their numbers are growing every day.

We don’t have to look that far from home, though, to see file size becoming a real factor. I can look at web pages on my cell phone for the bargain price of one cent per kilobyte. At least that rate is a bargain if your average page is 2.5 kilobytes. I’m happy to navigate through several pages of your site. If you use nested tables, and the smallest page on your site is 35 kilobytes, I’m only going to check one or two pages before I head elsewhere.

Speaking of losing potential customers, how is your site presented to someone with a vision disability? When a blind person comes to your website and listens to their computer reading the content of your web page, what do they hear? If you use nested tables, they’ll probably hear bits and pieces of useful content broken up by trivial (but very detailed) descriptions of where blocks of information are positioned in relation to each other.

And what about the most forgotten visitors to your website? What do nested tables mean to the poor search engine “bots” that come to your site? Search engines want to provide relevant search results to the masses, and they are desperately hoping that your site will fit the bill. All they need to do is look at your content and determine what your page is about. Unfortunately, with nested tables your page is probably more presentational markup than actual content. Search engines know that the text inside an <h1> tag is very relevant to what your page is about. How important is:

 
<table border=”1” cellpadding=”3” cellspacing=”1” width=”100%”>
  <tr>
    <td align=”center” valign=”top”>
      <b>
        <font face=”Arial, Helvetica, sans serif” size=”+2”>
          What My Page Is Really About
        </font>
      </b>
    </td>
  </tr>
</table>
 

What’s Right With Tables

If tables create such problems, why do we even have them? Tables can be extremely useful for displaying certain types of information. Think about sites that let you compare the features of similar items. Let’s use hosting plans as an example. Each column represents a different hosting plan. Each row represents a different feature like storage capacity or monthly bandwidth. Including things in a table makes it very easy compare and contrast the information.

As much as it pains the purists of CSS standards to admit, there are even some layout challenges that are easier to solve with tables. The common layout of two different colored columns is almost comically simple to create with a single-row, two-cell table. It will look the same in every major browser. You can achieve the same effect with CSS, but it requires writing some extra code and jumping through a few hoops. Once you become familiar with style sheets, though, they are generally easier to use for layout than tables.

How Layout Should Be Handled

So what’s the “best practice” way to handle page layout? I suggest starting by writing the content of the page with just basic HTML. The title of the page should be in an <h1> tag. Subtitles should be in an <h2> tag. If the page is going to have a navigation bar, put those links in a <ul> tag. Don’t worry about how you want them to be displayed on the final page. We’ll get to that soon. Include the site logo and any other distinct images, but don’t worry about backgrounds. The goal is to completely separate content from presentational markup, so you shouldn’t be centering anything or changing borders.

Once you get all of the content on the page, you’ll have a pretty good idea of the order and emphasis that will be seen by search engines and text readers. Does it make sense? Make any changes before moving on.

Add a line like this within the <head> tag of your document:

<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

The mystyle.css file is the place to change how this page looks. Here you introduce color, size, positioning, and typography to implement the actual “design” of the page. You may find that you need to add extra <div> tags here and there in order to bring your design to the page. Go ahead. Sure it would be great to have a web site that didn’t need any “invisible” tags to effect the presentation, but it never seems to be very realistic. It’s still better than the lines upon lines of code you had with nested tables.