How to create HTML in table inside td?

Question

I have created a HTML where i have used table inside table.

I don't understand why blank td is not taking the space and there seems some size difference how can I fix it

Demo

Final Look

<div>
  <div style="text-align: left; position: absolute; left: 0;">
    Now add the results.
  </div>
  &nbsp;<br /><br />
  <div class="old-space-indent">
    <div style="font-size: 125%;">
      <table>
        <tbody>
          <tr>
            <td>
              <table class="beautiful-line">
                <tbody>
                  <tr height="2">
                    <td></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td></td>
                    <td>2</td>
                    <td>3</td>
                  </tr>
                  <tr height="2">
                    <td></td>
                  </tr>
                  <tr>
                    <td>×</td>
                    <td></td>
                    <td>3</td>
                    <td>2</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <tr>
            <td>
              <table class="beautiful-line">
                <tbody>
                  <tr height="2">
                    <td></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td></td>
                    <td>
                      <span style="color: #5050ff;"><b>4</b></span>
                    </td>
                    <td>
                      <span style="color: #5050ff;"><b>6</b></span>
                    </td>
                  </tr>
                  <tr height="2">
                    <td></td>
                  </tr>
                  <tr>
                    <td>+</td>
                    <td>
                      <span style="color: #5050ff;"><b>6</b></span>
                    </td>
                    <td>
                      <span style="color: #5050ff;"><b>9</b></span>
                    </td>
                    <td>
                      <span style="color: #5050ff;"><b>0</b></span>
                    </td>
                  </tr>
                </tbody>
              </table>
              <table>
                <tbody>
                  <tr height="4">
                    <td></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>
                      <span style="color: green;"><b>7</b></span>
                    </td>
                    <td>
                      <span style="color: green;"><b>3</b></span>
                    </td>
                    <td>
                      <span style="color: green;"><b>6</b></span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <br /><br />
</div>

So i started learning html and I've come upon this multiplication html which I saw in image. I even created that but look and feel does not matches the image

Answer 1

The tds do not take up space because there is no content. This is normal, and also the same in the example.

The space you're talking about might be from the 'headings' in the sample, which have 2 breaks after them. (?)

<div class="pg-multiplication">
    <div>Multiply:
        <br><br>      <-- here?