HTML Tables Tutorial

Page 1 - Overview

HTML is the language that defines the display of a web page. Without tables it simply draws objects, such as text and pictures, on a page in a top down manner. HTML objects at the top of the document source are displayed at the top of the page. HTML objects at the bottom of the document source are found at the bottom of the page. Pretty straight forward.

To move objects down a page you need to use block elements, the most basic of which is the <br> tag. Other examples are the <p> tag, the <ol> tag, and the Heading tags (<h1>, <h2>, <h3>, etc.) just to name a few.

With the advent of HTML 2.0 (we presently have HTML 4.0) came the introduction of tables. A way of laying out web pages with precise control. Tables are made of Horizontal Rows and Vetical Columns.

There are three basic tags used by tables, a handful of attributes and a million and one ways to use them all. As we will see, the real power of tables is in the form of nested tables, a table inside a table. With nested tables you can break your page up into "regions". By dividing up a page in this way you can control one side of a page, for example, and not affect the other side, and vice versa.

We will eventually see an example of a two column table with a nested table in both columns. Site Map