2 Column Web Page

This is a basic 2 column web page built using a table.

We used no style settings and only the basic attributes of the tags.

The column width is set to 50%. You could also set the width in pixels.

The background color of the left column is set using the bgcolor attribute. The same effect can be produced using an inline style sheet.

The length of the page will expand as you add text. You could add a height setting to one column to make it a constant length. A browser will equalize the 2 columns when viewed.

The code for this web page is displayed in the right column.

I'll improve the page in the next example by adding a style sheet so that it could be used to make your own website.

Adding a Style Sheet

The code

<!doctype html public "-//w3c//dtd HTML 4.0 Transitional//EN"> <html> <head> <title>2 Column Web Page</title> </head> <body> <table width="100%" cellpadding="5" cellspacing="0" border="1"> <tr valign="top"> <td width="50%" bgcolor= "#99ccff" align="center"><h1>2 Column Web Page</h1> <p>This is a basic 2 column web page produced using a table.</p> <p>We used no style settings and only the basic attributes of the tags.</p> <p>The column width is set to 50%. You could also set the width in pixels.</p> <p>The background color of the left column is set using the bgcolor attribute. The same effect can be produced using an inline style sheet.</p> <p>The length of the page will expand as you add text. You could add a height setting to one column to make it a constant length. A browser will equalize the 2 columns when viewed.</p> <p>The code for this web page is displayed in the right column.</p> <p>I'll improve the page in the next example by adding a style sheet.</p> <p><a href="2-column-tables-2.html">Adding a Style Sheet</a></p> </td> <td align="center"> <h1>The code</h1> <code></code> </td></tr></table> </body> </html>