131

I am trying to create a table in HTML. I have the following design to create. I had added a <tr> inside the <td> but somehow the table is not created as per the design.

enter image description here

Can anyone suggest me how I can achieve this?

I am unable to create Name1 | Price1 sections.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Scorpion
  • 6,831
  • 16
  • 75
  • 123

11 Answers11

215

You must add a full table inside the td 

    <table>
      <tr>
        <td>
          <table>
            <tr>
              <td>
                ...
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
herrhansen
  • 2,413
  • 1
  • 14
  • 15
  • 3
    Is it possible to add full table inside a td?? I never did that, that's why i am asking this. If it is than its really great – Scorpion Jun 13 '13 at 13:59
  • 4
    you can put almost everything into a td, only html, body and head are not allowed I think – herrhansen Jun 13 '13 at 14:00
  • 1
    Yes, this is exactly what i was scared of. I looked up on google hoping that there was another way out – Giacomo Pigani Feb 20 '14 at 20:16
  • Well as of now, it doesn't throw any error when I put tr s in td, infact I've put many tr s inside some td s because my app renders arrays of objects within some properties, and it works across all browsers, (don't know about IE, as I did not test it in IE), anyone interested can check it out - https://stackblitz.com/edit/angular-u7aman , Note: it is an Angular app, not sure that Angular is behind this behavior. – Hasintha Abeykoon Apr 13 '20 at 05:36
  • Even though it does not throw an error in your browser it is false, and may throw errors in other browsers or circumstances You should always try to use HTML-Elements in their intended use, like not using block-Elements inside of inline-Elements – herrhansen Apr 14 '20 at 15:21
50

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:

<table width="100%">
 <tr>
  <td>Name 1</td>
  <td>Name 2</td>
  <td colspan="2">Name 3</td>
  <td>Name 4</td>
 </tr>

 <tr>
  <td rowspan="3">ITEM 1</td>
  <td rowspan="3">ITEM 2</td>
  <td>name1</td>
  <td>price1</td>
  <td rowspan="3">ITEM 4</td>
 </tr>

 <tr>
  <td>name2</td>
  <td>price2</td>
 </tr>
 <tr>
  <td>name3</td>
  <td>price3/td>
 </tr>
</table>

And some CSS:

table {
    border-collapse: collapse       
}

td {
   border: 1px solid #000000
}
Black
  • 18,150
  • 39
  • 158
  • 271
lavavrik
  • 835
  • 5
  • 11
  • 12
    putting table inside table is totally valid, write a simple html code where you insert a table inside the TD and paste it in the w3 validator: http://validator.w3.org/check You will notice it will passed. all errors are related to the doctype and head missing tags. – Malloc May 08 '14 at 21:08
  • putting a table element inside tr in invalid while putting a table inside a td is valid..you can validate on https://validator.w3.org/check – Lucky May 28 '15 at 14:54
  • 3
    I think the intended meaning here was that a table inside of a table is an odd approach for the scenario, as `colspan` & `rowspan` are intended for solving this problem. – connorbode Aug 14 '15 at 19:26
  • 7
    Not sure why this solution gets so many upvotes. The posted code is utterly opaque without a browser, achieving a visual goal at the expense of the logical relationship that a table is supposed to represent. And, as noted by @Malloc, its first sentence is patently false. – brianpck Feb 17 '16 at 22:52
24

You can solve without nesting tables.

<table border="1">
    <thead>
        <tr>
            <th>ABC</th>
            <th>ABC</th>
            <th colspan="2">ABC</th>
            <th>ABC</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="4">Item1</td>
            <td rowspan="4">Item1</td>
            <td colspan="2">Item1</td>
            <td rowspan="4">Item1</td>
        </tr>
        <tr>
            <td>Name1</td>
            <td>Price1</td>
        </tr>
        <tr>
            <td>Name2</td>
            <td>Price2</td>
        </tr>
        <tr>
            <td>Name3</td>
            <td>Price3</td>
        </tr>
        <tr>
            <td>Item2</td>
            <td>Item2</td>
            <td colspan="2">Item2</td>
            <td>Item2</td>
        </tr>
    </tbody>
</table>
Vishnudev Krishnadas
  • 10,679
  • 2
  • 23
  • 55
WalterV
  • 1,490
  • 2
  • 21
  • 33
9

Full Example:

<table border="1" style="width:100%;">
  <tr>
    <td>ABC</td>
    <td>ABC</td>
    <td>ABC</td>
    <td>ABC</td>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Item 1</td>
    <td>
      <table border="1" style="width: 100%;">
        <tr>
          <td>Name 1</td>
          <td>Price 1</td>
        </tr>
        <tr>
          <td>Name 2</td>
          <td>Price 2</td>
        </tr>
        <tr>
          <td>Name 3</td>
          <td>Price 3</td>
        </tr>
      </table>
    </td>
    <td>Item 1</td>
  </tr>
  <tr>
    <td>Item 2</td>
    <td>Item 2</td>
    <td>Item 2</td>
    <td>Item 2</td>
  </tr>
  <tr>
    <td>Item 3</td>
    <td>Item 3</td>
    <td>Item 3</td>
    <td>Item 3</td>
  </tr>
</table>
nircraft
  • 8,242
  • 5
  • 30
  • 46
Jagu
  • 762
  • 7
  • 17
8

Try this code

<table border="1" width="100%">
  <tr>
    <td>Name 1</td>
    <td>Name 2</td>
    <td colspan="2">Name 3</td>
    <td>Name 4</td>
  </tr>

  <tr>
    <td rowspan="3">ITEM 1</td>
    <td rowspan="3">ITEM 2</td>
    <td>name</td>
    <td>price</td>
    <td rowspan="3">ITEM 4</td>
  </tr>
  <tr>
    <td>name</td>
    <td>price</td>
  </tr>
  <tr>
    <td>name</td>
    <td>price</td>
  </tr>
</table>
nircraft
  • 8,242
  • 5
  • 30
  • 46
Kedar1442
  • 217
  • 2
  • 8
5

Just add a new table in the td you want. Example: http://jsfiddle.net/AbE3Q/

<table border="1">
  <tr>
    <td>ABC</td>
    <td>ABC</td>
    <td>ABC</td>
    <td>ABC</td>
  </tr>
  <tr>
    <td>Item1</td>
    <td>Item2</td>
    <td>
      <table border="1">
        <tr>
          <td>qweqwewe</td>
          <td>qweqwewe</td>
        </tr>
        <tr>
          <td>qweqwewe</td>
          <td>qweqwewe</td>
        </tr>
        <tr>
          <td>qweqwewe</td>
          <td>qweqwewe</td>
        </tr>
      </table>
    </td>
    <td>Item3</td>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
</table>
nircraft
  • 8,242
  • 5
  • 30
  • 46
Correia JPV
  • 610
  • 3
  • 10
  • 25
5

Put another table inside the td element like this.

<table>
    <tr>
        ...
    </tr>
    <tr>
        <td>ABC</td>
        <td>ABC</td>
        <td>
            <table>
                <tr>
                    <td>name1</td>
                    <td>price1</td>
                </tr>
...
            </table>
        </td>
        <td>ABC</td>
    </tr>
...
</table>
Patrick
  • 861
  • 6
  • 12
4

You can check this just use table inside table like this

<!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>
nircraft
  • 8,242
  • 5
  • 30
  • 46
Arman H
  • 1,594
  • 18
  • 22
1

<table border="1px;" width="100%">
  <tr align="center">
    <td>Product</td>
    <td>quantity</td>
    <td>Price</td>
    <td>Totall</td>
  </tr>
  <tr align="center">
    <td>Item-1</td>
    <td>Item-1</td>
    <td>
      <table border="1px;" width="100%">
        <tr align="center">
          <td>Name1</td>
          <td>Price1</td>
        </tr>
        <tr align="center">
          <td>Name2</td>
          <td>Price2</td>
        </tr>
        <tr align="center">
          <td>Name3</td>
          <td>Price3</td>
        </tr>
        <tr>
          <td>Name4</td>
          <td>Price4</td>
        </tr>
      </table>
    </td>
    <td>Item-1</td>
  </tr>
  <tr align="center">
    <td>Item-2</td>
    <td>Item-2</td>
    <td>Item-2</td>
    <td>Item-2</td>
  </tr>
  <tr align="center">
    <td>Item-3</td>
    <td>Item-3</td>
    <td>Item-3</td>
    <td>Item-3</td>
  </tr>
</table>
nircraft
  • 8,242
  • 5
  • 30
  • 46
Azizul Hakim
  • 81
  • 1
  • 6
0

    <table>
      <tr>
        <td>
          <table>
            <tr>
              <td>
                ...
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
naman hazaria
  • 31
  • 1
    You can improve your answer by at least adding an explanation and some info. instead of just pasting a block of code. – Leo Mar 16 '21 at 11:07
0
<!DOCTYPE html>
<html>
<head>
<title>TABLE</title>
<style>
    .rb{
        text-align:right;
        border-collapse:collapse;
        border-right:1px solid black;
        border-bottom:1px solid black;
    }
    .b{
        text-align:right;
        border-collapse:collapse;
        border-bottom:1px solid black;
    }
    .r{

        text-align:right;
        border-collapse:collapse;
        border-right:1px solid black;
    }
    .n{
        text-align:right;
    }
    


    
</style>
</head>
<body>
<table border="1px" cellspacing="0px">
<tr>
    <th>Country</th>
    <th>Population (In Crores)</th>
</tr>
<tr>
    <th>INDIA</th>
    <td>
    <table cellspacing="0px" width="100%">
        <tr>
            <td class="rb">1998</td>
            <td class="b">85</td>
        </tr>
            <tr>
            <td class="rb">1999</td>
            <td class="b">90</td>
        </tr>
            <tr>
            <td class="r">2000</td>
            <td class="n" >100</td>
        </tr>
    </table></td>
</tr>
</table>
</body>
</html>
naman hazaria
  • 31