CloseTag | الشروحات | HTML Introduction | مقدمة في لغة ال HTML | العناصر الداخلية لعنصر table في لغة HTML | HTML Table Nested Elements

<!DOCTYPE html>
<html lang="en">
<head>  
    <title>Nested Table</title>
</head>
<body>
  <h1 align="center">Nested Table</h1> 
   <!--Start Main Table-->
   <table border="1" align="center"> 
    <caption>Caption Main Table</caption>
    <tr>
      <th >Main Table Heading 1</th>
      <th>Main Table Heading 2</th>
      <th>Main Table Heading 3</th>
      <th>Main Table Heading 4</th>      
    </tr>
    <tr>
      <td>Main Table Data 1</td>
      <td>Main Table Data 2</td>
      <td>Main Table Data 3</td>
      <td>Main Table Data 4</td>
    </tr>
    <tr>
      <td>Main Table Data 1</td>
      <td>Main Table Data 2</td>
      <td>Main Table Data 3</td>
      <td>Main Table Data 4</td>
    </tr>
    <tr>
      <td>Main Table Data 1</td>
      <td>
         <!--Start Nested Table-->
        <table border="1">
          <caption>Caption Nested Table</caption>
          <tr>
            <th >Nested Table Heading 1</th>
            <th>Nested Table Heading 2</th>
            <th>Nested Table Heading 3</th>
          </tr>
          <tr>
            <td>Nested Table Data 1</td>
            <td>Nested Table Data 2</td>
            <td>Nested Table Data 3</td>
          </tr>
          <tr>
            <td>Nested Table Data 1</td>
            <td>Nested Table Data 2</td>
            <td>Nested Table Data 3</td>
          </tr>
          </table>
          <!--End Nested Table-->
      </td>
      <td>Main Table Data 3</td>
      <td>Main Table Data 4</td>
    </tr>
 
  </table>
  <!--End  Main Table-->
  </body>
  </html>

PCFET0NUWVBFIGh0bWw+DQo8aHRtbCBsYW5nPSJlbiI+DQo8aGVhZD4gIA0KICAgIDx0aXRsZT5OZXN0ZWQgVGFibGU8L3RpdGxlPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4gOjotd2Via2l0LXNjcm9sbGJhcnt3aWR0aDo3cHg7aGVpZ2h0OjdweDt9Ojotd2Via2l0LXNjcm9sbGJhci10cmFja3tiYWNrZ3JvdW5kOiNmZmY7fTo6LXdlYmtpdC1zY3JvbGxiYXItdGh1bWJ7Ym9yZGVyLXJhZGl1czo1cHg7YmFja2dyb3VuZDojMmY0NWZmO308L3N0eWxlPjwvaGVhZD4NCjxib2R5Pg0KICA8aDEgYWxpZ249ImNlbnRlciI+TmVzdGVkIFRhYmxlPC9oMT4gDQogICA8IS0tU3RhcnQgTWFpbiBUYWJsZS0tPg0KICAgPHRhYmxlIGJvcmRlcj0iMSIgYWxpZ249ImNlbnRlciI+IA0KICAgIDxjYXB0aW9uPkNhcHRpb24gTWFpbiBUYWJsZTwvY2FwdGlvbj4NCiAgICA8dHI+DQogICAgICA8dGggPk1haW4gVGFibGUgSGVhZGluZyAxPC90aD4NCiAgICAgIDx0aD5NYWluIFRhYmxlIEhlYWRpbmcgMjwvdGg+DQogICAgICA8dGg+TWFpbiBUYWJsZSBIZWFkaW5nIDM8L3RoPg0KICAgICAgPHRoPk1haW4gVGFibGUgSGVhZGluZyA0PC90aD4gICAgICANCiAgICA8L3RyPg0KICAgIDx0cj4NCiAgICAgIDx0ZD5NYWluIFRhYmxlIERhdGEgMTwvdGQ+DQogICAgICA8dGQ+TWFpbiBUYWJsZSBEYXRhIDI8L3RkPg0KICAgICAgPHRkPk1haW4gVGFibGUgRGF0YSAzPC90ZD4NCiAgICAgIDx0ZD5NYWluIFRhYmxlIERhdGEgNDwvdGQ+DQogICAgPC90cj4NCiAgICA8dHI+DQogICAgICA8dGQ+TWFpbiBUYWJsZSBEYXRhIDE8L3RkPg0KICAgICAgPHRkPk1haW4gVGFibGUgRGF0YSAyPC90ZD4NCiAgICAgIDx0ZD5NYWluIFRhYmxlIERhdGEgMzwvdGQ+DQogICAgICA8dGQ+TWFpbiBUYWJsZSBEYXRhIDQ8L3RkPg0KICAgIDwvdHI+DQogICAgPHRyPg0KICAgICAgPHRkPk1haW4gVGFibGUgRGF0YSAxPC90ZD4NCiAgICAgIDx0ZD4NCiAgICAgICAgIDwhLS1TdGFydCBOZXN0ZWQgVGFibGUtLT4NCiAgICAgICAgPHRhYmxlIGJvcmRlcj0iMSI+DQogICAgICAgICAgPGNhcHRpb24+Q2FwdGlvbiBOZXN0ZWQgVGFibGU8L2NhcHRpb24+DQogICAgICAgICAgPHRyPg0KICAgICAgICAgICAgPHRoID5OZXN0ZWQgVGFibGUgSGVhZGluZyAxPC90aD4NCiAgICAgICAgICAgIDx0aD5OZXN0ZWQgVGFibGUgSGVhZGluZyAyPC90aD4NCiAgICAgICAgICAgIDx0aD5OZXN0ZWQgVGFibGUgSGVhZGluZyAzPC90aD4NCiAgICAgICAgICA8L3RyPg0KICAgICAgICAgIDx0cj4NCiAgICAgICAgICAgIDx0ZD5OZXN0ZWQgVGFibGUgRGF0YSAxPC90ZD4NCiAgICAgICAgICAgIDx0ZD5OZXN0ZWQgVGFibGUgRGF0YSAyPC90ZD4NCiAgICAgICAgICAgIDx0ZD5OZXN0ZWQgVGFibGUgRGF0YSAzPC90ZD4NCiAgICAgICAgICA8L3RyPg0KICAgICAgICAgIDx0cj4NCiAgICAgICAgICAgIDx0ZD5OZXN0ZWQgVGFibGUgRGF0YSAxPC90ZD4NCiAgICAgICAgICAgIDx0ZD5OZXN0ZWQgVGFibGUgRGF0YSAyPC90ZD4NCiAgICAgICAgICAgIDx0ZD5OZXN0ZWQgVGFibGUgRGF0YSAzPC90ZD4NCiAgICAgICAgICA8L3RyPg0KICAgICAgICAgIDwvdGFibGU+DQogICAgICAgICAgPCEtLUVuZCBOZXN0ZWQgVGFibGUtLT4NCiAgICAgIDwvdGQ+DQogICAgICA8dGQ+TWFpbiBUYWJsZSBEYXRhIDM8L3RkPg0KICAgICAgPHRkPk1haW4gVGFibGUgRGF0YSA0PC90ZD4NCiAgICA8L3RyPg0KIA0KICA8L3RhYmxlPg0KICA8IS0tRW5kICBNYWluIFRhYmxlLS0+DQogIDwvYm9keT4NCiAgPC9odG1sPg==