All data in a table goes into cells. A cell is created with the TD element or the TH element. Before you start defining cells, first set up rows into which the browser puts the cells. If you don’t define rows to hold your cells, each cell will be its own row—meaning your table will be exactly one column wide. Create a row with the TR element.

Table Row <TR>
Start Tag: Required
Content: TD
TH
End Tag: Optional

Attributes:

id, class, lang, dir, events, title, style
align: right, left, center, justify, char (these are not deprecated)
valign: top, middle, bottom, baseline (these are not deprecated)
char: indicate the character used for character alignment;
default is decimal point
charoff: character offset from left when using character alignment

The TR element can contain both cell data and cell headers. To differentiate the two items, the cell headers are formatted in bold by your browser. To define the formatting for your header cells yourself, use the class attribute and define a class for your headers in your style sheet.

Table Data <TD>
Start Tag: Required
Content: Cell data
End Tag: Optional

Attributes:

id, class, lang, dir, events, title, style
align: right, left, center, justify, char (these are not deprecated)
valign: top, middle, bottom, baseline (these are not deprecated)
colspan: number of columns this cell spans (defaults to 1)
rowspan: number of rows this cell spans (defaults to 1)
abbr: abbreviated version of the cell’s content
axis: a comma-delimited list of category names; used for
associating each cell with a category in speech-synthesizing browsers
headers: ID that associates a header cell with table data; can be used for speech-synthesizing browsers, for grouping columns, or for style sheets

nowrap: deprecated; avoid wrapping text within this cell; can make cells very wide
char: indicate the character to be used for character alignment; default is decimal point
charoff: character offset from left when using character alignment
bgcolor: deprecated; background color for this cell
width: deprecated; width of cell in pixels
height: deprecated; height of cell in pixels

Table Heading <TH>
Start Tag: Required
Content: Cell heading
End Tag: Optional

Attributes:

id, class, lang, dir, events, title, style
align: right, left, center, justify, char (these are not deprecated)
valign: top, middle, bottom, baseline (these are not deprecated)
colspan: number of columns this cell spans (defaults to 1)
rowspan: number of rows this cell spans (defaults to 1)
abbr: abbreviated version of the cell’s content
axis: a comma-delimited list of category names; used for
associating each cell with a category in speech-synthesizing browsers
headers: ID that associates a header cell with table data; can be used for speech-synthesizing browsers, for grouping columns, or for style sheets

scope: scope covered by header cell; valid values are row,
column, rowgroup, colgroup
nowrap: deprecated; don’t wrap text within this cell
width: deprecated; width of cell in pixels
height: deprecated; height of cell in pixels

After all the preceding definitions, you may be rethinking putting a table into your page to display tabular data. Don’t get discouraged. The following simple example shows how to include a table on your page:

<TABLE border=”1” frame=”border” rules=”all”>
<TR>
<TH>
<TH>Grams of Fat
<TH>Grams of Protein
<TR>
<TH>Graham Crackers
<TD align=”center”>1
<TD align=”center”>0
<TR>
<TH>Raspberry Yogurt
<TD align=”center”>2
<TD align=”center”>9
<TR>
<TH>Turkey Breast
<TD align=”center”>1
<TD align=”center”>6
</TABLE>


This example generates a table that looks like the following:



In reality, the borders crowd the text more than in this illustration. You can, of course, include cellpadding to keep the table from looking crowded, but this feature complicates the simple example.

The next example adds a few more features. This example uses the align attribute with the value set to “char,” and the default alignment character is the decimal place. Internet Explorer 5.5 and Netscape 4.7 do not support character alignment, but this feature should be included in future versions. If you want to change the alignment character, add the char attribute and set it to the character you want to align.

<TABLE cellspacing=”2” cellpadding=”2” border=”1” frame=”box”
rules=”cols”>
<TR align=”center”>
<TD>
<TH>Chicago
<TH>Washington, DC
<TH>New York
<TH>Charlottesville
<TR>
<TH align=”center”>Breakfast
<TD align=”char”>12.95
<TD align=”char”>9.95
<TD align=”char”>15.95
<TD align=”char”>4.95
<TR>
<TH align=”center”>Lunch
<TD align=”char”>13.50
<TD align=”char”>9.50
<TD align=”char”>16.00
<TD align=”char”>6.50
<TR>
<TH align=”center”>Dinner
<TD align=”char”>35.00
<TD align=”char”>26.00
<TD align=”char”>55.00
<TD align=”char”>18.00
<TR>
<TH align=”center”>Transportation
<TD align=”char”>12.00
<TD align=”char”>15.00
<TD align=”char”>22.00
<TD align=”char”>9.00
<TR>
<TH align=”center”>Entertainment
<TD align=”char”>45.00
<TD align=”char”>45.00
<TD align=”char”>75.00
<TD align=”char”>20.00
<TR>
<TH align=”center”>Total
<TD align=”char”>118.45
<TD align=”char”>105.45
<TD align=”char”>183.95
<TD align=”char”>58.45
</TABLE>

Following Figure Shows how the text renders in Netscape