Creating Tables in Web Page

Tables are used to display data in Tabular format, containing rows and columns, on the screen. The HTML tag <TABLE> is used to define tables.

The table element can contain the following:

<CAPTION>: It is used to specify the caption (Label) for the table. The CAPTION element, by default is center-aligned at the top of the Table.

<TR>: Table row, is to specify the row in the table. It holds <TH>Table Heading and <TD>Table Data.

<TH>: Table Header, is used for giving Heading to Table. By default header elements contents are in bold font and center-aligned.

<TD>: Table Data, within the row you create columns by <TD> tag. The Table data can consist of lists, images, forms and other element. The TD is a true container that can hold other HTML elements, even more tables.

<TABLE>
 <CAPTION>Test Table</CAPTION>
 <TR>
  <TH>Heading 1</TH>
  <TH>Heading 3</TH>
  <TH>Heading 3</TH>
 </TR>
 <TR>
  <TD>Cell 1</TD>
  <TD>Cell 2</TD>
  <TD>Cell 3</TD>
</TR>
<TR>
  <TD>Cell 4</TD>
  <TD>Cell 5</TD>
  <TD>Cell 6</TD>
 </TR>
</TABLE>

Attributes of <TABLE>

BORDER: It is used to draw borders around all the Table cells. By default, tables are shown without borders. The size of border can set by assigning an integer value. For example BORDER="3", gives table a three pixel border.

ALIGN: It is used to align a table relative to windows border. It can set to left, right or center.

CELLSPACING: It is used to set the space between the cells in a table. It takes value in pixel.

CELLPADDING: It is used to set the space between the cell data and cell wall in a table. It takes value in pixel.

WIDTH: It is used to set the width of the table, as either an absolute width in pixels, or a percentage of the document width.

Attributes of <TR>

ALIGN: It is used to align the text inside the table cells to the left, right or center.

VALIGN: Align the text within the cells to top, bottom or centered vertically to the cell. The values used are top, middle and bottom.

BGCOLOR: It sets the background color of the row.

BORDERCOLOR: It sets the border color of the row.

Attribute of <TD>, <TH>

All the attributes of <TR> can also be used with <TD> element. Other attributes are:

WIDTH: It is used to describe the desired width of the cell, either as an absolute width in pixels or as a percentage of table width.

HEIGHT: It is used to specify the height of the cell.

NOWRAP: It prevents the browser from wrapping  the content of the cell.

COLSPAN: It specifies the number  of columns the cell can span. The default COLSPAN for any cell is 1.

ROWSPAN: It specifies the number of rows the cell can span. The default ROWSPAN for any cell is 1.