HTML TUTORIAL
» Introduction
» Elements
» HTML Tags
» Formatting
» Entities
» HTML Links
» Frames
» Tables
» Lists
» HTML Forms
» Images
» Layout
» Fonts
» Styles
» Head & Meta
» URL's
» Scripts
» Adding Music

PHP TUTORIAL
» Introduction
» Syntax
» Operators
» Conditionals
» Display the Date
» SSI - Includes
» Connecting to a Database
» PHP Forms
» Reading From a File

CSS TUTORIAL
» Introduction
» Syntax
» Inserting a Style Sheet
» CSS Backgrounds

DASHBOARD WIDGETS
» Hello World Widget

 
PARTNER LINKS

» Restaurant Menus
» Drew's News Room
» Stock Forums

HTML LAYOUT


Everywhere on the Web you will find pages that are formatted like newspaper pages using HTML columns.


HTML Layout - Using Tables

One very common practice with HTML, is to use HTML tables to format the layout of an HTML page.

A part of this page is formatted with two columns, like a newspaper page.

As you can see on this page, there is a left column and a right column.

This text is displayed in the left column.

An HTML <table> is used to divide a part of this Web page into two columns.

The trick is to use a table without borders, and maybe a little extra cell-padding.

No matter how much text you add to this page, it will stay inside its column borders.



Same Layout - Color Added

One very common practice with HTML, is to use HTML tables to format the layout of an HTML page.

A part of this page is formatted with two columns, like a newspaper page.

As you can see at this page, there is a left column and a right column.

An HTML <table> is used to divide a part of this Web page into two columns.

This text is displayed in the right column.

The trick is to use a table without borders, and maybe a little extra cell-padding.

No matter how much text you add to this page, it will stay inside its column borders.



Examples

Dividing a part of an HTML page into table columns is very easy to do as you can see.