Preserve White Space - html

Question

I want to preserve white space to keep every column align properly.
But sidebar auto remove any extra space, could someone give me some advise on this.
Google Sidebar
function Test1() {
var lineBrk = "<br />"
var aValues = "```"+lineBrk+
"BLB001| APPLE | O/B | 100.00"+lineBrk+
"AG010 | ORANGE| O/B | 125.25"+lineBrk+
"B123 | KIWI | O/B | 95.00"+lineBrk+
"```"
// Display a modal dialog box with custom HtmlService content.
var htmlOutput = HtmlService
.createHtmlOutput(aValues);
SpreadsheetApp.getUi().showSidebar(htmlOutput);
}

Answer 1

Sidebars are created using the Google Apps Script HTML service, that means that they use html and that is why Serge included a link to a question regarding the use of . Another alternative is to enclose the text lines on <pre> tags.
Below is an adaptation of the code that builds the html output to work on the stack snippet.
var lineBrk = "</pre><br />"
var aValues =
"<pre>BLB001| APPLE | O/B | 100.00"+lineBrk+
"<pre>AG010 | ORANGE| O/B | 125.25"+lineBrk+
"<pre>B123 | KIWI | O/B | 95.00"+lineBrk;
document.write(aValues);

Answer 2

If you're looking to display plaintext, Ruben's answer above would work. If you want some kind of formatting, using simple HTML layout styles will help.
You could interpret your table example as the following HTML:
<div id="table">
<div class="row">
<div class="col">BLB001</div>
<div class="col">Apple</div>
<div class="col">0/B</div>
<div class="col">100.00</div>
</div>
<div class="row">
<div class="col">AG010</div>
<div class="col">Orange</div>
<div class="col">0/B</div>
<div class="col">125.25</div>
</div>
<div class="row">
<div class="col">B123</div>
<div class="col">Kiwi</div>
<div class="col">0/B</div>
<div class="col">95.00</div>
</div>
</div>
Then, either in a style tag or a linked CSS file, set the display:
#table {
display: table;
table-layout:fixed;
width: 300px; /* This could be any width you'd like */
font-family:monospace;
}
.row { display: table-row; }
.col { display: table-cell; }
You can also set borders, if you want them. The nice thing about using this method is that you can populate any number of rows or cells using an apps script loop if your data is variable.
Here's a very simple CodePen demo showing the layout only.