HTML Table one inside another

Question

I have this table and another table inside it. I can't get the table on the right to not take up space on the left of it.

Example: the snipped down "hello world 2" is taking up space and pushing the "hello world 3" down. I want that to stay right under the "hello world 1" and still have the table "hello world 2" on the right side of it. How can I do this ?

<table style="b">
  <tr>
    <td>
      Hello world 1
    </td>
    <td>
      <table style="border:1px solid;width:300px; height:300px;float:right;text-align:center ">
        <tr>
          <td>Hello world 2</td>
        </tr>
      </table>
    </td>

  </tr>
  <tr>
    <td>
      Hello world 3
    </td>
  </tr>
</table>

See this picture I want something like this to happen:

Click to view Image

In this Image the box represent the Hello world 2 and the lines beside it hello world 3

Here is what I get when I use rowspan:

Click to view image

So, should hello world 1 and hello world 3 be like close to each other in new lines like this http://prntscr.com/hfyw0o? — , Nov 27 '17 at 17:23
yes as I showed the image that's how it looks like in a pdf I am trying to have the same type thing — Francis, Nov 27 '17 at 17:25
Did you use the rowspan on the tag which contains the hello world 2 or all of them? You just need to use it on the hello world 2 tag not any of the others. And you have to set the value of the rowspan as many as hello worlds you are printing on the left side of it. — , Nov 27 '17 at 17:52
And of course, use [tables for tabular data **not** layout](https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html). — Jon P, Nov 27 '17 at 22:19

score 0 · Accepted Answer · 2017-11-27T18:23:55.257

0

Are you referring to this perhaps? Make use of rowspan or colspan to merge rows or columns according to your need like shown below.

rowspan is used when you need to merge rows to merge it into a single column. In this case, the right "hello world 2" cell has been formed by merging both the first tr row and second tr row using rowspan="2"

<table style="b">
  <tr>
    <td>
      <table>
        <tr>
          <td>
            Hello world 1
          </td>
        </tr>
        <tr>
          <td>
            Hello world 2
          </td>
        </tr>
        <tr>
          <td>
            Hello world 4
          </td>
        </tr>
        <tr>
          <td>
            Hello world 5
          </td>
        </tr>
        <tr>
          <td>
            Hello world 5
          </td>
        </tr>
        <tr>
          <td>
            Hello world 5
          </td>
        </tr>
        <tr>
          <td>
            Hello world 5
          </td>
        </tr>
        <tr>
          <td>
            Hello world 5
          </td>
        </tr>
        <tr>
          <td>
            Hello world 5
          </td>
        </tr>
      </table>
    </td>
    <td>
      <table style="border:1px solid;width:300px; height:300px;float:right;text-align:center ">
        <tr>
          <td>Hello world 3</td>
        </tr>
      </table>
    </td>
</table>

Notes- Modifications made to the previous submition. You can modify it depending on the number of lines you need on the left hand side and right hand side.

edited Nov 27 '17 at 18:23

answered Nov 27 '17 at 16:47

Did not work the Hello world is still down there its got to be really close to the hello world 1 ColSpan let me try that – Francis Nov 27 '17 at 16:54
Can you maybe draw up in paint or something for exactly showing how you want the table to look like and post a screenshot of that ? Your question hasn't made it clear. – Nov 27 '17 at 16:55
Sure let me send a screen shot with it – Francis Nov 27 '17 at 16:58
I have added a example pf what I am looking for . – Francis Nov 27 '17 at 17:08
Modified the code according to your example. Check it out – Nov 27 '17 at 17:39
This worked! Thanks! I had to re-do every thing in that table – Francis Nov 27 '17 at 18:03
@Francis No problem. – Nov 27 '17 at 18:22

Aaron · Answer 2 · 2017-11-27T17:52:33.917

I think you're trying to achive the following?

You need in use rowspan as you're making the current column span the rows.

For every row you would like the td to span update the rowspan property.

table,
table tr > * {
  vertical-align: top;
  table-layout: fixed;
  padding: 1rem;
}

td table {
  border: 1px solid;
  width: 300px;
  height: 300px;
  text-align: center
}

<table>
  <tr>
    <th>Row title</th>
    <td>
      Hello world 1
    </td>
    <td rowspan="5">
      <table>
        <tr>
        <th>Row title</th>
          <td>Hello world 2</td>
        </tr>
        <tr>
        <th>Row title</th>
          <td>Hello world 2</td>
        </tr>
        <tr>
        <th>&nbsp;</th>
          <td>Hello world 2</td>
        </tr>
      </table>
    </td>

  </tr>
  <tr>
    <th>Row title</th>
    <td>
      Hello world 3
    </td>
  </tr>
  <tr>
    <th>Row title</th>
    <td>
      Hello world 4
    </td>
  </tr>
  <tr>
    <th>Row title</th>
    <td>
      Hello world 3
    </td>
  </tr>
  <tr>
    <th>&nbsp;</th>
    <td>
      Hello world 5
    </td>
  </tr>
</table>

That is what I answered first but he requires them to look like what he has posted in the question. — , Nov 27 '17 at 17:37
I will add another picture what I get after using a `rowspan` — Francis, Nov 27 '17 at 17:40

HTML Table one inside another

2 Answers2