Creating Tables
Creating a Simple table
table is an orderly arranged of data.
in table data is stored in the form of rows and columns.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>A simple table</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>001</TD>
<TD>Harish</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Noida</TD>
</TR>
<TR>
<TD>002</TD>
<TD>pankaj</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Ghaziabad</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Rohit</TD>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, South Ext, Delhi</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Adding a Title to a Column
you can specify the title of a particular cell or column by using TH element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Adding a title to a column</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TH>Emp Id</TH>
<TH>Emp name</TH>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>001</TD>
<TD>Harish</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Noida</TD>
</TR>
<TR>
<TD>002</TD>
<TD>pankaj</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Ghaziabad</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Rohit</TD>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, South Ext, Delhi</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Adding caption to a table
a caption is a short description that provides a brief explanation about the table and helps you understand its purpose.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Adding caption to a table</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>
<B>Employee Details</B>
</CAPTION>
<TR>
<TH>Emp Id</TH>
<TH>Emp name</TH>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>001</TD>
<TD>Harish</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Noida</TD>
</TR>
<TR>
<TD>002</TD>
<TD>pankaj</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Ghaziabad</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Rohit</TD>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, South Ext, Delhi</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Specifying the properties of teh columns
The proprties of a table column include the background color, font color, and font size.
you can use the colgroup element to specify the properties of multiple columns simultaneously.
to specify the properties of single column, you can use the col element.
Changing the properties of multiple columns
colgroup element is used to change the properties of multiple columns.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Changing the Properties of Multiple Columns
</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>
<B>Employee Details</B>
</CAPTION>
<COLGROUP span="2" style="background-color:yellow">
</COLGROUP>
<TR>
<TH>Emp Id</TH>
<TH>Emp name</TH>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>001</TD>
<TD>Harish</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Noida</TD>
</TR>
<TR>
<TD>002</TD>
<TD>pankaj</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Ghaziabad</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Rohit</TD>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, South Ext, Delhi</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Changing the properties of a single column
the col element is used to change the properties of a single column.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Changing the Properties of Single Column</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>
<B>Employee Details</B>
</CAPTION>
<COL style="background-color:green" />
<COL style="background-color:orange" />
<TR>
<TH>Emp Id</TH>
<TH>Emp name</TH>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>001</TD>
<TD>Harish</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Noida</TD>
</TR>
<TR>
<TD>002</TD>
<TD>pankaj</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Ghaziabad</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Rohit</TD>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, South Ext, Delhi</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Spanning Rows and Columns
it is sometimes required to combine one or more adjacent cells into one cell.
the processs of combining one or more adjacent cells is known as spanning.
you can span cells either vertically or horizontally.
the verticle spanning of cells is known as row spanning and
the horizontal spanning of cells is known as column spanning.
span rows
span columns
Sanning Rows
you can span cells vertically by using the rowspan attribute with TH and TD elements.
the rowspan attribute requires a number as the value that is equal to the number of cells you want to combine vertically
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Spanning rows in a table</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>
<H3>Employee Details<H3>
</CAPTION>
<TR>
<TH rowspan="4">Employee id, name,<BR>
date of birth<BR>
and other information</TH>
<TH>Emp Id</th>
<TH>Emp name</TH>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>001</TD>
<TD>Harish</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Noida</TD>
</TR>
<TR>
<TD>002</TD>
<TD>pankaj</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Ghaziabad</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Rohit</TD>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, South Ext, Delhi</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Spanning Columns
you can span cells horizontally by using the colspan attribue with the TH and TD elements.
similar to he rowspan attribute, the colspan attribute requires a number as a value that is equal to the number of cells you want to combine horizontally.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Spanning columns in a table</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>
<B>Employee Details</B>
</CAPTION>
<TR>
<TH colspan="5">Employee id, name,
date of birth
and other information of employee</TH>
</TR>
<TR>
<TH>Emp Id</TH>
<TH>Emp name</TH>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>001</TD>
<TD>Harish</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Noida</TD>
</TR>
<TR>
<TD>002</TD>
<TD>pankaj</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Ghaziabad</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Rohit</TD>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, South Ext, Delhi</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Using Images in a table
you can also store images in a table.
you can insert an image into atable by using the IMG element within the TH and TD element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using Images in a Table</TITLE>
</HEAD>
<BODY>
<H2>Using Images in a Table</H2>
<TABLE>
<TR>
<TH>Tic</TH>
<TH>Tac</TH>
<TH>Toe</TH>
</TR>
<TR>
<TD><IMG src="x.jpg"/></TD>
<TD><IMG src="o.jpg"/></TD>
<TD><IMG src="x.jpg"/></TD>
</TR>
<TR>
<TD><IMG src="o.jpg"/></TD>
<TD><IMG src="x.jpg"/></TD>
<TD><IMG src="o.jpg"/></TD>
</TR>
<TR>
<TD><IMG src="x.jpg"/></TD>
<TD><IMG src="o.jpg"/></TD>
<TD><IMG src="x.jpg"/></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Creating Advanced Tables
to create a table you require five elements - TABLE, CAPTION, TR, TH, and TD.
HTML also provides some new elements to create more structured and formatted tables, which are known as advanced tables.
The THEAD element - Contains Rows, headings, and cells that make up the head of the table.
The TFOOT element - Ctrates a footer of the table that appears at the end of the table.
The TBODY element - Contains body of the table, that is, the table data.
The THEAD and TFOOT elements occur only once while TBODY element occure multiple times in the table for grouping the rows.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Advanced Tables</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>
<B>Employee Details</B>
</CAPTION>
<THEAD>
<TR>
<TH>Emp Id</TH>
<TH>Emp name</TH>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
</THEAD>
<TFOOT>
<TR>
<TH colspan="5">This table contains information about the employees.</TH>
</TR>
</TFOOT>
<TBODY>
<TR>
<TD>001</TD>
<TD>Harish</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Noida</TD>
</TR>
<TR>
<TD>002</TD>
<TD>pankaj</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Ghaziabad</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Rohit</TD>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, South Ext, Delhi</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
Nesting Tables
you can create a table inside another table.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Nesting a Table</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>
<B>Employee Details</B>
</CAPTION>
<TR>
<TH>Emp Id</TH>
<TH>Emp name</TH>
<TH>Other Details</TH>
</TR>
<TR>
<TD>001</TD>
<TD>Harish</TD>
<TD>
<TABLE>
<TR>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Noida</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>002</TD>
<TD>pankaj</TD>
<TD>
<TABLE >
<TR>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Ghaziabad</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Rohit</TD>
<TD>
<TABLE>
<TR>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, South Ext, Delhi</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Creating a Simple table
table is an orderly arranged of data.
in table data is stored in the form of rows and columns.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>A simple table</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>001</TD>
<TD>Harish</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Noida</TD>
</TR>
<TR>
<TD>002</TD>
<TD>pankaj</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Ghaziabad</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Rohit</TD>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, South Ext, Delhi</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Adding a Title to a Column
you can specify the title of a particular cell or column by using TH element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Adding a title to a column</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TH>Emp Id</TH>
<TH>Emp name</TH>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>001</TD>
<TD>Harish</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Noida</TD>
</TR>
<TR>
<TD>002</TD>
<TD>pankaj</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Ghaziabad</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Rohit</TD>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, South Ext, Delhi</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Adding caption to a table
a caption is a short description that provides a brief explanation about the table and helps you understand its purpose.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Adding caption to a table</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>
<B>Employee Details</B>
</CAPTION>
<TR>
<TH>Emp Id</TH>
<TH>Emp name</TH>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>001</TD>
<TD>Harish</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Noida</TD>
</TR>
<TR>
<TD>002</TD>
<TD>pankaj</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Ghaziabad</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Rohit</TD>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, South Ext, Delhi</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Specifying the properties of teh columns
The proprties of a table column include the background color, font color, and font size.
you can use the colgroup element to specify the properties of multiple columns simultaneously.
to specify the properties of single column, you can use the col element.
Changing the properties of multiple columns
colgroup element is used to change the properties of multiple columns.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Changing the Properties of Multiple Columns
</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>
<B>Employee Details</B>
</CAPTION>
<COLGROUP span="2" style="background-color:yellow">
</COLGROUP>
<TR>
<TH>Emp Id</TH>
<TH>Emp name</TH>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>001</TD>
<TD>Harish</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Noida</TD>
</TR>
<TR>
<TD>002</TD>
<TD>pankaj</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Ghaziabad</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Rohit</TD>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, South Ext, Delhi</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Changing the properties of a single column
the col element is used to change the properties of a single column.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Changing the Properties of Single Column</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>
<B>Employee Details</B>
</CAPTION>
<COL style="background-color:green" />
<COL style="background-color:orange" />
<TR>
<TH>Emp Id</TH>
<TH>Emp name</TH>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>001</TD>
<TD>Harish</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Noida</TD>
</TR>
<TR>
<TD>002</TD>
<TD>pankaj</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Ghaziabad</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Rohit</TD>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, South Ext, Delhi</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Spanning Rows and Columns
it is sometimes required to combine one or more adjacent cells into one cell.
the processs of combining one or more adjacent cells is known as spanning.
you can span cells either vertically or horizontally.
the verticle spanning of cells is known as row spanning and
the horizontal spanning of cells is known as column spanning.
span rows
span columns
Sanning Rows
you can span cells vertically by using the rowspan attribute with TH and TD elements.
the rowspan attribute requires a number as the value that is equal to the number of cells you want to combine vertically
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Spanning rows in a table</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>
<H3>Employee Details<H3>
</CAPTION>
<TR>
<TH rowspan="4">Employee id, name,<BR>
date of birth<BR>
and other information</TH>
<TH>Emp Id</th>
<TH>Emp name</TH>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>001</TD>
<TD>Harish</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Noida</TD>
</TR>
<TR>
<TD>002</TD>
<TD>pankaj</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Ghaziabad</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Rohit</TD>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, South Ext, Delhi</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Spanning Columns
you can span cells horizontally by using the colspan attribue with the TH and TD elements.
similar to he rowspan attribute, the colspan attribute requires a number as a value that is equal to the number of cells you want to combine horizontally.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Spanning columns in a table</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>
<B>Employee Details</B>
</CAPTION>
<TR>
<TH colspan="5">Employee id, name,
date of birth
and other information of employee</TH>
</TR>
<TR>
<TH>Emp Id</TH>
<TH>Emp name</TH>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>001</TD>
<TD>Harish</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Noida</TD>
</TR>
<TR>
<TD>002</TD>
<TD>pankaj</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Ghaziabad</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Rohit</TD>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, South Ext, Delhi</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Using Images in a table
you can also store images in a table.
you can insert an image into atable by using the IMG element within the TH and TD element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using Images in a Table</TITLE>
</HEAD>
<BODY>
<H2>Using Images in a Table</H2>
<TABLE>
<TR>
<TH>Tic</TH>
<TH>Tac</TH>
<TH>Toe</TH>
</TR>
<TR>
<TD><IMG src="x.jpg"/></TD>
<TD><IMG src="o.jpg"/></TD>
<TD><IMG src="x.jpg"/></TD>
</TR>
<TR>
<TD><IMG src="o.jpg"/></TD>
<TD><IMG src="x.jpg"/></TD>
<TD><IMG src="o.jpg"/></TD>
</TR>
<TR>
<TD><IMG src="x.jpg"/></TD>
<TD><IMG src="o.jpg"/></TD>
<TD><IMG src="x.jpg"/></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Creating Advanced Tables
to create a table you require five elements - TABLE, CAPTION, TR, TH, and TD.
HTML also provides some new elements to create more structured and formatted tables, which are known as advanced tables.
The THEAD element - Contains Rows, headings, and cells that make up the head of the table.
The TFOOT element - Ctrates a footer of the table that appears at the end of the table.
The TBODY element - Contains body of the table, that is, the table data.
The THEAD and TFOOT elements occur only once while TBODY element occure multiple times in the table for grouping the rows.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Advanced Tables</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>
<B>Employee Details</B>
</CAPTION>
<THEAD>
<TR>
<TH>Emp Id</TH>
<TH>Emp name</TH>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
</THEAD>
<TFOOT>
<TR>
<TH colspan="5">This table contains information about the employees.</TH>
</TR>
</TFOOT>
<TBODY>
<TR>
<TD>001</TD>
<TD>Harish</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Noida</TD>
</TR>
<TR>
<TD>002</TD>
<TD>pankaj</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Ghaziabad</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Rohit</TD>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, South Ext, Delhi</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
Nesting Tables
you can create a table inside another table.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Nesting a Table</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>
<B>Employee Details</B>
</CAPTION>
<TR>
<TH>Emp Id</TH>
<TH>Emp name</TH>
<TH>Other Details</TH>
</TR>
<TR>
<TD>001</TD>
<TD>Harish</TD>
<TD>
<TABLE>
<TR>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Noida</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>002</TD>
<TD>pankaj</TD>
<TD>
<TABLE >
<TR>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Ghaziabad</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Rohit</TD>
<TD>
<TABLE>
<TR>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, South Ext, Delhi</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
No comments:
Post a Comment