Html table tr inside td

104

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.

This question is tagged with html html-table

~ Asked on 2013-06-13 13:54:16

The Best Answer is


176

You must add a full table inside the td

_x000D_
_x000D_
    <table>_x000D_
      <tr>_x000D_
        <td>_x000D_
          <table>_x000D_
            <tr>_x000D_
              <td>_x000D_
                ..._x000D_
              </td>_x000D_
            </tr>_x000D_
          </table>_x000D_
        </td>_x000D_
      </tr>_x000D_
    </table>
_x000D_
_x000D_
_x000D_

~ Answered on 2013-06-13 13:57:26


41

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
}

~ Answered on 2013-06-13 14:00:22


Most Viewed Questions: