Html table tr inside td

Question

I am trying to create a table in HTML  I have the following design to create  I had added a  lt tr gt  inside the  lt td gt  but somehow the table is not created as per the design     Can anyone suggest me how I can achieve this   I am unable to create Name1   Price1 sections

User · Answer

Try this code  x000D   x000D   lt table border  1  width  100   gt     lt tr gt       lt td gt Name 1 lt  td gt       lt td gt Name 2 lt  td gt       lt td colspan  2  gt Name 3 lt  td gt       lt td gt Name 4 lt  td gt     lt  tr gt      lt tr gt       lt td rowspan  3  gt ITEM 1 lt  td gt       lt td rowspan  3  gt ITEM 2 lt  td gt       lt td gt name lt  td gt       lt td gt price lt  td gt       lt td rowspan  3  gt ITEM 4 lt  td gt     lt  tr gt     lt tr gt       lt td gt name lt  td gt       lt td gt price lt  td gt     lt  tr gt     lt tr gt       lt td gt name lt  td gt       lt td gt price lt  td gt     lt  tr gt   lt  table gt  x000D   x000D   x000D

User · Answer

You can solve without nesting tables    x000D   x000D   lt table border  1  gt  x000D       lt thead gt  x000D           lt tr gt  x000D               lt th gt ABC lt  th gt  x000D               lt th gt ABC lt  th gt  x000D               lt th colspan  2  gt ABC lt  th gt  x000D               lt th gt ABC lt  th gt  x000D           lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D           lt tr gt  x000D               lt td rowspan  4  gt Item1 lt  td gt  x000D               lt td rowspan  4  gt Item1 lt  td gt  x000D               lt td colspan  2  gt Item1 lt  td gt  x000D               lt td rowspan  4  gt Item1 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Name1 lt  td gt  x000D               lt td gt Price1 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Name2 lt  td gt  x000D               lt td gt Price2 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Name3 lt  td gt  x000D               lt td gt Price3 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Item2 lt  td gt  x000D               lt td gt Item2 lt  td gt  x000D               lt td colspan  2  gt Item2 lt  td gt  x000D               lt td gt Item2 lt  td gt  x000D           lt  tr gt  x000D       lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Just add a new table in the td you want  Example  http   jsfiddle net AbE3Q   x000D   x000D   lt table border  1  gt     lt tr gt       lt td gt ABC lt  td gt       lt td gt ABC lt  td gt       lt td gt ABC lt  td gt       lt td gt ABC lt  td gt     lt  tr gt     lt tr gt       lt td gt Item1 lt  td gt       lt td gt Item2 lt  td gt       lt td gt         lt table border  1  gt           lt tr gt             lt td gt qweqwewe lt  td gt             lt td gt qweqwewe lt  td gt           lt  tr gt           lt tr gt             lt td gt qweqwewe lt  td gt             lt td gt qweqwewe lt  td gt           lt  tr gt           lt tr gt             lt td gt qweqwewe lt  td gt             lt td gt qweqwewe lt  td gt           lt  tr gt         lt  table gt       lt  td gt       lt td gt Item3 lt  td gt     lt  tr gt     lt tr gt     lt  tr gt     lt tr gt     lt  tr gt     lt tr gt     lt  tr gt     lt tr gt     lt  tr gt   lt  table gt  x000D   x000D   x000D

User · Answer

You cannot put tr inside td  You can see the allowed content from MDN web docs documentation about td  The relevant information is in the permitted content section   Another way to achieve this is by using colspan and rowspan  Check this fiddle   HTML    lt table width  100   gt    lt tr gt     lt td gt Name 1 lt  td gt     lt td gt Name 2 lt  td gt     lt td colspan  2  gt Name 3 lt  td gt     lt td gt Name 4 lt  td gt    lt  tr gt     lt tr gt     lt td rowspan  3  gt ITEM 1 lt  td gt     lt td rowspan  3  gt ITEM 2 lt  td gt     lt td gt name1 lt  td gt     lt td gt price1 lt  td gt     lt td rowspan  3  gt ITEM 4 lt  td gt    lt  tr gt     lt tr gt     lt td gt name2 lt  td gt     lt td gt price2 lt  td gt    lt  tr gt    lt tr gt     lt td gt name3 lt  td gt     lt td gt price3 td gt    lt  tr gt   lt  table gt    And some CSS   table       border-collapse  collapse           td      border  1px solid  000000

User · Answer

