Creating Tables

<TABLE>... </TABLE>

With the introduction of tables came a new dimension to Web pages. Not only do they present data in tabular form but they also give HTML authors control over page layout.

Tables contain:

caption
indicates what the table is about - <CAPTION>... </CAPTION>
table rows
are defined by <TR>... </TR>
table headings
label the rows and columns - <TH>... </TH>
table data
are the values in the table - <TD>... </TD>
table cells
are the individual squares in the table

Table elements are placed between the <TABLE> and the </TABLE> tags. The most common attribute within the table tag is BORDER. Borders are lines around the table which are useful when the table contains data. Borders might not be wanted when the table is used for page layout purposes.

Here is the code for a small table with a caption, two rows, six cells and headings across the top:

<TABLE BORDER=2>
<CAPTION>Attendance % For the Month of March </CAPTION>
<TR>
<TH>Grade 4</TH>
<TH>Grade 5</TH>
<TH>Grade 6</TH>
</TR>
<TR>
<TD> 97.5%</TD>
<TD>98.2%</TD>
<TD>97.8%</TD>
</TR>
</TABLE>
Attendance % For the Month of March
Grade 4 Grade 5 Grade 6
97.5% 98.2% 97.8%

If the headings are on the left edge of the table make each <TH> the first cell in the row.

<TABLE BORDER=2>
<CAPTION>Attendance % For the Month of March </CAPTION>
<TR>
<TH>Grade 4</TH>
<TD> 97.5%</TD>
</TR>
<TR>
<TH>Grade 5</TH>
<TD>98.2%</TD>
</TR>
<TR>
<TH>Grade 6</TH>
<TD>97.8%</TD>
</TR>
</TABLE>
Attendance % For the Month of March
Grade 4 97.5%
Grade 5 98.2%
Grade 6 97.8%


Search The Global Classroom
Patricia A. Weeg
pweeg@shore.intercom.net
Return to Global Classroom