View Categories

HTML – Nested Tables

Table of Contents

Nested Tables in HTML refer to tables placed within other table cells, allowing for more complex layouts and organized data representation. By embedding tables inside <td> (table data) elements, you can build highly structured content within a webpage. This method allows not just tables, but also other HTML elements to be placed inside cells, making it versatile for displaying information.

Basic Structure of Nested Tables #

A nested table is an entire table placed inside the cell of another table. This provides flexibility in designing structured layouts for more complex data presentation.

Steps to Create a Nested Table:

Create Outer Table: The outer table serves as the main container for your data.

<table border="1">
   <!-- Outer table content -->
</table>

Define Rows and Columns: Add rows and columns to the outer table.

<tr>
   <td>
      <!-- Content within the cell -->
   </td>
</tr>

Embed Inner Table: Inside a <td>, you can insert a new table using the <table> tag.

<td>
   <table border="1">
      <!-- Inner table content -->
   </table>
</td>

Add Inner Table Content: Add rows and columns within the inner table as needed.

<tr>
   <td>Inner Content</td>
</tr>

Close Tags: Make sure to close all the tags properly to ensure correct structure.

Example of HTML Nested Tables #

Here is an example of a nested table where employee details are nested inside the main table.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th>Employees</th>
            <th>Net Worth</th>
        </tr>
        <tr>
            <td>
                <table border="1">
                    <tr>
                        <th>Name</th>
                        <th>Salary</th>
                    </tr>
                    <tr>
                        <td>Ramesh</td>
                        <td>5000</td>
                    </tr>
                    <tr>
                        <td>Shabbir</td>
                        <td>7000</td>
                    </tr>
                </table>
            </td>
            <td>$10,000</td>
        </tr>
    </table>
</body>
</html>

Styling Nested Tables #

You can style both the outer and inner tables separately using CSS. The following code demonstrates how to apply styles to a nested table.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* Styles for both tables */
        table {
            border-collapse: collapse;
            width: 100%;
        }

        td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        /* Specific styles for the inner table */
        table table {
            border: 2px solid #3498db;
            width: 80%;
            margin: 10px auto;
        }

        table table td {
            background-color: #ecf0f1;
            border: 1px solid #bdc3c7;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th>Employees</th>
            <th>Net Worth</th>
        </tr>
        <tr>
            <td>
                <table border="1">
                    <tr>
                        <th>Name</th>
                        <th>Salary</th>
                    </tr>
                    <tr>
                        <td>Ramesh</td>
                        <td>5000</td>
                    </tr>
                    <tr>
                        <td>Shabbir</td>
                        <td>7000</td>
                    </tr>
                </table>
            </td>
            <td>$10,000</td>
        </tr>
    </table>
</body>
</html>

Images in Nested Tables #

You can also embed images within nested tables to create organized image galleries or catalogs. Here is an example showing how to use images inside a nested table.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        table {
            border-collapse: collapse;
        }
        img {
            height: 70px;
            width: 200px;
        }
    </style>
</head>
<body>
    <table border="1" width="100%">
        <tr>
            <th>Image</th>
            <th>Name</th>
        </tr>
        <tr>
            <td><img src="/images/logo.png" alt="Logo"></td>
            <td>LOGO</td>
        </tr>
        <tr>
            <td><img src="/html/images/html.jpg" alt="HTML5"></td>
            <td>HTML5</td>
        </tr>
    </table>
</body>
</html>

Benefits of Nested Tables #

  1. Organized Layouts: Nested tables enable the creation of structured and organized data layouts.
  2. Cell Customization: Each cell can contain a variety of content such as text, images, or additional tables.
  3. Complex Designs: Nested tables provide flexibility for achieving intricate webpage designs.

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment