<tr>
    <td>Where to go if sick? 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3 minuts ago</td>
</tr>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I am trying building the website but I am not sure how I can make a space between "sick" and "3minutes ago". I found out   is a tab in HTML but I am pretty sure there is a simpler way to do this. Can anyone tell me how to do it?

CodePudding user response：

Set a width on your td element, then give it display: flex and justify-content: space-between.

td {
  display: flex;
  width: 400px;
  justify-content: space-between;
}

<table>
  <tr>
    <td>
      <span>Where to go if sick?</span>
      <span>"3 minutes ago"</span>
    </td>
  </tr>
</table>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Flexbox is a great tool to let the browser decide how things should be laid out, instead of giving explicit values to everything. See the MDN docs on flexbox.

The reason I added span to each text snippet is so that there are 2 discrete child elements of the td so flexbox knows which elements to put space-between.

Another Solution:

If you are unable to set a fixed width on your td element, you can achieve the same effect using flexbox's gap property.

td {
  display: flex;
  gap: 4rem;
}

<table>
  <tr>
    <td>
      <span>Where to go if sick?</span>
      <span>"3 minutes ago"</span>
    </td>
  </tr>
</table>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Does it have to be a table? If so, you can use padding:

<table style="border-collapse: collapse">
  <tr>
   <td style="padding-right: 25px">
       Where to go if sick?
   </td>
   <td>
      "3 minuts ago"
   </td>
  </tr>
</table>

Also you can add child elements into td and set margin:

<tr>
  <td>
   <span style="margin-right: 25px">Where to go if sick?</span>
   <span>"3 minuts ago"</span>
  </td>
</tr> 

  

If you don't need a table. Just add margin-right:

<p><span style="margin-right: 25px">Where to go if sick?</span> "3 minuts ago"</p>