Html Table Within a Table



  • We can create a table within a table in HTML.
  • First define a parent table then the child table will be declared inside the parent table.
  • The child table will be declared inside the <td> tag of parent table.

Syntax for Table within a Table in HTML

<table>
<tr>
  <td>
     <table> 
         <tr>
           <td> </td>
         </tr>
     </table>
   </td>
 </tr> 
</table>
                       

Sample coding for Table within a Table in HTML

Tryit<!DOCTYPE html>
<html>
   <head>
        <title>Wikitechy HTML table within a table</title>
   </head>
    <body>
        <h2>HTML Table within a table</h2>
        <table>
            <tr>
               <td>Table 1</td>
               <td>Table 1</td>
            </tr>
            <tr>
                <td>Table 1
                    <table>
                        <tr>
                            <td>Table 2 <td>
                            <td>Table 2 <td>
                        </tr>
                        <tr>
                            <td>Table 2 <td>
                            <td>Table 2 <td>
                        </tr>
                    </table>
                </td>
                <td>Table 1</td>
            </tr>
        </table>
    </body>
</html>

Code Explanation for Table within a Table in HTML

code explanation for Table within a Table in HTML

  1. Parent table defined with its border which has two rows and two columns
  2. The Child table is declared inside the parent table’s .

Output for Table within a Table in HTML

Output for Table within a Table in HTML

  1. Output shows Table1 table.
  2. Table2 will be displayed as separate table inside Table1

Browser Support for Table within a Table in HTML

Yes Yes Yes Yes Yes

Related Searches to html table within table