You are here:  NetStrider » Tutorials » HTMLRef » Tables » Introduction «
Introduction to Tables

Tables can be used to precisely position text and objects within an HTML Document.  Tables consist basically of data cells, which consitiute the columns, arranged in defined rows.  The number of rows and data cells within the rows determine the layout of the table.  Table layout is remarkably similar to the layout of cells within an ordinary spreadsheet. 

In addition to rows and data cells tables can also contain headers and a caption.  The basic command structure for building a simple table is shown below:



Column A Column B Column C
Begin <TABLE>



  Caption
<CAPTION> Table Caption </CAPTION>

  Headers <TR>
<TH>Hdr 1</TH> <TH>Hdr 2</TH> <TH>Hdr 3</TH>
</TR>
  Row 1 <TR>
<TD>Cell A1</TD> <TD>Cell B1</TD> <TD>Cell C1</TD>
</TR>
  Row 2 <TR>
<TD>Cell A2</TD> <TD>Cell B2</TD> <TD>Cell C2</TD>
</TR>
  Row 3 <TR>
<TD>Cell A3</TD> <TD>Cell B3</TD> <TD>Cell C3</TD>
</TR>
End </TABLE>



This table consists of four defined rows.  Note that one of the rows contains headers while the remaining three contain only data cells.  The table also contains a caption.

When defining tables is is essential that the number of data cells within each row match precisely.  The browser will always assume that the number of columns (data cells) within each row is constant.  If a row has a larger or smaller number of columns (data cells) defined within it than do other rows, then the browser will adjust the entire table display in an effort to reconcile the discrepancy.  This can produce some very odd results.

Tables can be designed, however, in a way that allows data cells to span either a number of rows or a number of columns.  This maintains a constant number of data cells per row but accommodates merging of data cells to accomplish the kinds of effects shown below:

Examples of Tables with Merged Cells:

Cell One Spans Two Columns
Cell Two Cell Three
Cell One Spans Two Rows Cell Two
Cell Three

Using advanced table formatting capabilities it is possible to produce almost any arrangement of text and images within an HTML Document.  However, table data cells cannot yet be loaded dynamically independent of other data cells.  All elements of a table constitute a single object and must load completely before the table can be displayed by the browser.  Dynamic content changes within HTML Documents can only be accomplished using frames at present.


TOP






Hosted by uCoz