How to make the browser render the <span> with some spaces in the text?

Asked

Viewed 111 times

-5

I have a <div> which will be used to store information. I want to make a kind of "table", formatting the texts and values so that they are more or less like this:

Hot Dog    2,99
Pizza         7
Carro     91000
Lasanha Sd.  13

It is a very crude example but it is in this format that I want my text. To accomplish this task, I tried to use the code below:

const info = document.getElementById("info");
info.innerHTML = "";

const totalEpisodes = `<span>${getTotalEpisodesWatched(list).padStart(10)}</span><br/>`;
const meanScore = `<span>${getMeanScore(list).padStart(10)}</span><br/>`;

info.innerHTML += "Total Episodes:".padEnd(15) + totalEpisodes;
info.innerHTML += "Mean Score:".padEnd(15) + meanScore;

The problem is that when I created this code, I completely forgot that the spaces would not appear in the final result. I know I can use the &nbsp; to generate a TAB but what I really need is blank spacing to perform the formatting properly.

So my question is: how can I make the browser render the spaces in the element?

html css blank-space
  • 3

    Wouldn’t it be better to use a table or grid for that? Lines may break and lose formatting, and if your site is rendered with a non-standard font it will get weird.

  • 2

    Just for the record &nbsp; is not a tab. Also, because you do not add a code snippet?

  • @user140828 yes I thought of using a <table>, but I don’t want those rows in the table and I don’t want that default formatting of it. If it’s to use a <table> I want the table to have the face of a <div> (no line, edge, or any other detail) and with the formatting I showed in the question.

  • @Luizfelipe if I were to wear one code snippet to represent what I try to do in the code, it would be too big a question as I would need to put HTML, etc, etc. So I put only the part of JS code that is most important.

  • And as I mentioned in the comment above, I don’t mind using <table> as long as I get the formatting I want. But still as the question is about rendering blank spaces in the browser, it would be good an answer on this to help other people and not just me.

  • Blank space is &nbsp;. Two white spaces &ensp;. Four white spaces &emsp;

  • He came to see this: https://answall.com/q/421374/112052?

  • You saw this (2): https://answall.com/questions/454404/element-alignments-no-html-e-css/454432#454432

  • @hkotsubo was exactly what I was looking for. I did not find on the site before this question because the title of the question did not make it clear that it was about white spaces in HTML.

Show 4 more comments

2 answers

4


To be honest with you, there’s no point in you wanting to reinvent the wheel. If you simply want to display information in a tabulated form, the element <table> is ideal for what you need by simply formatting some cells with the property text-align, see:

#info tr td:last-child {
  text-align: right;
}
<table id="info">
  <tr>
    <td>Hot Dog</td>
    <td>2,99</td>
  </tr>
  <tr>
    <td>Pizza</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Carro</td>
    <td>91000</td>
  </tr>
  <tr>
    <td>Lasanha Sd.</td>
    <td>13</td>
  </tr>
</table>

Note that by default the table shows no borders.

Not only are you using the proper element for this, you don’t need to manage the logic of spaces in Javascript, leaving it up to CSS.

There are a few cases where tables are not ideal to show tabulated data (like recreating an Excel-style spreadsheet), but I don’t think this simple table of information is one of them. :)

  • Luiz the CSS code is not working here. I copied and pasted the CSS code of the answer but it does not affect the <td>.

  • @Jeanextreme002 Have you modified HTML? It just doesn’t work...?

  • It just doesn’t work. And one thing that’s got me all worked up is that tr are inside the <tbody> that is inside the <table>. I’m entering the data into the table this way table.innerHTML += <tr><td>Dado:</td><td>${dado}</td></tr>;

  • You came to see if CSS works on snippet up? Why is here working.

  • I managed to make it work. I was in trouble for some reason because I created the <tr> with innerHTML instead of using the .createElement. Thank you Luiz.

  • Luiz the code works but the tr does not have the same table width. So the data is not "touching" the right side of the table as it should be. What should I do?

  • @Jeanextreme002, in this case I think you better open another question to try to exemplify a little better your problem. Another option is to go to the chat. :-)

  • I think if I open another question I’ll take a rain of downvote that neither ;p Better go to the same chat.

Show 3 more comments

-3

Forget about formatting your code! The right thing is to use CSS. Code is for processing; CSS is for formatting. But, as I know that every programmer is stubborn, if you want much use your code the way you wrote it, you can always use the <pre> ... </pre>.

Browser other questions tagged html css blank-space

You are not signed in. Login or sign up in order to post.