...Previous Page An Overview Of HTML Tables HTML Tables allow you to be more precise when you position images and text on your Web page. A Table is actually a grid of rectangular, individually displayed areas on your Web page.   These areas are called Cells, and they appear in Rows and Columns within a Table.  A sample Table appears below: Column 1 Column 2 Column 3 Row 1 Cell Cell Cell Cell Cell Cell Cell Cell Cell Row 2 Row 3 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: Column 1 Column 2 Column 3 Row 1 This is a text paragraph. This is a text paragraph. This is a text paragraph. This is a text paragraph. This is another. ...and a text paragraph in the same Cell. This is a text paragraph. Row 2 Row 3 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: You can control the width of a Table and the width of each Column of Cells. This is done in two ways: by specifying a width based on percentage of page (or Table) width; or by specifying the exact width in terms of screen pixels.   The height of Table Cells is determined by what you place in them, and the height of the Table itself is determined by of the height of its highest Column of Cells.   You can Span connected Table Columns and/or Rows, and make one large Cell out of several smaller ones, as shown below: Column 1 Column 2 Column 3 Row 1 This is a text paragraph. This is a text paragraph. This is a text paragraph. This is a text paragraph. This a text paragraph placed into a Cell that Spans two Columns and two Rows. This is a text paragraph. Row 2 Row 3 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. Nesting Tables: 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: Table 1 Column 1 Column 2 Column 3 Row 1 Table 2 Cell Cell Cell Cell Cell Cell Cell Cell Row 2 Row 3 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! ...Previous Page Design Basics ~ HTML Tables ~ HTML Frames ~ Java & ActiveX The BEST HTML Tool ~ WebExpress Tutorial Copyright © 1997 by MicroVision Development, Inc.