nested table in html – How to an Html Table inside another Table?

nested table in html Examples: A HTML table is a set of all the multiple data that is distributed across rows(tr) and cells(th or td). The nested table in HTML means best creating a grid table on a nice webpage inside another grid table on the same website web page.

here we can learn to Creating nested tables in HTML ( Example with code).

nested table in html

Example

<!DOCTYPE html>  
<html>  
<head>  
<title>   
Example of Nested Table with multiple table 
</title>  
</head>  
<body>  
<table border="4" bordercolor="red">   
<tr>  
<td> Online Website </td>  
<td> Articles 
  
<table border="6" bordercolor="green">  
<tr>  
<td> Laravel </td>  
</tr>  
<tr>  
<td> PHP </td></tr>  
</table>  
</td>  
</tr>  
<tr>  
<td> Welcome </td>  
<td> grettings </td>  
</tr>  
</table>  
</body>  
</html>  

Results:

Online Website Articles

Laravel
PHP
Welcome grettings

Don’t Miss : JQuery Find Nested Parent Child Elements HTML DOM

nested table in html css

Making Coloured Borders

<table border="0" bgcolor="#006600" cellpadding="5" cellspacing="0">
<tr><td>
<table width="100%" border="0" bgcolor="#3d3d3d" cellspacing="0">
<tr><td>
tamilblasters
</td></tr>
</table>
</td></tr>
</table>

Results:

Read Also:  CSS Battle - smallest possible CSS code (Getting Started with CSS Battle)
tamilblasters

<table border="1">
  <tr><th>website header</th><th>blog header</th></tr>
  <tr><td>website 1, blog 1</td><td>website 1, blog 2</td></tr>
  <tr><td>website 2, blog 1</td>
    <td>website 2, blog 2
      <table border="1">
        <tr><th>website header</th><th>blog header</th></tr>
        <tr><td>website 1, blog 1</td><td>website 1, blog 2</td></tr>
        <tr><td>website 2, blog 1</td><td>website 2, blog 2</td></tr>
      </table>
    </td>
  </tr>
</table>

Results:

website header blog header
website 1, blog 1 website 1, blog 2
website 2, blog 1 website 2, blog 2

website header blog header
website 1, blog 1 website 1, blog 2
website 2, blog 1 website 2, blog 2
nested table in html
nested table in html

nested table html bootstrap

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<style>
.table-plain tbody tr,
.table-plain tbody tr:hover,
.table-plain tbody td {
  background-color:transparent;
  border:none;
}
</style>
<table class="table table-bordered table-hover">
  <tr>
    <td>HTML 1</td>
  </tr>
  <tr>
    <td>CSS 2</td>
  </tr>
  <tr>
    <td>
      <table class="table-plain">
        <tr>
          <td>Angular 1a</td>
          <td>Vue 2a</td>
          <td>React 3a</td>
         <tr>
        <tr>
          <td>PHP 1b</td>
          <td>Laravel 2b</td>
          <td>Yii 3b</td>
         <tr>
       </table>
    </td>
  </tr>
  <tr>
    <td>JavaScript 3</td>
  </tr>
 </table>

Results:

HTML 1
CSS 2
Angular 1a Vue 2a React 3a
PHP 1b Laravel 2b Yii 3b
JavaScript 3

nested tables in html5

HTML5 validity of nested tables

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>A nested table</title>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>
                    <table>
                        <tbody>
                            <tr>
                                <td>Pakainfo</td>
                                <td>Guest</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

according to http://validator.w3.org/nu/

html nested table rows : HTML Source Code :

<html>
<body >
  <table border="5" bordercolor="red">
    <tr>
      <td>
        Fisrt Column of Outer Table
      </td>
      <td>
        <table border="5" bordercolor="green">
          <tr>
            <td>
              First row of Inner Table
            </td>
          </tr>
          <tr>
            <td>
              Second row of Inner Table
            </td>
          </tr>
        </table>
      </td>
  </tr>
  </table>
</body>
</html>

Results:

Fisrt Column of Outer Table
First row of Inner Table
Second row of Inner Table

Tables inside a Table Cell

<html>
<body >
  <table border="15" bordercolor = "pink">
    <tr><td>
      <table border="15" bordercolor = "red">
      <tr><td>
        <table border="15" bordercolor = "green">
          <tr><td>
            <table border="15" bordercolor = "black">
              <tr><td>
              </td></tr>
            </table>
          </td></tr>
        </table>
      </td></tr>
      </table>
    </td></tr>
  </table>
</body>
</html>

Results:

HTML Source Code :

<html>
<body >
  <table border="5" bordercolor="green">
    <tr>
    <td >
      <table >
        <tr><td>
        First Nested Table
        </td></tr>
      </table>
    </td>
    <td >
    <table >
      <tr><td>
        <ul>
          <li>Laravel</li>
          <li>PHP</li>
          <li>Angular.js</li>
        </ul>
      </td></tr>
    </table>
    </td>
    </tr>
    <tr>
    <td >
    <table >
      <tr><td>
        <a href="https://www.pakainfo.com/guest-post/">Guest Post</a>
      </td></tr>
    </table>
    </td>
    <td>
      <table >
        <tr><td>
          <img src="https://www.pakainfo.com/web-tools/css-editor.png?v=1">
        </td></tr>
      </table>
    </td>
    </tr>
  </table>
</body>
</html>

Results:

First Nested Table
  • Laravel
  • PHP
  • Angular.js
Guest Post
nested table in html,nested table in html example,nested table in html5,nested table in html using jquery,nested table in html mdn