Eliminating tables: a tutorial on XHTML-compliant divs with CSS for people who are used to table-based website layouts

Requirements: HTML (basic understanding), JavaScript (basic understanding), CSS (basic understanding)

What is a table?

If you’ve been making HTML sites for a while, you should be familiar with the concept of tables. Tables are a method of displaying content in a row-by-column fashion. Tables were developed initially to display data in, well, a table form. They soon, however, became a popular method of laying out websites. Web developers would cut up their websites into rows and columns and, using a combination background images and other styling techniques, generate a website layout. Although this technique technically works fine, using tables for your web layout leads to many problems. The problem is, many web developers are too addicted or too used to using tables and they therefore find it hard to stop using them. . Don’t get me wrong – tables are still good for displaying data! The problem is that they are terrible for website layouts. Therefore, I am going to teach you how to replace tables with divs and CSS.

Why should I use divs instead of tables?

Tables may display your content fine, but code-wise they are messy and the way a browser interprets them is a disaster. Firstly, tables use up a lot more bandwidth and take longer to load then divs. The reason for this is threefold. First, there is a lot more text code in a table to load. But that’s not really a big deal for a normal website as it only increases load times by a few milliseconds. The real problem with page load times comes from HTTP requests on graphics. You see, when you lay out a website with tables, you have to slice up your layout and images into rows and columns. This means that instead of just loading each element’s image up in one HTTP request, you are sending a new request for each slice of image. Additionally, browsers often load each table cell completely before actually displaying the content, which increases rendering time substantially. All this increases load times and bandwidth usage from your server. Divs, on the other hand can be laid out logically based on what each element actually is and what content you need. Divs also use incremental rendering, which displays content as it loads. (This speeds up loading times!)

Another reason why tables are a nightmare is that redesigning or customizing your layout becomes a disaster. Remember: with tables you’ve cut out your website into rows and columns. If you want to change the layout a bit, you have to completely start from scratch and re-cut your entire website. If you are using CSS with your website, (which you should be considering it’s the XHTML-compliant method) it’s much easier to work with divs. Tables prevent certain properties of layouts from working properly within them. For example, you can’t use percentage height on your table cell or select all the text in a cell in certain situations. Browsers just generally don’t work well with tables. Many browsers and software programs (especially ones for accessibility like screen readers) glitch up when trying to understand and render tables. This is because tables don’t allow for the normal left-to-right, top-to-bottom format. This also hurts search engine optimization as the search engine robots will read your website completely wrong! Tables are also much less flexible as compared to divs.

The most annoying part of tables is that they are messy! Looking through table code gives people headaches, and it’s so easy to completely mess up your entire layout with one misplaced character. However, the most important thing about using tables as layouts is that the method is not XHTML compliant. While HTML5 does support table layouts, the HTML5 specification strongly suggests not using them.

Getting rid of tables: the tutorial

What I’m going to do is teach you how to use divs and CSS to replace tables in your web design logic.

While with tables you are limited to a grid layout, with divs you can split your website up into related sections. “Div” literally means “division” – basically you are dividing your site up into sections. For example, you could have a div for your logo and banner, a div for your menu bar, a div for your content, and a div for your sidebar.

That’s a really simple example. In an actual website you’re likely to have a lot more divs. You’ll have special divs for pictures. You’ll have special divs for your Cool Facts section. You’ll have divs inside of divs. (If I see one “divception” comment I’m going to blow up.) You get the idea.

Setting up your webpage

Let’s work through an example to give you an idea of how divs work. Let’s start with your basic webpage backbone:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>A website with divs! </title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

</body>

</html>

Keep in mind that all our stylesheet information will be on a separate file called “style.css”, stored in the same directory. The line “<link href=”style.css” rel=”stylesheet” type=”text/css” />” makes this happen.

In the above picture we have 4 sections. This will be a very simple layout. Let’s start from the top down. First, we want to style the body. In “style.css”, we want to add the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {

background-color: #f3f3f3;

margin: 0px;

padding: 0px;

font-family: Arial, Helvetica, sans-serif;

color: #1a1a1a;

font-size:16px;

}

This styles the entire page with these rules. The background colour in this case is a light grey while the foreground color (or text color) is a dark grey. I’ve set the margin and padding to 0 so that there’s no space between the page’s content and the page’s border.

The header

We start with a div dedicated to the logo and banner. Let’s give this the name of “topbanner”. What we’re going to do is create what’s called a class. A class is basically a secion of CSS code that applies to whatever div you specify. In “style.css”, add the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.topbanner {

width: 100%;

background-color: #1a1a1a;

height: 100px;

color: #f3f3f3;

font-size:30pt;

font-weight:bold;

}

