I had no clue, but figured I would try. I opened an Excel spreadsheet, copied his data into a small table, copied it, and put it here using the Preformateed Text icon.
Which isn’t what I was hoping for. I tried adding tab characters off my keyboard, but for whatever reason that didn’t work for me. So, I copied the first character - it looks like a space - after the S at the start of the first line, and pasted it where I wanted a tab. I was able to achieve this by wathcing what it looked like in the output side. Not exactly friendly!
For whatever that is worth. You can copy individual strings from that. An alternative that does not support copying individual strings is to post a picture. I run Windows, so I did a Print Screen, pasted that into an image tool (IrfanView), and cropped it.
Well, thanks! I had in mind to comment on @CMF_BigECat’s post but didn’t want to clutter the board. So, here goes:
Here’s how to make a “Discourse” table in Discourse
You need to put “|” between columns and add a row formatted like |-|-|-| below the header row. Like this:
|Left aligned | Center aligned | Right aligned |
|-------------|:--------------:|---------------:|
| text | more text | 37 |
Left aligned
Center aligned
Right aligned
text
more text
37
Now, the number of spaces inside cells doesn’t matter, nor how many -. I just formatted it for clarity. What matters is that the number of |-----| matches the number of columns in the header row. Note that you can change alignment as in the example above, like |--:|for a column with right aligned cells.
In many cases it doesn’t make sense to have a header. Here’s how:
| | | |
|---|---|---|
|Table | without | header |
Table
without
header
I.e, just make sure you don’t have any content in the header row. Skipping it won’t work.
A quicker way to make tables - if you already have a table lying around in tab separated format - is to just copy and paste it. Discourse then automatically converts it into a table. You can copy directly from Excel for example.
This doesn’t always work, however. E.g. if you a have spurious tab or a mismatch somewhere, you’ll get the text as is instead, with tabs that are indistinguishable from spaces in the editor. Which might result in a mess trying to figure out, and you’ll end up with “please help me fix my table”, “couldn’t get the table to work” and so forth.
While convenient, there are limitations, situations where it won’t look like intended and cases where it will blow up on you, so I recommend fooling around with constructing tables manually by using the underlying syntax.
In this particular case, you came really close to making a table. The devil is in the details. By copying into a preformatted text section you avoided the part that would have automatically converted the text into a table. By copying the text from your first attempt into my own post, I end up with a rather nice table! However, trying the same from your final nicely formatted one will not produce a table. As said, “will blow up on you”.
Part 2 - How to make to preformatted text look nice
You might have noticed the lack of fancy or annoying colored text in my preformatted text blocks. If you want an old school table, for example. You don’t want this:
Ticker ARR (M$) % Incr ARR incr in M$
PANW 2100 67% 843 // Help! I DID NOT ASK FOR A RAINBOW
CRWD 2340 54% 811
S 487 106% 251 "I really didn't"
So what’s going on and why? Well, it’s syntax highlighting. Discourse defaults to assume that whenever anyone is using the button for preformatted text, they’re obviously doing it to display a piece of code, since everyone is a programmer. Thus, great for pasting a snippet like this:
// Erase all that ever where. TODO: we do have a backup of the old boards, right?!
for(int i = 0; i < posts.length(); i++) wipe_post_from_surface_of_the_earth(posts[i]);
Ok, so how do we get around this in those rare cases when we’re not throwing code at each other? We do this by specifying what kind of syntax highlighting we want. The way to do this is to add it right after the ``` after having used that button. Like this:
```text
no syntax highlight
```
You can use any combination of characters that’s not a supported programming language, but I use text since it’s intuitive and a four letter combination that definitely won’t become one.
Another alternative, and this also comes down to a choice of style, is to use surround your lines with <pre> and </pre> instead of using the ``` you get when you’re using the button . Like this:
<pre>
no syntax highlight. old-school style. mono-spaced text.
</pre>
Both options will give you “pre-formatted” text without fancy colors, but with different look and feel:
no syntax highlight
no syntax highlight. old-school style. mono-spaced text.
The latter approach (the one with <pre>) gives you a bit more flexibility, for example being able to use bold, like I’ve done in the table above.
Edit: Editing this post so that that the curious can view the source and see how it’s constructed and reuse stuff. Make sure to click on “Raw” to see the source. You know… There’s a couple of editing tricks employed here
button . Like this: