Nested Table in HTML-HTML Tutorial-php.cn

‘Nested Table’ is one of the most important concepts while using tables in HTML coding. The nested tables or ‘tables within table’ is a concept used while creating bigger and complex tables. Most of the complex and large tables might include nesting of tables within the main table to have better control in the coding. Using nested tables might help create beautiful and interesting appearances and visuals, but it can create loose end errors.

Sure, it becomes trickier when you start using nested tables because of all the tags and elements you need to code and maintain and handle while creating tables within tables. But once you get hold of such a concept and dab into such complexity, it does get a lot easier to juggle tags within.

How to create a table within a table?

A table can be created within another table by simply using the table tags like

, , and

, etc., to create our nested table. Since nesting tables can lead to higher complexity levels, remember to begin and end the nesting tables within the same cell. You can create nested tables to any number of levels; just remember to create an inner table inside the same cell.

Below is an interpretation of nested tables. The below image shows a five-level nesting of tables, with the color ‘Blue’ as the outermost or the container table with nested tables represented with colors White, Red, Yellow, and Green.

Nested Table in HTML

We will try and create another example of nested tables step by step this time.

First, we need the main table, the container for us to start our nesting.
Second, decide in which row or column or cell you want another table to exist. Once decided, move to the next step

is the element where an entirely new table will be created. Going hierarchically,….
….

(nested table here)

The nested table inside must be closed completely with all its standard rules for closing

elements.

Formatting the nested table is as simple and similar to any other element of HTML.

The above example had the main container, a table with two columns and a nested table within two rows and two columns.

Now observe the below example of nested tables. What we discussed as an interpretation of levels of nesting above, we will try to create such an example through coding below.

Code:

<body>
<table border="10" bordercolor = "#0B1941">
<tr>
<td>
<table border="10" bordercolor = "#F8F3F3">
<tr>
<td>
<table border="10" bordercolor = "#C74D4F">
<tr>
<td>
<table border="10" bordercolor = "#DCE127">
<tr>
<td>
<table border="10" bordercolor = "#3CAB16">
<tr> <td> </td> </tr>
</table> </td> </tr>
</table> </td> </tr>
</table> </td> </tr>
</table> </td> </tr>
</table>

Copy after login

The above code outputs the following display showing 5 levels of nesting of our tables differentiated through different colors. Observe the placement of tables inside one another, that is, nesting within:

Nested Table in HTML

The concept of nesting within the tables becomes more interesting by visual when the programmer uses tables for formatting the complete webpage. The table can then be formatted like any other table and other HTML elements the programmer might nest within.

Examples of Nested Table in HTML

Below are the examples mentioned :

Example #1

Observe the below example of a nested table, just one table within the main table. To differentiate the main table and the nested table within, we have used different border radius and border colors of the table.

Code:

<body>
<table border="5px" bordercolor="#8707B0">
<tr>
<td>Left side of the main table</td>
<td>
<table border="5px" bordercolor="#F35557">
<h4 align="center">Nested Table</h4>
<tr>
<td>nested table C1</td>
<td>nested table C2</td>
</tr>
<tr>
<td>nested table</td>
<td>nested table</td>
</tr>
</table>
</td>
</tr>
</table>

Copy after login

Output:

Nested Table in HTML

Note: The nesting of a table within the main container table. The nested table inside the main table is the one with the red-colored border. It is added in the

element of the container table.

Example #2

Our following code will demonstrate the nesting of other HTML elements within the nested tables inside our main container table.

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> NestedTables </title>
</head>
<body>
<caption title="Container Table"> Container Table </caption>
<table border="5px" bordercolor = "red">
<tr>
<td >
<table>
<tr> <th colspan="2"> Nested Table 2 </th> </tr>
<tr> <th> Column 1 </th> <th> Column 2 </th> </tr>
<tr> <td> Our First Table </td>
<td> Nested Within </td> </tr>
</table>
</td>
<td>
<table >
<tr> <th> Nested Table 2 </th> </tr>
<tr>
<td>
<ul>
<li> List Object 1 </li>
<li> List Object 2 </li>
<li> List Object 3 </li>
</ul>
</td>
</tr>
</table> </td> </tr>
<tr>
<td>
<table>
<tr> <th colspan="2" align="center"> Nested Table 3 </th> </tr>
<tr>
<td> <a href=""> Nested Table </a> </td>
<td> Demo Continued </td> </tr>
</table> </td>
<td>
<table>
<tr> <th> Nested Table 4 </th> </tr>
<tr>
<td> <img src="images.png" height="120px" width="120px" alt="Sorry Image could not be displayed"> </td> </tr> </table>
</td>
</tr>
</table>
</body>
</html>

Copy after login

The above code demonstrates how one table can contain several other tables within itself, which can contain any type of content you normally add to a simple HTML page. The above code for the same is without borders.

Nested Table in HTML

Note: In the above example, the added HTML elements like a png file, a hyperlink, a table or a list of objects can be simply added to one of the

elements. In the above interpretation, I have logged off all the borders of the tables nested within.

Please observe that the tables when their borders are made visible. The container table is one with the red colored border with nested ones with blue, yellow, green and black colored borders.

Nested Table in HTML

It is all good to use tables for formatting a web page entirely, but one thing to remember is, the more complex your nesting is, the more your page will load slower since it becomes really complicated for your browser to do the rendering.

The above is the detailed content of Nested Table in HTML. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

html html5 HTML Tutorial HTML Properties HTML tags

source：php

Previous article：Table Without Border in HTML Next article：Table Border in HTML

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn