CSS Tutorial: Creating Tables within a Web Page with Cascading Style Sheets (CSS)

Tables are commonly used in HTML because they define the lay out of the web page. Instead of just having a heading and text that runs from left to right and top to bottom, we can have pages that have a block of text here, and another block of text over there, and so on. But the use of tables can be very complex and time consuming - and they aren't necessarily search engine friendly. So, instead of using tables, learn to use CSS classes and include the <div> tag where it is appropriate to do so in your HTML code.

Here is what we have so far:

Now, let's assume that we want to add a navigational menu on the left hand side of the page. Normally, using HTML, we would create this with the use of tables. But we don't have to do that with CSS. Let's say that we want to include the navigational menu, which will have four links and a green background.

The first thing we want to do is to set up a class. A class in CSS is a period followed by a codename for the class. In this example, we are going to set up a class called navigation, so, our code will look like this:

The class that we just added is in bold green in the sample above. Don't forget the period in front of the codename. Now, in this class, we have a left column with an absolute position. This means that the element will appear exactly and absolutely where we want it to appear, which in this case is 20px from the top of the page and 10 pixels from the left side. However, that isn't quite enough.

Now, in the HTML code, we have to specify where we want our navigation to appear. This is done by using the .leftcolumn code name we set up. Since we've set our position as absolute, the CSS will align it just as we specified.

The following code should be added to our HTML document:

Next, we need to place the codename into the HTML coding where we would like the CSS navigational menu to appear:

Here is how the HTML document will look:

Since we have created a left column, however, we must also create a right column. It's actually already there. That portion of the page where we want content. We just have to assign a class to it, as follows:

Previous	Next

  An Introduction to Cascading Style Sheets
  Creating a Basic HTML Page
  Embedding Cascading Style Sheets
  Using Cascading Style Sheets (CSS) to Specify Web Page Formatting
  Manipulating Bulleted and Numbered Lists with Cascading Style Sheets (CSS)
  Formatting Hyperlinks with Cascading Style Sheets (CSS)
  Creating Tables within a Web Page with Cascading Style Sheets (CSS)
  Cascading Style Sheets (CSS) Classes and ID's
  Cascading Style Sheet Codes Chart - Property Index