How to Use Cascading Style Sheets in Place of a Table

Incorporating tables is the most common form of controlling a layout. However, with the onset of Cascading Style Sheets (CSS), table-free layouts have become the design of the future. With CSS, it is assumed that you have knowledge of HTML. Read on to learn how to use cascading style sheets in place of a table.

Difficulty: Moderately Challenging

Instructions

Things You'll Need:

• Computer with Internet access

1. Set-up the design of your table. Identify all code and information that will be included in the table. But instead of using a table, use the following tag around your code:

   . These tags identify the divisions of your “table.”

2. Identify the different sections of the table. After determining the various components of your table, arrange the contents in the order you want visitors to view on the page. For each section, assign a distinct name using the following tag around the section code:

   Step 3

   Establish the positioning. At this stage, you are ready to input the data for your table. Each line of your program should start with "#content{specifications}."

3. View your table. After the positioning has been established, preview the layout. Decide whether to modify or keep the existing layout.

4. Make the necessary changes. If you are not satisfied with your layout, you can make adjustments at this stage. Reposition the attributes or modify the specifications.

Tips & Warnings

• When integrated with a technology lie CSS, the

  tag results in a Web page that is manageable and easy to manipulate. Compared to a table, using the

  tag lets you determine the divisions of your page in a methodical manner. Always ensure that each division has the necessary tag.
• When you have successfully completed the design using CSS, try it out on various browsers. Testing your design on other browsers will help you have an attractive page regardless of who is viewing it.
• The problem with a table layout using CSS is that there are still some HTML editors that do not recognize this new technology. If your browser is not a recent version, then you will find it hard to make your CSS-designed table functional. Work on upgrading your Web browser first to see the results of the layout that you have designed for your Web page.

[robgrant]

on 2/25/2008 Where are the instructions? You lead up to what to do, place a colon and leave the next line blank. What's the deal?