The period at the beginning of the word “topbanner” is very important – it tells your browser that you are defining a class. As you can see, we have a wide, versatile set off styling options available. If you’re using a web development IDE like Dreamweaver to code your site, you can see the vast plethora of options at your fingertips. 50% of those you probably won’t even ever use. Above, I’ve set the width to 100%. This is called a variable width, which means that it will be 100% of the browser window width. If I resize the window, the div will also resize. The height is a fixed height of 100px, which means that no matter how I resize my window the div will be 100 pixels high. I’ve also changed the font size and weight for aesthetic purposes.

Now let’s put this new class into action. In your HTML code, add a div with the class of “topbanner” wherever you want it on your page, like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>A website with divs! </title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="topbanner">Title</div>

</body>

</html>

I put the word “Title” in the div as the div’s content. You can put whatever you want, including an image. If you view your webite in the browser now, you should have a dark grey div with a big title stretching across the top! Yaaaay!

The navigation bar

By default, divs are set as block displays, which means that the browser sees it as a box with certain properties. The browser interprets this (unless you change the style) so that each div will by default be on a new line. Therefore, to start a div on the next line, we don’t have to do anythingmore. Just add a new div. Let’s make our navigation menu. Create a class called “navbar” in your “style.css”:

1
2
3
4
5
6
7
8
9
10
11
12
13
.navbar {

width: 100%;

background-color: #000000;

height: 30px;

color: #ffffff;

font-weight:bold;

}

Play around with it! Make it look like you want using the CSS properties. Then, add a new div after the banner div:

1
2
3
4
5
6
7
8
9
10
11
<div class="navbar">

<span>Menu:</span>

<a href="#">Menu Item 1</a>

<a href="#">Menu Item 2</a>

<a href="#">Menu Item 3</a>

</div>

If you run it now, you see an ugly layout where the nav bar items are all squished together. Also, the links are the default (ugly) style. No problem! With CSS we can edit elements of a particular class. For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.navbar a:link, .navbar a:active, .navbar a:visited {

color: #ffffff;

margin-right: 10px;

font-weight:bold;

text-decoration:none;

}

.navbar a:hover {

text-decoration:underline;

}

.navbar span {

color: #cccccc;

margin-right: 10px;

font-weight:bold;

}

With this, we are editing all the link elements (“a” because a link is coded by the <a href=url> tag) and the spans inside of the “navbar” class. We are giving them margins and different colors. If you view the webpage now, you’ll see it’s become much more attractive!

By now you should be getting an idea of how divs and CSS classes work.

The sidebar and the content

Putting the sidebar next to the page’s content poses a small problem: you can’t have two divs in the same row by default. Now, don’t go running back to your tables just yet! There’s an easy way to make inline divs possible. First, you should remember that divs are by default “block” elements. This means that you can customize the vertical and horizontal size of the element however you want. But blocks are not inline. For that, there’s a simple solution. Instead of displaying it as a block, display it as an inline-block. It literally just gives you a div which can be used inline with another. So, in your CSS, add the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.sidebar {

display:inline-block;

width: 25%;

float: left;

min-height: 200px;

background-color: #444444;

color: #000000;

}

.content {

display:inline-block;

width: 75%;

min-height: 200px;

background-color: #222222;

color: #ffffff;

}

I styled it so that the sidebar is 25% of the width, the content is always 200 pixels high, and the divs have different colors. I added float:left to the sidebar div, which acts like align:left does on an image.

Now, add the following to your HTML after the navbar div to add the two divs:

1
2
3
<div class="sidebar">Sidebar</div>

<div class="content">Content</div>

Voila! You have your webpage all laid out like you wanted!

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • Reddit
  • StumbleUpon
  • Digg
  • Email
  • RSS

June 17, 2012 at 4:20 pm | Posted in: Tutorials, Web Design | 1 comment

One response to “Eliminating tables: a tutorial on XHTML-compliant divs with CSS for people who are used to table-based website layouts”

  1. Michael says:

    Excellent items from you, man. I have take note your stuff prior to and you are just extremely magnificent.
    I really like what you have received here, certainly like what you’re saying and the way during which you say it. You make it enjoyable and you continue to take care of to stay it wise. I cant wait to learn far more from you. This is really a wonderful website.

Leave a Reply

Your email address will not be published. Required fields are marked *