Chaitanya Blog by Chaitanya

How to Nested Tables in HTML

꧁ Digital Diary ༒Largest Writing Community༒꧂


Meri Kalam Se Digital Diary Create a free account




 

How to Nested Tables in HTML

Nesting tables simply means making a Table inside another Table. Nesting tables can lead to complex tables layouts, which are both visually interesting and have the potential of introducing errors depends on its nesting nature.

Tables within Tables

Nested Table always need to be placed between < td > ... < /td > tags of the outer container Table. You can format nested tables as you would format any other HTML Table.

The following HTML code create a Table with one row and two column and inside the second column again create another table (nested table) with two rows.

Tables inside a Table

CellNesting tables can lead to more complex tables, inner Table should begin and end in the same cell of the outer container table. You can nested tables any number of levels. The following HTML code create a four level nested tables.

 

HTML Source Code :

<html>
<head>
<title>  </title>
</head>
<body>


                
                    
                    
            <table border="20" bordercolor="red" style="width:100%; height:100px;" cellspacing="18px">
                <tr>
                    
                        <td style="width:35px; height:80px;" > 
                        
                                    
                        <table border="20" bordercolor="blue" style="width:100%; height:100px;" cellspacing="18px">
                        <tr>
                        <td>
             <table border="20" bordercolor="purple" style="width:100%; height:100px;" cellspacing="18px">
                        <tr>
                        <td>
              <table border="20" bordercolor="yellow" style="width:100%; height:100px;" cellspacing="18px">
                        <tr>
                        <td>
                    
                        </td>   </tr>   </table>
                        </td>   </tr>   </table>
                        </td>   </tr>   </table>
                    
           <td style="width:35px; height:80px;" > 
    <table border="20" bordercolor="blue" style="width:100%; height:100px;" cellspacing="18px">
                        <tr>
                        <td>
                        
             <table border="20" bordercolor="purple" style="width:100%; height:100px;" cellspacing="18px">
                        <tr>
                        <td>             
               <table border="20" bordercolor="yellow" style="width:100%; height:100px;" cellspacing="18px">
                        <tr>
                        <td>
                    
                        </td>   </tr>   </table>
                        </td>   </tr>   </table>
                        </td>   </tr>   </table>
           <td style="width:35px; height:80px;" ><table border="20" bordercolor="blue" style="width:100%; height:100px;" cellspacing="18px">
                        <tr>
                        <td>
     <table border="20" bordercolor="purple" style="width:100%; height:100px;" cellspacing="18px">
                        <tr>
                        <td>
                        
            <table border="20" bordercolor="yellow" style="width:100%; height:100px;" cellspacing="18px">
                        <tr>
                        <td>
                    
                        </td>   </tr>   </table>
                        </td>   </tr>   </table>
                        </td>   </tr>   </table>
     </td> </td> </td>    </tr>

</table>          
 </body>
</html>

 

 




Leave a comment

We are accepting Guest Posting on our website for all categories.


Comments

Verification Level

wefru
Verification Scale
50%

Image Advertisment

wefru

Wefru Services

I want to Hire a Professional..