HTML Nested Table

Table Tag in HTML allows you to give an organized look to the data. A table is a collection of rows and columns. In order to present exploded view of the data we may need to embed tables in other tables. For example you may want to display address details of employees of different departments in cells of table. This is done by using a Table within a table. Such a table is nothing but a table description in a cell of another table.

Syntax

A complete table can be placed in a cell of another table. The <TABLE> </TABLE> tags defining the nested table is enclosed in a <TD></TD> tag of the main or outer table.

<TABLE>
<TR>
<TD>
<TABLE>
	Complete definition of the nested table
</TABLE>
</TD>
</TR>
</TABLE>

Features of Nested Table

  • A nested table is a complete HTML table in itself.
  • One nested table is always embedded in a cell of a table
  • Table headings can be added to a nested table
  • Nested table will not use the formatting of the outer table. If the inner table has to be formatted, it is done by setting attribute of inner table exclusively.
  • COLSPAN and ROWSPAN attribute can be used in the inner table to combine the inner table’s cells.
  • All attributes for Table tag, Table header tag, table row tag and table cell tag can be applied in the individual inner tables.

Example

In the following example two levels of inner tables are created. The outermost table is not assigned any background color. The first inner table is created in the bottom right cell of outermost table with respective headers and different colors for heading and cells. The innermost table of this example is created in the bottom right cell of the first inner table. The innermost table is assigned a different background color and data cells are also assigned a different background color.

<TITLE> Welcome to CSVeda.com </TITLE>
<HTML>
<BODY >
<H3 ALIGN="CENTER">Using TABLES in Websites</H3>

<TABLE WIDTH="50%" border="1" align="center" >
<CAPTION>Caption-Nested Table</CAPTION>
<TR ALIGN="center">
<TH >Column 1</TH>
<TH >Column 2</TH>
</TR>
<TR ALIGN="center">
<TD COLSPAN="2">Colspan Column</TD>
</TR>
<TR ALIGN="center">
<TD ROWSPAN="2">Rowspan Cell</TD>
<TD >Cell 2</TD>
</TR>
<TR ALIGN="center">
<TD >
<TABLE border="1" align="center" BGCOLOR="yellow" cellspacing="10px" cellpadding="20px">
<TR ALIGN="center" >
<TH >Inner Column Heading 1</TH>
<TH >Inner Column Heading 2</TH>
</TR>
<TR ALIGN="center">
<TD BGCOLOR="LightSlateGray" >Inner Data Cell 1</TD>
<TD BGCOLOR="greenyellow">
		<TABLE border="1" align="center" BGCOLOR="lightpink" cellspacing="10px" cellpadding="20px">
		<TR ALIGN="center" >
		<TH >Inner Most Column Heading 1</TH>
		<TH >Inner Most Column Heading 2</TH>
		</TR>
		<TR ALIGN="center">
		<TD BGCOLOR="violet">Innermost Data Cell 1</TD>
		<TD BGCOLOR="coral">Innermost Data Cell 2</TD>
		</TR>
		</TABLE>

</TD>
</TR>
</TABLE>
</TD>
</TR>

</TABLE>
</BODY>
</HTML>
Nested Table