HTML - Creating Tables

A table is an excellent way of organizing information and presenting it in a readable and meaningful manner.

Look at the following code:

<TABLE CAPTION>English Marks Statement </CAPTION>

<TR>

<TH> Name </TH>

<TH> Term 1 </TH>

<TH> Term 2 </TH>

</TR>

<TR>

<TD> Anita </TD>

<TD> 67 </TD>

<TD> 78 </TD>

</TR>

<TR>

<TD> Sunil </TD>

<TD> 76 </TD>

<TD> 79 </TD>

</TR>

<TR>

<TD> Vidya </TD>

<TD> 58 </TD>

</TR>

</TABLE>

The above HTML code creates a table with a heading called "English Marks Statement".

The TABLE tag defines the beginning of the table. The use of CAPTION tag is optional. If you use it, a heading is given.

Next comes the TR tag. It stands for Table Row. It indicates the beginning of a row. Then to define the contents of each cell in that row, we have to use the TD tag which stands for Table Data. But here, this being the first row we have used the TH tag which stands for Table Heading. The text specified within the TH tags will be boldfaced. If more columns are needd, you can define more TH tags.

When the first row is finished, use the </TR> tag to end that row. Then start a freash row with another TR. tag and define the contents for each cell using the TD tag.

Continue in this manner for any number of rows you wnat. Then you can end the table using the

</TABLE> tag.

By default, the text is left aligned ineach cell. You can change the alignment by specifying the ALIGN option in the TD or TH tags, as shown below:

<TH ALIGN="LEFT">

Other alignment options are RIGHT and CENTER

By default the table gridlines are not shown. If you want them to be displayed, then include the word BORDER in the TABLE tag as shown below:

<TABLE BORDER>

HOME INDEX PREVIOUS NEXT