An Overview Of HTML Tables
HTML Tables allow you to be more precise when you position images and text on your Web page.
A sample Table appears below:
Unlike the text and images you' entered into paragraphs in Web pages without Tables, the paragraphs, images, or other HTML elements within each Table Cell are treated independently by a browser.
For example, the Table below illustrates how paragraphs in each Cell are positioned independently next to one another on the page, rather than in a single vertical series of paragraphs:
Note also how the paragraphs in the Cells above are each aligned differently. Since Table Cells are independently rendered on the screen, the HTML Tag Alignment Modifiers (like Center, Left, and Right) affect only the paragraph in a particular Cell.
Controlling Table Appearance:
Note how the height of this Table is slightly less than the height of the Table above it. Remember that what a Cell contains determines the height of the Cell, and the height of all Cells in a Column determines the height of the Table as a whole.
In addition to controlling Table and Cell width and height, you can also control the Table Border Size (or leave the border invisible), you can control the amount of Spacing between the contents of Table Cells and their border, and you can specify how Cell contents are Vertically Aligned within the Cell. You can even change the Background Color of individual Table Cells.
One of the most powerful features of the HTML Table is its ability to be Nested within another Table. Nesting a Table means that you can create an independent Table within a Cell of an existing Table. For example, all of the Tables shown on this page thus far are actually Nested within a larger Table that contains the Row and Column information. In reproducing the first Table on this page below, we've made the outer Table's border visible so you can see it:
As you can see, HTML Tables enable you to enhance your Web page design considerably by controlling the placement of images and text.
I've placed a border around the Tables that make up this page so you can see how I've used them in this guide!