How to Create Columns on Your Web Page

The easiest way for beginners to divide an HTML web page into columns is using tables.

This method of structuring pages in HTML is considered taboo by the HTML purists. Actually, most web designers still use the practice. It's just easier than trying to use divisions and CSS and getting the same appearance from browser to browser.

After you get grounded in HTML you can explore the wonders of tableless web pages. For now let's do it the easy way.

We're going to divide our web page into two columns. We need a 2 column table.
Here's the table code in it's most basic form: (comments in red)
<table> opening table tag <tr> Opening row tag - defines a row <td></td><td></td> 2 sets of open and close cell tags </tr> closing row tag </table> closing table tag

Notice you have an open and close table tag: <table></table>

We're creating a single row, two column table, so we have a row configured using an open and close row tag: <tr></tr>

We need to divide the single row into 2 columns or cells. to do that we use the cell tag which also includes an open and close tag: <td></td>

Each set of cell tags represents a column, so we need 2 sets:<td></td><td></td>

This is the code we'll use for our table. I used an ID attribute to give a name to each column. This will come in handy in our advanced lessons and when you're trying to find the proper cell in the code.
<table> <tr> <td id="left"></td><td id="right"></td> </tr> </table>

Open firstpage.html in your text editor.
Copy the code for the table and paste it in between the open and close body tags.
<html> <head></head> <body> <table> <tr> <td id="left"></td><td id="right"></td> </tr> </table> </body> </html>

*Doctype excluded for clarity

Note: Try to make the code you build in NotePad look like our examples. You can create space between tags by placing your cursor at the end of a tag and pressing the Enter Key.

There you have the beginning of your 2 column web page.
Save the changes. If you looked at the page with your browser, you should still see just a blank web page.

There are of course some attributes which we'll add to the tags using style sheets as problems arise. If we add them as we go it will be easier to see what they do.

Take a short quiz on the information you just learned.

In the next lesson we'll learn about CSS style sheets and add some color to the web page.

Let's learn some CSS

Free Business Web Hosting

If you are building a website for a business or organization, you can put it online for free at Microsoft® Office Live Small Business. You can create your website with HTML and upload it or use their tools and build it online. Take your business online with Microsoft® Office Live Small Business. Get started for FREE! Take the TOUR!

Create Web Sites without Learning Code

Create web sites online without learning any code using Yahoo's simple but powerful Site Solution builder.
Try the Site Solution Demo

Sitebuilder 2.6 is even better than previous versions of Yahoo's downloadable builder. Download it to your PC and create a web site with all the bells and whistles.

Start today and SAVE 25% on your first 3 months.

Get everything you need for a great web site with Yahoo! Web Hosting - 25% off

Property of
Net Success 2000 Plus Inc
Po Box 1508
Somerset KY 42502
Last Modified: September 13, 2008

Home

HTML Tutor
Beginner
HTML Basics
Add a Heading
Add a Paragraph

Intermediate
Phase I
Getting Started
Basic HTML Page
Creating Columns
CSS
Color
Headings
Images
Paragraphs
Site Heading
Linking

Advanced
Phase II
Start Phase II
Editing Pages
Change Appearance
Summary

Helps
Tag Glossary
Finished Code
Image Download
Color Tool
Hex Code Chart
Free Web Templates
Free Heading Graphic
Free Backgrounds
Put It on the Web
Quizzes
Your Questions

HTML Editors
Overview
NoteTab Light
Webbuilder

Online Builder Tutorials
Soholaunch
SiteReptile
SiteSTUDIO

Other Helps
Flash Web Sites