如何在文本里面创建选项卡<tr></tr>

Question

 <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>

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?

Answer 1

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>

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 .

Answer 2

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>