Nested Lists, Table and Nested Table

List of Contents

Nested Listed
Table
Nested Table

1.Nested Listed

A nested list means placing one list inside another list. This is useful when you want sub-points under a main point.

Example (HTML nested list):

    <!DOCTYPE html>
    <html>
    <body>
        <h2>Nested List Example</h2>
        <ul>
            <li>Programming Languages
                <ul>
                    <li>C</li>
                    <li>C++</li>
                    <li>Python</li>
                </ul>
            </li>
            <li>Web Technologies
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JavaScript</li>
                </ul>
            </li>
        </ul>
    </body>
    </html>

Nested List Example (Rendered)

Programming Languages
- C
- C++
- Python
Web Technologies
- HTML
- CSS
- JavaScript

👉 Here, the outer list contains "Programming Languages" and "Web Technologies".
Each of those has an inner list.

2.Table

HTML Table Example

A table in HTML is used to display data in rows and columns. Tables are created using the <table> tag, with rows defined by <tr>, headers by <th>, and cells by <td>.

Example:

    <table border="1">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Vivek</td>
            <td>22</td>
        </tr>
        <tr>
            <td>Amit</td>
            <td>25</td>
        </tr>
    </table>

Table Example (Rendered)

Name	Age
Vivek	22
Amit	25

2.Nested Table

A nested table means placing one table inside a cell of another table. This is useful when you need a complex layout.

Example (HTML nested table):

    <!DOCTYPE html>
    <html>
    <body>
        <h2>Nested Table Example</h2>
        <table border="1" cellpadding="5">
            <tr>
                <th>Name</th>
                <th>Details</th>
            </tr>
            <tr>
                <td>Vivek</td>
                <td>
                    <table border="1" cellpadding="3">
                        <tr>
                            <th>Age</th>
                            <th>City</th>
                        </tr>
                        <tr>
                            <td>22</td>
                            <td>Delhi</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
    </html>

Nested Table Example (Rendered)

Name

Details

Vivek

Age	City
22	Delhi

👉 Here, the main table has 2 columns: "Name" and "Details".
Inside the "Details" column, we placed another table.

✅ Summary:

Nested list = list inside another list.

Nested table = table inside another table’s cell.

Video for better understand