Full Example   x000D   x000D   lt table border  1  style  width 100    gt     lt tr gt       lt td gt ABC lt  td gt       lt td gt ABC lt  td gt       lt td gt ABC lt  td gt       lt td gt ABC lt  td gt     lt  tr gt     lt tr gt       lt td gt Item 1 lt  td gt       lt td gt Item 1 lt  td gt       lt td gt         lt table border  1  style  width  100    gt           lt tr gt             lt td gt Name 1 lt  td gt             lt td gt Price 1 lt  td gt           lt  tr gt           lt tr gt             lt td gt Name 2 lt  td gt             lt td gt Price 2 lt  td gt           lt  tr gt           lt tr gt             lt td gt Name 3 lt  td gt             lt td gt Price 3 lt  td gt           lt  tr gt         lt  table gt       lt  td gt       lt td gt Item 1 lt  td gt     lt  tr gt     lt tr gt       lt td gt Item 2 lt  td gt       lt td gt Item 2 lt  td gt       lt td gt Item 2 lt  td gt       lt td gt Item 2 lt  td gt     lt  tr gt     lt tr gt       lt td gt Item 3 lt  td gt       lt td gt Item 3 lt  td gt       lt td gt Item 3 lt  td gt       lt td gt Item 3 lt  td gt     lt  tr gt   lt  table gt  x000D   x000D   x000D

User · Answer

x000D   x000D   lt table border  1px   width  100   gt     lt tr align  center  gt       lt td gt Product lt  td gt       lt td gt quantity lt  td gt       lt td gt Price lt  td gt       lt td gt Totall lt  td gt     lt  tr gt     lt tr align  center  gt       lt td gt Item-1 lt  td gt       lt td gt Item-1 lt  td gt       lt td gt         lt table border  1px   width  100   gt           lt tr align  center  gt             lt td gt Name1 lt  td gt             lt td gt Price1 lt  td gt           lt  tr gt           lt tr align  center  gt             lt td gt Name2 lt  td gt             lt td gt Price2 lt  td gt           lt  tr gt           lt tr align  center  gt             lt td gt Name3 lt  td gt             lt td gt Price3 lt  td gt           lt  tr gt           lt tr gt             lt td gt Name4 lt  td gt             lt td gt Price4 lt  td gt           lt  tr gt         lt  table gt       lt  td gt       lt td gt Item-1 lt  td gt     lt  tr gt     lt tr align  center  gt       lt td gt Item-2 lt  td gt       lt td gt Item-2 lt  td gt       lt td gt Item-2 lt  td gt       lt td gt Item-2 lt  td gt     lt  tr gt     lt tr align  center  gt       lt td gt Item-3 lt  td gt       lt td gt Item-3 lt  td gt       lt td gt Item-3 lt  td gt       lt td gt Item-3 lt  td gt     lt  tr gt   lt  table gt  x000D   x000D   x000D

User · Answer

You can check this just use table inside table like this

_x000D_

<!DOCTYPE html>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }
  </style>
</head>

<body>
  <table style="width:100%">
    <tr>
      <th>ABC</th>
      <th>ABC</th>
      <th>ABC</th>
      <th>ABC</th>
    </tr>
    <tr>
      <td>Item1</td>
      <td>Item1</td>
      <td>
        <table style="width:100%">
          <tr>
            <td>name1</td>
            <td>price1</td>
          </tr>
          <tr>
            <td>name2</td>
            <td>price2</td>
          </tr>
          <tr>
            <td>name3</td>
            <td>price3</td>
          </tr>
        </table>
      </td>
      <td>item1</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
      <td>G</td>
      <td>H</td>
    </tr>
    <tr>
      <td>E</td>
      <td>R</td>
      <td>T</td>
      <td>T</td>
    </tr>
  </table>
</body>

</html>

_x000D_

User · Answer

Put another table inside the td element like this    lt table gt       lt tr gt                   lt  tr gt       lt tr gt           lt td gt ABC lt  td gt           lt td gt ABC lt  td gt           lt td gt               lt table gt                   lt tr gt                       lt td gt name1 lt  td gt                       lt td gt price1 lt  td gt                   lt  tr gt                   lt  table gt           lt  td gt           lt td gt ABC lt  td gt       lt  tr gt       lt  table gt

User · Answer

You must add a full table inside the td    x000D   x000D       lt table gt  x000D         lt tr gt  x000D           lt td gt  x000D             lt table gt  x000D               lt tr gt  x000D                 lt td gt  x000D                      x000D                 lt  td gt  x000D               lt  tr gt  x000D             lt  table gt  x000D           lt  td gt  x000D         lt  tr gt  x000D       lt  table gt  x000D   x000D   x000D

[html] Html table tr inside td

The answer is

Examples related to html

Examples related to html-table

Tags